настраивает layout для header планировщика (панели навигации)
scheduler.config.header = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next"
];
scheduler.init("scheduler_here");
При инициализации планировщика с этой настройкой, любой существующий HTML внутри контейнера планировщика будет заменён сгенерированной разметкой.
Эта конфигурация может быть простым массивом элементов или вложенной структурой для определения более сложного layout.
Учтите, что высота header/панели навигации по-прежнему контролируется опцией scheduler.xy.nav_height.
JS
scheduler.xy.nav_height = 80;
scheduler.config.header = {
rows: [
{
cols: [
"prev",
"date",
"next",
]
},
{
cols: [
"day",
"week",
"month",
"spacer",
"today"
]
}
]
};
scheduler.init("scheduler_here");
HTML
<div id="scheduler_here" style="height:100vh;width:100vw"></div>
Поддерживаемые значения включают:
scheduler.config.header = [
"day",
"week",
"month",
{html:"click me!", click:function(){alert("done!")}},
"date",
"prev",
"today",
"next"
];
scheduler.init("scheduler_here");
Опция "minicalendar" добавляет кнопку, которая переключает мини-календарь с таким click handler:
function showCalendar () {
if (scheduler.isCalendarVisible()) {
scheduler.destroyCalendar();
} else {
scheduler.renderCalendar({
position: this,
date: scheduler.getState().date,
navigation: true,
handler: function (date, calendar) {
scheduler.setCurrentView(date);
scheduler.destroyCalendar();
}
});
}
};
Чтобы настроить поведение мини-календаря с другими параметрами, предоставьте свой click handler для кнопки minicalendar следующим образом:
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: function (date, calendar) {
scheduler.setCurrentView(date);
scheduler.destroyCalendar();
}
});
}
}},
"date",
"prev",
"today",
"next"
];