How to change Timescaling for view and creating/resizing Events ?

Ask for help related to our Calendar 2.x version
Post Reply
User avatar
b.wust
Premium Member
Premium Member
Posts: 70
Joined: Fri Mar 11, 2011 12:37 pm

How to change Timescaling for view and creating/resizing Events ?

Post by b.wust »

Hi,

we need different Timescaling for Day/Week view and for creating or resizing Events. I found no solution until now.

Is this Feature not implemented yet ?
bryntum1.png
bryntum1.png (43.58 KiB) Viewed 1928 times

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 3121
Joined: Fri Apr 01, 2016 11:08 am

Re: How to change Timescaling for view and creating/resizing Events ?

Post by pmiklashevich »

Hello,

Day and Week views in Calendar it's just a Scheduler in "weekview" mode which uses "day" or "week" view preset.
https://www.bryntum.com/docs/calendar-for-extjs/#!/api/Cal.view.SchedulerGrid

To achieve what you need please adjust viewPreset config for both Day and Week views. timeResolution config is responsible for creating/resizing events.

Code: Select all

    modes : {
        day : {
            view : {
                // Config for scheduler in "weekview" mode which represents Day view
                viewPreset : {
                    // Override "day" viewPreset
                    name           : 'day',
                    // Creating or resizing events in 10 mins
                    timeResolution : {
                        unit      : 'MINUTE',
                        increment : 10
                    },
                    headerConfig        : {
                        bottom  : {
                            // Timescaling in 10 mins
                            unit        : 'MINUTE',
                            increment   : 10,
                            align       : 'center',
                            renderer    : function (value) {
                                // You can adjust how to render your ticks
                                return Ext.String.format(
                                    '<div class="sch-calendarcolumn-ct"><span class="sch-calendarcolumn-hours" style="' + (value.getMinutes() ? 'visibility: hidden;' : '') + '">{0}</span>' +
                                    '<span class="sch-calendarcolumn-minutes">{1}</span></div>',
                                    Ext.Date.format(value, 'H'),
                                    Ext.Date.format(value, 'i')
                                );
                            }
                        },
                        middle  : {
                            unit        : 'DAY',
                            align       : 'center',
                            dateFormat  : 'D d/m',
                            splitUnit   : 'DAY'
                        }
                    }
                }
            }
        },
You can try it out in our Calendars demo (examples/calendar/app/view/MainPanel.js)
Снимок экрана 2019-12-09 в 12.13.42.png
Снимок экрана 2019-12-09 в 12.13.42.png (68.2 KiB) Viewed 1916 times
Best,
Pavel
Pavel Miklashevich - Core Developer

User avatar
b.wust
Premium Member
Premium Member
Posts: 70
Joined: Fri Mar 11, 2011 12:37 pm

Re: How to change Timescaling for view and creating/resizing Events ?

Post by b.wust »

thx for your Reply, it is working fine now !

Post Reply