Ask for help related to our Calendar 2.x version


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 2183 times

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.
    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 2171 times
Best,
Pavel
Pavel Miklashevich - Core Developer

Post by b.wust »

thx for your Reply, it is working fine now !

Post Reply