Jump to content

UniCalendarPanel, change settings


Georges Soares

Recommended Posts

In searching the forum I found neither on the internet nor how to change the UniCalendarPanel:

 

1. Start viewing by day and not by month

2. Being by day, show only the hours I want, example, from 8am until 6pm

3. disable a certain time zone, type 11am not possible to choose

3. Change the time division, this every 30 minutes, put 15 minutes

Link to comment
Share on other sites

Hi,

 

1. Start viewing by day and not by month

 

Can you try this approach for now ?!:

 

UniCalendarPanel1 -> ClientEvents -> ExtEvents -> add function afterrender:

function afterrender(sender, eOpts)
{
    // 0 - Day
    // 1 - Week
    // 2 - Month
    sender.setActiveView(0);
}
Link to comment
Share on other sites

Need to analyze,
The above solution should help you with the following issues:

 

 

In searching the forum I found neither on the internet nor how to change the UniCalendarPanel:
 
2. Being by day, show only the hours I want, example, from 8am until 6pm
4. Change the time division, this every 30 minutes, put 15 minutes

 

Link to comment
Share on other sites

I already use the code given above, it was very handy to put the time in default 24.
 
But I tried to change it to show only a few hours but without success.

See the altered part and the result in the image, I would like in this case that it showed the hour starting at 1:00 p.m.

                dt = Ext.Date.clearTime(new Date('5/26/1972'));
        
                for(i=0; i<24; i++){
                   if (i > 13){
                    times.push(Ext.Date.format(dt, 'G:i'));                                      
                    dt = Ext.calendar.util.Date.add(dt, {hours: 1});}   
                }

post-4422-0-38065000-1498846496_thumb.png

Link to comment
Share on other sites

[sOLUTION]

After thinking and researching, I began to understand the code and managed to make the changes.

In the code to change the start of the agenda Just change

 

Dt = Ext.Date.clearTime (new Date ('5/26/1972'));

for

Dt = new Date ('5/26/1972 13:00:00');

 

And if you still want to increase or decrease the time divisions you can change

Dt = Ext.calendar.util.Date.add (dt, {hours: 1});

for

Dt = Ext.calendar.util.Date.add (dt, {hours: 0.5});

 

 

Be sure to set that part of the code to the desired amount of interval

 

  For (i = 0; i <24; i ++)

 

Thank you guys who tried to help.

 

If anyone has doubts let me know.

Link to comment
Share on other sites


// private
applyTemplate : function(o){
this.today = Ext.calendar.util.Date.today();
this.dayCount = this.dayCount || 1;

var i =0,
days = [],
dt = Ext.Date.clone(o.viewStart),
times = [];

for(; i<this.dayCount; i++){
days[i] = Ext.calendar.util.Date.add(dt, {days: i});
}

// use a fixed DST-safe date so times don't get skipped on DST boundaries
dt = new Date('5/26/1972 08:00:00');

for(i=0; i<7; i++){
times.push(Ext.Date.format(dt, 'G:i'));
dt = Ext.calendar.util.Date.add(dt, {hours: 0.5});
}

dt = new Date('5/26/1972 13:00:00');

for(i=0; i<11; i++){
times.push(Ext.Date.format(dt, 'G:i'));
dt = Ext.calendar.util.Date.add(dt, {hours: 0.5});
}

return this.applyOut({
days: days,
dayCount: days.length,
times: times
}, []).join('');
}

post-4422-0-23182400-1499089395_thumb.png

Link to comment
Share on other sites

Unfortunately the UniCalendarPanel component needs to evolve a bit more to accept the customizations needed for day to day. In this case I have chosen to be removing it from my project, and the above solution does not work at all.

 

Thankfully, uniGUI brings other options that we can use for our needs, so I put the Grid with HTML generated in SQL so that I can set up my agenda in the way that I think is best.

 

Follow the image of the solution that I did, I am available.

 

 

post-4422-0-14605700-1499107945_thumb.png

Link to comment
Share on other sites

  • 4 months later...
  • 2 months later...
  • 3 months later...
// private
            applyTemplate : function(o){
                this.today = Ext.calendar.util.Date.today();
                this.dayCount = this.dayCount || 1;
        
                var i =0,
                    days = [],
                    dt = Ext.Date.clone(o.viewStart),
                    times = [];
            
                for(; i<this.dayCount; i++){
                    days[i] = Ext.calendar.util.Date.add(dt, {days: i});
                }

                // use a fixed DST-safe date so times don't get skipped on DST boundaries                
                dt = new Date('5/26/1972 08:00:00');
        
                for(i=0; i<7; i++){                  
                    times.push(Ext.Date.format(dt, 'G:i'));                                      
                    dt = Ext.calendar.util.Date.add(dt, {hours: 0.5});                     
                }

                dt = new Date('5/26/1972 13:00:00');
        
                for(i=0; i<11; i++){                  
                    times.push(Ext.Date.format(dt, 'G:i'));                                      
                    dt = Ext.calendar.util.Date.add(dt, {hours: 0.5});                     
                }
        
                return this.applyOut({
                    days: days,
                    dayCount: days.length,
                    times: times
                }, []).join('');
            }

This in UniCalendarPanel1 -> ClientEvents -> ExtEvents -> function afterrender or another?

Link to comment
Share on other sites

 

Hi,

 

 

Can you try this approach for now ?!:

 

UniCalendarPanel1 -> ClientEvents -> ExtEvents -> add function afterrender:

function afterrender(sender, eOpts)
{
    // 0 - Day
    // 1 - Week
    // 2 - Month
    sender.setActiveView(0);
}

I didn't get this to work so I tried this (ClientEvents->UniEvents->beforeInit)

I'm using version 1.10.0.1462

 

function beforeInit(sender, config)
{
  sender.defaultView = 'day';
}
Link to comment
Share on other sites

  • 9 months later...
On ‎6‎/‎1‎/‎2018 at 2:39 PM, Sherzod said:

Hi,

 

 

Yes, this solution was for ExtJS4

Hi,

What is the solution for uniGUI 1.7 (ExtJS 6.7) ?

"setActiveView" and "defaultView" don't work anymore.

 

Thank you!

Link to comment
Share on other sites

9 minutes ago, ZigZig said:

What is the solution for uniGUI 1.7 (ExtJS 6.7) ?

"setActiveView" and "defaultView" don't work anymore.

Have you tried this config for example?

UniCalendarPanel -> ClientEvents -> UniEvents ->

function beforeInit(sender, config)
{
    config.defaultView = 'week'; //day, month (default)
}

 

  • Like 2
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...