Calendar UI Config

Ask for help related to our Calendar 2.x version
Post Reply
User avatar
kprokopenko
Posts: 2
Joined: Tue Jun 11, 2019 4:51 pm

Calendar UI Config

Post by kprokopenko » Wed Jul 17, 2019 8:16 pm

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.

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

Re: Calendar UI Config

Post by pmiklashevich » Thu Jul 18, 2019 11:21 am

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
Pavel Miklashevich - Core Developer

Post Reply