Jump to content

TUniCalendar select week


lema

Recommended Posts

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.

 

image.png.a9c1e8c682c17f61c100534acfc75544.png

Link to comment
Share on other sites

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);
}

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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?

 

 

Link to comment
Share on other sites

  • 1 year later...

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);
    }
});

 

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)
        }
    });
}

 

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...