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

[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 (43.58 KiB) Viewed 1987 times

[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 (68.2 KiB) Viewed 1975 times

Best,
Pavel

[b.wust]

thx for your Reply, it is working fine now !