dhtmlxScheduler in Plain JS/HTML
Wenn Sie eine Anwendung mit dhtmlxScheduler entwickeln, ist das Erste, was Sie benötigen, die Scheduler zu initialisieren oder einfach gesagt, auf der Seite anzuzeigen.
Dieser Leitfaden beschreibt die Initialisierung von dhtmlxScheduler in reinem JS und HTML. Sie können auch die Anleitungen zur Integration mit Frontend-Frameworks prüfen:
Verwenden Sie die fertige ReactScheduler-Komponente mit Props und Events.
In Angular-Projekten den Scheduler mithilfe einer dünnen Wrapper-Schicht integrieren.
Verwenden Sie Scheduler in Vue-Apps mit einem kleinen Wrapper und reaktiver Konfiguration.
Embed Scheduler in Svelte with a simple component that binds config and events.
Scheduler in Salesforce Lightning Web Components verwenden und mit Organisationsdaten verbinden.
Es gibt zwei Möglichkeiten, den Scheduler auf einer Seite zu initialisieren:
Scheduler-Initialisierung über Markup
Um einen grundlegenden Scheduler über das Markup auf der Seite anzuzeigen, befolgen Sie drei Schritte:
- Binden Sie die dhtmlxScheduler-Code-Dateien in die Seite ein.
- Erstellen Sie einen DIV-Container auf der Seite und definieren Sie die zugehörigen DIV-Container für seine Elemente.
- Initialisieren Sie dhtmlxScheduler im neu erstellten Container mit der init-Methode. Als Parameter erwartet die Methode einen HTML-Container (oder dessen ID), in dem der Scheduler angezeigt wird.
<!DOCTYPE html>
<html>
<head>
<script src="../scheduler/dhtmlxscheduler.js" type="text/javascript"></script>
<link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css"
type="text/css">
</head>
<body>
<!--Container für Scheduler und das Standard-Set an 'divs'-->
<div id="scheduler_here" class="dhx_cal_container">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" data-tab="day"></div>
<div class="dhx_cal_tab" data-tab="week" ></div>
<div class="dhx_cal_tab" data-tab="month"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<script>
scheduler.init("scheduler_here"); /*!*/
</script>
</body>
</html>
Scheduler-Initialisierung über Header-Konfiguration
Sie müssen Scheduler auf diese Weise initialisieren, um ihn responsiv zu machen.
Um einen grundlegenden Scheduler auf der Seite anzuzeigen, gehen Sie wie folgt vor:
- Binden Sie die dhtmlxScheduler-Code-Dateien in die Seite ein.
- Erstellen Sie einen DIV-Container auf der Seite.
- Geben Sie die Struktur des Schedulers in dem Header Konfigurationsobjekt an.
- Initialisieren Sie dhtmlxScheduler im neu erstellten Container mit der init-Methode. Als Parameter erhält die Methode einen HTML-Container (oder dessen ID), in dem der Scheduler angezeigt wird.
<!DOCTYPE html>
<html>
<head>
<script src="../scheduler/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css"
type="text/css">
</head>
<body>
<!--Container für Scheduler-->
<div id="scheduler_here">
</div>
</body>
<script>
//Die Struktur des Schedulers
scheduler.config.header = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next"
];
scheduler.init('scheduler_here',new Date(2027,0,1),"week"); /*!*/
</script>
</html>
Erforderliche Code-Dateien
Die erforderlichen Code-Dateien sind:
- dhtmlxscheduler.js
- dhtmlxscheduler.css (Sie können auch die verfügbaren Skins erkunden)
<script src="../scheduler/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css" type="text/css">
Lassen Sie uns schnell die Struktur des dhtmlxScheduler-Pakets erkunden, um herauszufinden, wo man die Dateien findet.
- sources - Die Quellcode-Dateien der Bibliothek. Die Dateien sind nicht minifiziert und gut lesbar. Das Paket ist größtenteils für Debugging von Komponenten gedacht.
Beachten Sie, dass die Trial-Version der Scheduler-Bibliothek keinen sources-Ordner enthält.
- samples - Die Code-Beispiele.
- codebase - Die gepackten Code-Dateien der Bibliothek. Diese Dateien sind wesentlich kleiner und für den Einsatz in der Produktion gedacht. In Ihren Apps sollten Sie Dateien aus diesem Ordner verwenden.
Scheduler-Größen
Scheduler nimmt die volle Größe seines Container-Elements ein (scheduler_here-Div im obigen Beispiel), ohne es zu vergrößern. Das bedeutet, dass, wenn Sie die Container-Höhe nicht festlegen oder sie auf 0 setzen, Scheduler ebenfalls eine Nullhöhe hat und nicht angezeigt wird.
In unseren Beispielen machen wir Scheduler typischerweise fullscreen, indem wir der Dokumenten-Body und dem Scheduler-Container sowohl Breite als auch Höhe von 100% geben:
<style>
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
</head>
<body>
<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100%;">
Es kann leicht schief gehen, wenn Sie das scheduler_here-Element in ein DIV mit Standardgrößen platzieren:
<style>
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
</head>
<body>
<div class="outer_container"> /*!*/
<div id="scheduler_here" class="dhx_cal_container" style="width:100%;height:100%;">
Der Scheduler wird in diesem Fall nicht korrekt angezeigt, weil "scheduler_here" zu 100% seiner Elternhöhe gesetzt ist und die Größe seines Elternteils nicht festgelegt ist.
Wenn Sie relative Größen (%, Prozentangaben) für das .dhx_cal_container-Element verwenden, stellen Sie sicher, dass auch sein Elternteil eine Höhe festgelegt hat. Andernfalls könnte die resultierende Höhe null sein und der Scheduler wird nicht angezeigt.
Oder Sie können unterschiedliche Einheiten für die Haupt-Scheduler-Divs verwenden. Die folgenden Elemente erhalten die erwarteten Größen unabhängig von den Stilen der äußeren Elemente:
<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100vh;">
oder:
<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:800px;">
Scheduler-Autoren resizing
Die container_autoresize-Erweiterung für dhtmlxScheduler ändert das Standardverhalten der Größenanpassung des Schedulers. Standardmäßig passt sich dhtmlxScheduler automatisch an seinen Container an und verwendet interne Bildlaufleisten, um alle Daten im festen Größenbereich zugänglich zu machen.
Wenn die container_autoresize-Erweiterung aktiviert ist, passt Scheduler seine Größe dynamisch an den gesamten Inhalt an. Das bedeutet, Scheduler erweitert sich in Höhe und/oder Breite, um alle Ereignisse und Daten anzuzeigen, ohne interne Bildlaufleisten zu benötigen.
Dieses Verhalten stellt sicher, dass der gesamte Inhalt sichtbar ist, ohne innerhalb des Schedulers scrollen zu müssen, und ist ideal für Anwendungsfälle, in denen eine vollständige Sichtbarkeit des Scheduler-Inhalts ohne manuelles Scrollen erforderlich ist.
Verwendung
Um die container_autoresize-Erweiterung zu aktivieren, fügen Sie die Erweiterung wie folgt in Ihre Scheduler-Einrichtung ein:
scheduler.plugins({
container_autoresize: true
});
Autorisieren des Scheduler-Containers
Diese einfache Konfigurationsänderung aktiviert das container_autoresize-Verhalten und ermöglicht Scheduler, seine Größe basierend auf dem enthaltenen Inhalt anzupassen.
Behandlung der Kopfzeilen mit container_autoresize
Wenn die container_autoresize-Erweiterung aktiviert ist, passt Scheduler seine Größe an den gesamten Inhalt an. Dies kann dazu führen, dass Scheduler größer als der Bildschirmbereich wird, wodurch ein äußerer Container oder die Seitenleiste erscheint.
In diesem Modus scrollt die Seite auch die Navigation und die Zeitkopien, wodurch sie beim Herunterscrollen der Seite nicht mehr sichtbar sind. Obwohl dies normalerweise das beabsichtigte Verhalten ist, gibt es Szenarien, in denen Sie möchten, dass die Kopfzeilen fest bleiben. Dies lässt sich mit zusätzlichem Code und Stil erreichen.
Um die Kopfzeilen fest zu halten, können Sie die Sticky-Position zusammen mit zusätzlichem Styling verwenden, zum Beispiel:
<style>
.dhx_cal_container{
overflow: visible!important;
}
.dhx_cal_navline,
.dhx_cal_header {
position: sticky;
z-index: 10;
background:var(--dhx-scheduler-container-background);
}
.dhx_cal_navline{
z-index: 11;
top:0;
}
.dhx_cal_header{
/* obere Koordinate wird von JS zugewiesen */
margin-left: -1px;
box-shadow: 0 1px 0px 0px var(--dhx-scheduler-base-colors-border);
}
</style>
Zusätzlich benötigen Sie etwas JavaScript, um die korrekte obere Position der Sticky-Zeitachse sicherzustellen und sie direkt unter dem Navigationspanel zu positionieren.
Da das Navigationspanel flexibel ist und seine Höhe basierend auf anderen Stilen und Inhalten anpassen kann, müssen Sie dessen Höhe dynamisch berechnen und als obere Koordinate für den Header anwenden, wie folgt:
scheduler.attachEvent("onViewChange", function(){
const navBar = scheduler.$container.querySelector(".dhx_cal_navline");
const header = scheduler.$container.querySelector(".dhx_cal_header");
if(navBar && header){
header.style.top = `${navBar.offsetHeight}px`;
}
});
Schauen Sie sich die vollständige Demo im untenstehenden Snippet an:
Zugehöriges Beispiel [Container autoresize und sticky header]
Scheduler responsiv machen
Wenn Sie Scheduler über die Header-Konfigurations-Eigenschaft initialisieren, können Sie die Header-Struktur auswählen, die zur Bildschirmgröße des Clients passt. Es wendet außerdem bestimmte Stile an, die Elemente und Schriftgrößen auf kleinen Bildschirmen responsive machen.
Weitere Details finden Sie in einem separaten Artikel: Mobile Responsive Scheduler.
Dateien importieren in ES6/7- und TypeScript-Apps
Verwenden Sie folgenden Befehl, um Dateien zu importieren:
import { scheduler } from 'dhtmlx-scheduler';
Für die kommerzielle, Enterprise- oder Ultimate-Version sieht der Befehl so aus:
import { scheduler, Scheduler } from 'dhtmlx-scheduler';
Scheduler mit Vite verwenden
Falls Sie Vite in Ihrem Projekt verwenden, ist die folgende Einstellung für die vite.config.js-Datei erforderlich, um sicherzustellen, dass Scheduler korrekt in die App eingebunden wird:
optimizeDeps: {
include: [
'dhtmlx-scheduler',
]
}
Dateien in eine RequireJS-basierte App einbinden
Um dhtmlxScheduler-Dateien in eine RequireJS-basierte App einzubinden, sollten Sie der unten gezeigten Logik folgen:
requirejs(["codebase/dhtmlxscheduler"], function(dhx){
const scheduler = dhx.scheduler;
const Scheduler = dhx.Scheduler;// for Enterprise builds
scheduler.init('scheduler_here',new Date(),"week");
scheduler.parse([
{
id: 1, text: "Event 1", start_date: "2027-07-15 09:00",
end_date: "2027-07-15 10:00"
},
{
id: 2, text: "Event 2", start_date: "2027-07-15 10:00",
end_date: "2027-07-15 11:00"
}
]);
});
Die dhtmlxScheduler-Bibliothek gibt ein Objekt mit den Feldern scheduler und Scheduler (in Commercial-, Enterprise- oder Ultimate-Versionen) zurück - die Objekte scheduler und Scheduler, die hier beschrieben werden hier.
Wenn Sie Scheduler mit benutzerdefinierten Erweiterungen in RequireJS verwenden, sollten Sie die shim-Konfiguration für RequireJS angeben und direkt die Abhängigkeit der Erweiterungen von Scheduler darin festlegen.
Das folgende Beispiel zeigt, wie eine benutzerdefinierte Erweiterungsdatei custom_tooltip_plugin.js korrekt gesetzt werden kann:
requirejs.config({
paths: {
"dhtmlxscheduler": "../../codebase/dhtmlxscheduler",
"ext/dhtmlxscheduler_custom_tooltip": "../custom_tooltip_plugin"
},
shim: {
"ext/dhtmlxscheduler_custom_tooltip": ["dhtmlxscheduler"]
}
});
requirejs(["dhtmlxscheduler"],
function (dhx) {
const scheduler = dhx.scheduler;
scheduler.init('scheduler_here',new Date(),"week");
scheduler.parse([
{
id: 1, text: "Event 1", start_date: "2027-07-15 09:00",
end_date: "2027-07-15 10:00"
},
{
id: 2, text: "Event 2", start_date: "2027-07-15 10:00",
end_date: "2027-07-15 11:00"
}
]);
});
Überprüfen Sie, dass der Modulname für jede Datei innerhalb des Pakets als relativer Pfad innerhalb des 'codebase'-Ordners des Pakets plus dem Dateinamen angegeben wird, zum Beispiel:
Kernbibliothek:
- "dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler"