dhtmlxScheduler in Plain JS/HTML

Beim Erstellen einer Anwendung mit dhtmlxScheduler besteht der erste Schritt darin, den Scheduler auf der Seite einzurichten und anzuzeigen.

In dieser Anleitung erfahren Sie, wie Sie dhtmlxScheduler mit einfachem JS und HTML initialisieren. Für die Integration in Frontend-Frameworks können Sie die folgenden Anleitungen nutzen:


Angular	React	Svelte	Vue.js

Es gibt zwei Ansätze, um den Scheduler auf einer Seite zu initialisieren:

über das Markup des Schedulers
über die Header-Konfigurationseigenschaft

Initialisierung des Schedulers über Markup

Um einen grundlegenden Scheduler über Markup auf der Seite einzurichten, gehen Sie wie folgt vor:

Fügen Sie die dhtmlxScheduler-Code-Dateien in Ihre Seite ein.
Fügen Sie einen DIV-Container auf der Seite hinzu, zusammen mit den erforderlichen untergeordneten DIVs für dessen Elemente.
Initialisieren Sie dhtmlxScheduler im erstellten Container mit der Methode init. Diese Methode erwartet ein HTML-Container-Element (oder dessen ID), in dem der Scheduler gerendert 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" style='width:100%; height:100vh;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</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 type="text/javascript">     scheduler.init("scheduler_here");
   </script>
</body>
</html>

Scheduler initialization

Related sample: Basic initialization

Initialisierung des Schedulers über die Header-Konfiguration

Diese Methode wird empfohlen, wenn Sie den Scheduler responsiv gestalten möchten.

Um einen grundlegenden Scheduler auf der Seite einzurichten, gehen Sie wie folgt vor:

Fügen Sie die dhtmlxScheduler-Code-Dateien in Ihre Seite ein.
Fügen Sie einen DIV-Container auf der Seite hinzu.
Definieren Sie die Struktur des Schedulers im Konfigurationsobjekt header.
Initialisieren Sie dhtmlxScheduler im Container mit der Methode init. Übergeben Sie dabei den Container (oder dessen ID) als Parameter.

<!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" style='width:100%; height:100%;'>
   </div>
</body>   
<script>    //Die Struktur des Schedulers
    scheduler.config.header = [
        "day",
        "week",
        "month",
        "date",
        "prev",
        "today",
        "next"
    ];
    scheduler.init('scheduler_here',new Date(2020,0,1),"week");
</script>
</html>

Related sample: Responsive scheduler

Erforderliche Code-Dateien

Die einzubindenden Dateien sind:

dhtmlxscheduler.js
dhtmlxscheduler.css (weitere verfügbare Skins finden Sie in Skins)

<script src="../scheduler/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css" type="text/css">

Hier ein kurzer Überblick über die Struktur des dhtmlxScheduler-Pakets, um Ihnen das Auffinden der Dateien zu erleichtern:

sources – enthält die Quellcodedateien der Bibliothek. Diese sind nicht minifiziert und gut lesbar, hauptsächlich für Debugging-Zwecke.

Beachten Sie, dass die Trial-Version der Scheduler-Bibliothek keinen sources-Ordner enthält.

samples – enthält Beispielcode.
codebase – enthält die gepackten Code-Dateien der Bibliothek. Diese sind kleiner und für den Produktionseinsatz vorgesehen. In Ihren Projekten sollten Sie die Dateien aus diesem Ordner verwenden.

Größenanpassung des Schedulers

Der Scheduler nimmt die gesamte Größe seines Containerelements ein (scheduler_here-div in den obigen Beispielen), ohne das Container-Element selbst zu vergrößern.
Das bedeutet: Wenn Sie keine Höhe für den Container festlegen oder diese auf null gesetzt ist, hat auch der Scheduler eine Höhe von null und ist nicht sichtbar.

In unseren Beispielen nimmt der Scheduler in der Regel den gesamten Bildschirm ein, indem sowohl dem Dokumenten-Body als auch dem Scheduler-Container 100% Breite und Höhe zugewiesen werden:

<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%;">

Probleme können auftreten, wenn das scheduler_here-Element in einem Div mit Standardgrößeneinstellungen platziert wird:

<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%;">

In diesem Fall wird der Scheduler nicht korrekt angezeigt, da "scheduler_here" auf 100% seines Elternelements gesetzt ist, das Elternelement aber keine definierte Größe hat.

Wenn Sie relative Größen (Prozentwerte) für das .dhx_cal_container-Element verwenden, stellen Sie sicher, dass auch das Elternelement eine Höhe besitzt. Andernfalls kann die berechnete Höhe null sein und der Scheduler wird nicht angezeigt.

Alternativ können Sie für das Hauptdiv des Schedulers auch andere Einheiten verwenden. Die folgenden Beispiele sorgen für die erwartete Größe, 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;">

Automatische Größenanpassung des Schedulers

Die container_autoresize-Erweiterung verändert das Standardverhalten der Größenanpassung des Schedulers. Normalerweise passt sich dhtmlxScheduler an die Größe seines Containers an und zeigt bei Bedarf interne Scrollbalken, um alle Daten innerhalb des festen Containers anzuzeigen.

Mit aktivierter container_autoresize-Erweiterung passt sich der Scheduler dynamisch an den Inhalt an. Das bedeutet, er wächst in der Höhe und/oder Breite, um alle Ereignisse und Daten ohne interne Scrollbalken anzuzeigen.

Dadurch wird sichergestellt, dass alles sichtbar ist, ohne innerhalb des Schedulers scrollen zu müssen – besonders nützlich, wenn die vollständige Sichtbarkeit des Inhalts ohne manuelles Scrollen gewünscht ist.

Verwendung

Um die container_autoresize-Erweiterung zu aktivieren, binden Sie sie wie folgt in Ihre Scheduler-Konfiguration ein:

scheduler.plugins({
    container_autoresize: true
});

Mit dieser einfachen Konfiguration aktivieren Sie das container_autoresize-Feature und ermöglichen es dem Scheduler, seine Größe automatisch an den Inhalt anzupassen.

Umgang mit Kopfzeilen bei container_autoresize

Wenn die container_autoresize-Erweiterung aktiviert ist, passt sich der Scheduler automatisch so an, dass er allen Inhalt anzeigt. Dies kann dazu führen, dass der Scheduler über die Bildschirmgröße hinausgeht, wodurch Scrollbalken auf der Seite oder im äußeren Container erscheinen.

In diesem Modus bewegen sich beim Scrollen der Seite auch die Navigations- und Zeit-Kopfzeilen, sodass sie beim Herunterscrollen nicht sichtbar bleiben. Dieses Verhalten ist normalerweise in Ordnung, aber in manchen Fällen ist es wünschenswert, die Kopfzeilen fixiert anzuzeigen. Dies lässt sich mit zusätzlichem Styling und Skripting erreichen.

Um die Kopfzeilen zu fixieren, können Sie CSS-Sticky-Positionierung zusammen mit weiteren Stilen 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{
      /* top coordinate is assigned from JS */
      margin-left: -1px;
      box-shadow: 0 1px 0px 0px var(--dhx-scheduler-base-colors-border);
  }
</style>

Zusätzlich ist etwas JavaScript notwendig, um die korrekte obere Position der sticky Zeit-Skala zu setzen, damit sie direkt unterhalb des Navigationsbereichs liegt.

Da die Höhe des Navigationsbereichs je nach Stil und Inhalt variieren kann, sollte die Höhe dynamisch berechnet und als oberer Wert für die Kopfzeile gesetzt werden, z. B.:

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`;
   }
});

Ein vollständiges Beispiel finden Sie im folgenden Snippet:

Scheduler responsiv machen

Wenn der Scheduler über die header-Konfigurationseigenschaft initialisiert wird, kann ein Kopfzeilen-Layout gewählt werden, das zur Bildschirmgröße des Clients passt. Es werden außerdem bestimmte Stile angewendet, die Elemente und Schriftgrößen besser an kleinere Bildschirme anpassen.

Weitere Informationen finden Sie im Artikel: Mobile Responsive Scheduler.

Dateien in ES6/7- und TypeScript-Anwendungen importieren

Verwenden Sie diesen Befehl, um die Dateien zu importieren:

import { scheduler } from 'dhtmlx-scheduler';

Für die Commercial-, Enterprise- oder Ultimate-Versionen sieht der Import so aus:

import { scheduler, Scheduler } from 'dhtmlx-scheduler';

Scheduler mit Vite verwenden

Wenn Ihr Projekt Vite verwendet, fügen Sie folgende Einstellung zur vite.config.js-Datei hinzu, damit der Scheduler korrekt in Ihre App eingebunden wird:

vite.config.js

optimizeDeps: {
    include: [
        'dhtmlx-scheduler',
    ]
}

Dateien in eine RequireJS-basierte Anwendung einbinden

Um dhtmlxScheduler-Dateien in einer RequireJS-basierten Anwendung einzubinden, gehen Sie wie im folgenden Beispiel vor:

requirejs(["codebase/dhtmlxscheduler"], function(dhx){
    var scheduler = dhx.scheduler;
    var Scheduler = dhx.Scheduler;// for Enterprise builds
 
    scheduler.init('scheduler_here',new Date(),"week");
    scheduler.parse([
        {
            id: 1, text: "Event 1", start_date: "2022-07-15 09:00", 
            end_date: "2022-07-15 10:00"
        },
        {
            id: 2, text: "Event 2", start_date: "2022-07-15 10:00", 
            end_date: "2022-07-15 11:00"
        }
    ]);
});

Die dhtmlxScheduler-Bibliothek gibt ein Objekt zurück, das scheduler und Scheduler enthält (in Commercial-, Enterprise- oder Ultimate-Versionen) — diese entsprechen den scheduler- und Scheduler-Objekten, die hier beschrieben sind.

Wenn Sie Scheduler mit benutzerdefinierten Erweiterungen in RequireJS verwenden, stellen Sie sicher, dass Sie die shim-Konfiguration für RequireJS angeben und die Abhängigkeiten der Erweiterungen vom Scheduler entsprechend deklarieren.

Das folgende Beispiel zeigt, wie Sie eine benutzerdefinierte Erweiterungsdatei custom_tooltip_plugin.js korrekt einbinden:

requirejs.config({
    paths: {
        "dhtmlxscheduler": "../../codebase/dhtmlxscheduler",
        "ext/dhtmlxscheduler_custom_tooltip": "../custom_tooltip_plugin"
    },
    shim: {
        "ext/dhtmlxscheduler_custom_tooltip": ["dhtmlxscheduler"]
    }
});
 
requirejs(["dhtmlxscheduler"], 
function (dhx) {
    var scheduler = dhx.scheduler;
 
    scheduler.init('scheduler_here',new Date(),"week");
    scheduler.parse([
        {
            id: 1, text: "Event 1", start_date: "2022-07-15 09:00", 
            end_date: "2022-07-15 10:00"
        },
        {
            id: 2, text: "Event 2", start_date: "2022-07-15 10:00", 
            end_date: "2022-07-15 11:00"
        }
    ]);
});

Stellen Sie sicher, dass der Modulname für jede Datei im Paket als relativer Pfad innerhalb des 'codebase'-Ordners des Pakets plus Dateiname angegeben wird, zum Beispiel:

Kernbibliothek:

"dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler"

Nach oben