Ask for help related to our Calendar 2.x version


Post 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.

Post 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.
    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.
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
    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.
    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.
    modes : {
        week : {
            view : {
                timeAxis   : {
                    autoAdjust : false
                },
                viewPreset : {
                    name        : 'day',
                    defaultSpan : 5
                }
            }
        }
    },
Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply