设置调度器 header(导航面板)的布局
scheduler.config.header = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next"
];
scheduler.init("scheduler_here");
当调度器使用此配置初始化时,调度器容器内的任何现有 HTML 都将被生成的标记替换。
此配置可以是一个简单的元素数组,也可以是嵌套结构以定义更复杂的布局。
请注意,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" 选项添加了一个按钮,用于切换迷你日历,其点击处理函数如下:
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();
}
});
}
};
若要使用不同参数自定义迷你日历行为,可以为 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"
];