스케줄러 헤더(네비게이션 패널) 레이아웃을 설정합니다.
scheduler.config.header = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next"
];
scheduler.init("scheduler_here");
스케줄러가 이 설정으로 초기화되면, 스케줄러 컨테이너 내부의 기존 HTML은 생성된 마크업으로 대체됩니다.
이 설정은 단순한 요소 배열일 수도 있고, 더 복잡한 레이아웃을 정의하기 위한 중첩 구조일 수도 있습니다.
헤더/네비게이션 바의 높이는 여전히 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"
];