TUniCalendar select week

[lema]

Hello !

As title says,

is there any way to select -or mark- a week in uniCalendar (as screenshot below).

No need to get the range, or dynamically selection. I just want to use it in conjunction with uniCalendarPanel (in week mode).

(running v.1.90.0.1554)

 

TIA,

Lefteris.

 

[Sherzod]

Hello,

1 hour ago, lema said:

Do you want to color the row for the selected date?

[lema]

9 hours ago, Sherzod said:

Hello,

Do you want to color the row for the selected date?

Hello !

Yes, exactly that.

[Sherzod]

28 minutes ago, lema said:

Yes, exactly that.

I will post here, later

 

[Sherzod]

17 minutes ago, Sherzod said:

I will post here, later

1. UniServerModule.CustomCSS:

.customTr {
   background-color: yellowgreen;
   transition: all 0.3s ease-in;
}

2. MainForm.Script:

Ext.override(Ext.DatePicker, {
    update: function(date, forceRefresh) {
        var me = this;

        this.callParent(arguments);

        Ext.defer(function() {
            me.fireEvent("select");
        }, 200);
    }
});

3. UniCalendar -> ClientEvents -> ExtEvents -> function picker.select(sender, date, eOpts)

function picker.select(sender, date, eOpts) 
{
    var me=this;
    
    me.getEl().select('tr').each(function(el) {
        el.removeCls('customTr')
    });

    Ext.defer(function() {
        me.getEl().select('.x-datepicker-selected').each(function(el) {
            el.up('tr').addCls('customTr')
        })
    }, 0);
}

 

[Abaksoft]

Many Thanks Maestro.

You should edit a book :

"Developing Client Side with Unigui"

and i will buy it

[lema]

Thank you !

I didn't try it yet, but it is really impressive that you can analyze, find and implement it so fast.

Also, I wish, I could understand that JavaScript stuff...

 

I wonder, where can I find such information?

Sencha Ext JS docs? forums? Could you please give me a hint?

 

 

[lema]

1 hour ago, Abaksoft said:

Many Thanks Maestro.

You should edit a book :

"Developing Client Side with Unigui"

and i will buy it

Not a bad idea !

 

[lema]

Hello dear Sherzod.
I'm returning to this topic, because the code below seems to be affecting also the UniDateTimePicker components on the form.
It works perfect for the uniCalendar, but the menu of the DateTimePicker control opens and closes automatically, not allowing the user to select a date.

 

Ext.override(Ext.DatePicker, {
    update: function(date, forceRefresh) {
        var me = this;

        this.callParent(arguments);

        Ext.defer(function() {
            me.fireEvent("select");
        }, 200);
    }
});

 

 

 

[Sherzod]

Hello @lema

How can I reproduce this issue? 

[lema]

Hello dear @Sherzod

I am sending a sample. I used the CalendarPanel example, adding the scripts above.

You cannot use the UniDateTimePicker controls in "Add/Edit Event" form. They popup and close immediately....

Obviously, the MainForm.Script causes this problem.

Can you suggest any workaround?

 

 

uniCalendar.zip

[Sherzod]

Thanks for the testcase, I will try to check it. 

[Sherzod]

14 hours ago, lema said:

You cannot use the UniDateTimePicker controls in "Add/Edit Event" form. They popup and close immediately....

Hello,

Okay,

1. Remove script from MainForm.Script

2. UniCalendar1.ClientEvents.UniEvents -> Ext.picker.Date [picker]

function picker.beforeInit(sender, config) 
{
    Ext.override(sender, {
        update: function(date, forceRefresh) {
            var me = this;

            this.callParent(arguments);

            Ext.defer(function() {
                me.fireEvent("select");
            }, 200)
        }
    });
}

 

[lema]

@Sherzod, you make it look very easy !
Thank you !