header
Description
Erstellung einer layout-ähnlichen Konfiguration für den Scheduler-Header (Navigationsbereich)
header: any
Example
scheduler.config.header = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next"
];
scheduler.init("scheduler_here");
Default value: null
Details
Wenn der Scheduler mit dieser Konfiguration initialisiert wird, wird jedes HTML, das vor der Initialisierung im Scheduler-Container platziert wurde, entfernt und stattdessen generierter HTML-Code eingefügt.
Der Wert dieser Konfiguration kann entweder ein einfaches Array von Elementen sein oder eine verschachtelte Struktur, die ein komplexes Layout beschreibt.
Beachten Sie, dass die Höhe der Kopfzeile/Navigationsleiste weiterhin von der Option scheduler.xy.nav_height gesteuert wird.
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>
Die unterstützten Werte sind:
{rows: Array, css: string}- ein Container für einen mehrzeiligen Header{cols: Array, css: string}- eine einzelne Zeile eines mehrzeiligen Headers"prev","next","today"- Datums-Navigationsschaltflächen"date"- das Datums-Label"day","week","month", usw. - Ansichts-Tabs"spacer"- ein transparentes Element, das den gesamten freien Raum einnimmt und verwendet werden kann, um ein anderes Element auf die rechte Seite der Kopfzeile zu schieben{html: string, click: function, css: string}- ein Objekt zum Einfügen benutzerdefinierter Buttons oder Icons in die Kopfzeile"minicalendar"- ein 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 Einstellungen:
Der minicalendar-Wert zeigt einen Minikalender-Button mit dem folgenden Click-Handler an:
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();
}
});
}
};
Wenn Sie renderCalendar() mit anderen Parametern aufrufen möchten, müssen Sie einen eigenen onclick-Handler für den Minikalender-Button bereitstellen:
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"
];