Initialisierung

Diese Anleitung führt Sie durch die Erstellung einer Booking-Instanz auf einer Seite. Führen Sie die folgenden Schritte aus, um eine funktionierende Komponente zu erhalten:

1. Booking-Quelldateien einbinden.
2. Einen Container erstellen.
3. Booking mit dem Konstruktor initialisieren.

Quelldateien einbinden

Das Booking-Widget wird als zwei Dateien geliefert, die Sie auf der Seite laden.

Laden Sie das Paket herunter und entpacken Sie es in einen Ordner Ihres Projekts. Fügen Sie Ihrer Seite die folgenden Dateien hinzu:

• booking.js — Booking-Quellcode
• booking.css — Booking-Stylesheet

Legen Sie die korrekten relativen Pfade zu den Quelldateien fest.

Das folgende Code-Snippet bindet die Booking-Dateien aus einem dist/-Ordner ein:

index.html

<script type="text/javascript" src="./dist/booking.js"></script>
<link rel="stylesheet" href="./dist/booking.css">

Einen Container erstellen

Fügen Sie ein HTML-Element hinzu, das das Booking-Widget aufnimmt, und weisen Sie ihm eine ID zu, zum Beispiel root.

Das folgende Code-Snippet erstellt einen Container mit der ID root:

index.html

<div id="root"></div>

Booking initialisieren

Rufen Sie den Konstruktor booking.Booking mit zwei Parametern auf:

• container — der Selektor oder die ID des HTML-Containers, der das Widget aufnimmt
• config — ein Objekt mit Konfigurationseigenschaften (siehe Konfigurationseigenschaften)

Das folgende Code-Snippet initialisiert Booking innerhalb des Containers #root:

index.html

// Booking erstellen
new booking.Booking("#root", {
    // Konfigurationseigenschaften
});

Konfigurationseigenschaften

Info

Die vollständige Liste der Eigenschaften zur Konfiguration von Booking finden Sie in der Eigenschaften-Übersicht.

Beispiel

Das folgende Snippet initialisiert Booking mit einer Reihe von Anfangseigenschaften: