Integration mit Svelte
DHTMLX Booking lässt sich über eine Single-File-Komponente in Svelte integrieren, die das Widget in einem gebundenen Container einbindet. Dieses Handbuch führt Sie durch das Erstellen eines Svelte-Projekts, die Installation von Booking und das Rendern des Widgets mit Daten und Events. Die vollständige Referenzimplementierung finden Sie im Svelte-Beispiel auf GitHub.
Dieses Handbuch setzt Kenntnisse der grundlegenden Svelte-Konzepte voraus. Eine Einführung finden Sie in der Svelte-Dokumentation.
Projekt erstellen
Erstellen Sie zunächst ein Svelte-Projekt, bevor Sie die Booking-Integration hinzufügen.
Der folgende Befehl startet das Vite-Scaffolding-Tool:
npm create vite@latest
Benennen Sie das Projekt auf Aufforderung my-svelte-booking-app.
Abhängigkeiten installieren
Wechseln Sie in das Projektverzeichnis.
Der folgende Befehl öffnet den neu erstellten App-Ordner:
cd my-svelte-booking-app
Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit Ihrem Paketmanager.
Die folgenden Befehle verwenden yarn:
yarn
yarn dev
Die folgenden Befehle verwenden npm:
npm install
npm run dev
Die App läuft auf einem Localhost, zum Beispiel http://localhost:5173.
Booking zur App hinzufügen
Stoppen Sie den Entwicklungsserver, bevor Sie das Booking-Paket installieren, und erstellen Sie dann eine Svelte-Komponente, die das Widget kapselt.
Schritt 1. Paket installieren
Laden Sie das Booking-Testpaket herunter und folgen Sie den Schritten in der README des Pakets. Die Testversion ist 30 Tage lang gültig.
Schritt 2. Booking-Komponente erstellen
Erstellen Sie eine Datei Booking.svelte im Verzeichnis src/ und führen Sie die folgenden Schritte aus, um das Widget zu verbinden.
Quelldateien importieren
Importieren Sie die Booking-Klasse und das Stylesheet mit dem Pfad, der Ihrer Distribution entspricht:
- dhx-booking-package — PRO-Version, die aus einem lokalen Ordner installiert wurde
- @dhx/trial-booking — Testversion
Das folgende Code-Snippet importiert Booking aus dem PRO-Paket:
<script>
import { Booking } from 'dhx-booking-package';
import 'dhx-booking-package/dist/booking.css';
</script>
Wenn Ihr PRO-Paket minimierte Assets enthält, importieren Sie die CSS-Datei als booking.min.css.
Das folgende Code-Snippet importiert Booking aus dem Testpaket:
<script>
import { Booking } from '@dhx/trial-booking';
import '@dhx/trial-booking/dist/booking.css';
</script>
Dieses Tutorial verwendet die Testversion von Booking.
Container festlegen und Booking initialisieren
Binden Sie den Host-Container mit bind:this und instanziieren Sie Booking innerhalb von onMount(). Rufen Sie destructor() in onDestroy() auf, um das Widget zu entfernen, wenn Svelte die Komponente entlädt.
Das folgende Code-Snippet deklariert eine Booking-Komponente mit einem gebundenen Container und Lifecycle-Hooks:
<script>
import { onMount, onDestroy } from "svelte";
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css";
let container; // Host-Container für Booking
let booking;
onMount(() => {
// Booking-Instanz erstellen
booking = new Booking(container, {})
});
onDestroy(() => {
booking.destructor(); // Booking entfernen
});
</script>
<div bind:this={container} class="widget"></div>
Styles hinzufügen
Booking benötigt sowohl das Widget-Stylesheet (oben importiert) als auch einen Container mit definierten Abmessungen. Setzen Sie die volle Höhe für die Seite und den Widget-Container in der Haupt-CSS-Datei des Projekts.
Das folgende Code-Snippet setzt die volle Höhe für die Seite und den Booking-Container:
/* Seitenstile; verwenden Sie den #app-Root-Container */
html,
body,
#app {
height: 100%;
padding: 0;
margin: 0;
}
/* Booking-Container */
.widget {
height: 100%;
}
Daten laden
Um Kartendaten in Booking zu laden, bereiten Sie einen Datensatz vor, der der Eigenschaft data entspricht. Das vollständige Datenformat und Ladeszenarien finden Sie im Handbuch Daten laden.
Erstellen Sie eine Datei data.js im Verzeichnis src/.
Das folgende Code-Snippet definiert einen getData()-Helfer, der einen Beispieldatensatz zurückgibt:
export function getData() {
function getDate(addDays, hoursValue = 0, minutesValue = 0) {
const date = new Date();
const secondsValue = 0; // auf Minuten runden
const msValue = 0;
date.setDate(date.getDate() + addDays);
date.setHours(hoursValue, minutesValue, secondsValue, msValue);
return date.getTime();
}
return [
{
id: "ee828b5d-a034-420c-889b-978840015d6a",
title: "Natalie Tyson",
category: "Therapist",
subtitle: "2 years of experience",
details: "Cleveland Clinic\n9500 Euclid Ave",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/01.jpg",
price: "$35",
review: {
stars: 4,
count: 120
},
slots: [
{
from: 9,
to: 20,
days: [1, 2, 3, 4, 5]
},
{
from: 10,
to: 18,
days: [6, 0]
}
]
},
{
id: "9b037564-77be-429f-b719-eebbe499027a",
title: "Emma Johnson",
category: "Cardiologist",
subtitle: "2 years of experience",
details: "Stanford Health Care\n1468 Madison Ave",
preview: "https://snippet.dhtmlx.com/codebase/data/booking/01/img/03.jpg",
price: "$25",
review: {
stars: 5,
count: 10
},
slots: [
{
from: 14,
to: 17,
size: 30,
gap: 10
},
{
from: 12,
to: 19,
size: 50,
gap: 20,
days: [2],
dates: [getDate(0)]
},
{
from: "18:30",
to: 20,
size: 20,
gap: 20,
days: [3, 4, 5]
}
],
usedSlots: [getDate(0, 12), getDate(0, 18)]
},
// ...
];
}
Öffnen Sie App.svelte, importieren Sie den Datensatz und übergeben Sie ihn als Prop an die <Booking/>-Komponente.
Das folgende Code-Snippet rendert die Booking-Komponente mit einem data-Prop:
<script>
import Booking from "./Booking.svelte";
import { getData } from "./data.js";
const dataset = getData();
</script>
<Booking data={dataset} />
Öffnen Sie Booking.svelte und leiten Sie den data-Prop an die Booking-Konfiguration weiter.
Das folgende Code-Snippet verdrahtet den Prop mit dem Booking-Konstruktor:
<script>
import { onMount, onDestroy } from "svelte";
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css";
export let data;
let container;
let booking;
onMount(() => {
booking = new Booking(container, {
data
})
});
onDestroy(() => {
booking.destructor();
});
</script>
<div bind:this={container} class="widget"></div>
Die Booking-Komponente rendert nun mit den geladenen Daten. Um das Widget weiter anzupassen, übergeben Sie zusätzliche Konfigurationseigenschaften — die vollständige Liste finden Sie in der Übersicht der Eigenschaften.
Events verarbeiten
Eine Benutzeraktion im Widget löst ein Event aus. Abonnieren Sie ein Event mit booking.api.on(eventName, handler), um auf die Aktion zu reagieren. Die vollständige Liste der Events finden Sie in der Übersicht der Events.
Öffnen Sie Booking.svelte und erweitern Sie onMount() um ein Event-Abonnement.
Das folgende Code-Snippet protokolliert die Slot-ID, wenn ein Benutzer einen Slot auswählt:
<script>
// ...
let booking;
onMount(() => {
booking = new Booking(container, {})
// ausgewählte Slot-ID protokollieren
booking.api.on("select-slot", (obj) => {
console.log(obj.id);
});
});
onDestroy(() => {
booking.destructor();
});
</script>
// ...
Starten Sie die App, um Booking mit Daten auf der Seite zu sehen.
Passen Sie den Code an Ihre Projektanforderungen an. Die vollständige Referenzimplementierung ist auf GitHub verfügbar.