Page 1 of 1

Calendar UI Config

Posted: Wed Jul 17, 2019 8:16 pm
by kprokopenko
Hi guys! Couple of questions:

1) Is it possible to hide a horizontal row in the header for all-day events? Kind of disable all-day events completely?
2) Is it possible to hide a top row (with current date, and buttons?
3) Is it possible to hide "+" button?
4) Is it possible to add margin to calendar items, so if part of the background is visible. This is needed so an event doesn't hide a fact that the background is highlighted from the user.
5) Is it possible to limit number of days visible in week view?

Thanks,
KP.

Re: Calendar UI Config

Posted: Thu Jul 18, 2019 11:21 am
by pmiklashevich
Hello,
1) Is it possible to hide a horizontal row in the header for all-day events? Kind of disable all-day events completely?
Yes, it's possible. Please see showAllDayHeader config.

Code: Select all

    modes : {
        day : {
            view : {
                showAllDayHeader : false
            }
        },
        week : {
            view : {
                showAllDayHeader : false
            }
        }
    },
2) Is it possible to hide a top row (with current date, and buttons?
Yes, it's possible too. Please see navigationToolbar config.

Code: Select all

navigationToolbar : false,
3) Is it possible to hide "+" button?
There is no explicit config for that, but can be easily achieved using Ext API:
https://docs.sencha.com/extjs/6.7.0/classic/Ext.container.Container.html#method-down
https://docs.sencha.com/extjs/6.7.0/classic/Ext.button.Button.html#method-hide

Code: Select all

    navigationToolbar : {
        listeners : {
            render : function(navBar) {
                navBar.down('button[cls=cal-create-btn]').hide();
            }
        }
    },
4) Is it possible to add margin to calendar items, so if part of the background is visible. This is needed so an event doesn't hide a fact that the background is highlighted from the user.
I suppose you're talking about Day view and Week view, because in all other views background is visible one way or the other. Please see barMargin config.

Code: Select all

    modes : {
        day : {
            view : {
                barMargin : 10
            }
        },
        week : {
            view : {
                barMargin : 10
            }
        }
    },
5) Is it possible to limit number of days visible in week view?
Day and Week views are actually schedulers, so everything that can be applied to scheduler can be applied to these views. In Scheduler Weekview demo we demonstrate how to show working days only (5 days). This approach can be applied to the Week view. Need to set autoAdjust to false and specify defaultSpan of the "day" view preset. By default Week view uses "week" viewPreset. When you specify view present as an object and set `name` all the other configs are merged to the preset and replace default values. You can look at packages/bryntum-calendar/src/Sch/preset/Manager.js file and find "day" preset to see its default values.

Code: Select all

    modes : {
        week : {
            view : {
                timeAxis   : {
                    autoAdjust : false
                },
                viewPreset : {
                    name        : 'day',
                    defaultSpan : 5
                }
            }
        }
    },
Best,
Pavel