header
Description
Provides a layout-like configuration for the scheduler header (navigation panel)
header: any
Example
scheduler.config.header = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next"
];
scheduler.init("scheduler_here");
Default value: null
Details
When Scheduler is initialized using this config, any HTML placed in the scheduler container prior to initialization will be removed and generated markup will be put instead.
The value of this config can either be a plain array of elements, or a nested structure which describes a complex layout.
Note that the height of the header/navigation bar is still controlled by the scheduler.xy.nav_height option.
scheduler.xy.nav_height = 80;
scheduler.config.header = {
rows: [
{
cols: [
"prev",
"date",
"next",
]
},
{
cols: [
"day",
"week",
"month",
"spacer",
"today"
]
}
]
};
scheduler.init("scheduler_here");
<div id="scheduler_here" style="height:100vh;width:100vw"></div>
The supported values are:
{rows: Array, css: string}- a container for a multi-row header{cols: Array, css: string}- a single row of a multi-row header"prev","next","today"- date navigation buttons"date"- the date label"day","week","month", etc. - view tabs"spacer"- a transparent element that takes the whole free space and can be used to push another element to the right side of the header{html: string, click: function, css: string}- an object for injecting custom buttons or icons into the header"minicalendar"- a Mini Calendar toggle
scheduler.config.header = [
"day",
"week",
"month",
{ html: "click me!", click: () => { alert("done!"); } },
"date",
"prev",
"today",
"next"
];
scheduler.init("scheduler_here");
Mini Calendar settings:
The minicalendar value will display a minicalendar button with the following click handler:
function showCalendar() {
if (scheduler.isCalendarVisible()) {
scheduler.destroyCalendar();
} else {
scheduler.renderCalendar({
position: this,
date: scheduler.getState().date,
navigation: true,
handler: (date, calendar) => {
scheduler.setCurrentView(date);
scheduler.destroyCalendar();
}
});
}
};
If you want to call renderCalendar() with different parameters, you need to provide your own onclick handler for the minicalendar button:
scheduler.config.header = [
"day",
"week",
"month",
{ view: "minicalendar", click: function() {
if (scheduler.isCalendarVisible()) {
scheduler.destroyCalendar();
} else {
scheduler.renderCalendar({
position: this,
date: scheduler.getState().date,
navigation: true,
handler: (date, calendar) => {
scheduler.setCurrentView(date);
scheduler.destroyCalendar();
}
});
}
} },
"date",
"prev",
"today",
"next"
];