Integration mit Vue
DHTMLX Booking lässt sich über eine Single-File-Komponente in Vue 3 integrieren, die das Widget in einem ref'd-Container einbettet. Dieses Handbuch führt Sie durch das Erstellen eines Vue-Projekts, die Installation von Booking und das Rendern des Widgets mit Daten und Events. Die vollständige Referenzimplementierung finden Sie im Vue-Beispiel auf GitHub.
Dieses Handbuch setzt Kenntnisse der Vue 3-Grundkonzepte voraus. Eine Einführung finden Sie in der Vue 3-Dokumentation.
Projekt erstellen
Erstellen Sie zunächst ein Vue-Projekt, bevor Sie die Booking-Integration hinzufügen.
Installieren Sie Node.js, bevor Sie beginnen.
Der folgende Befehl führt das offizielle Vue-Scaffolding-Tool aus:
npm create vue@latest
Der Befehl installiert und führt create-vue aus. Informationen zu den Eingabeaufforderungen und Optionen finden Sie im Vue.js Quick Start. Nennen Sie das Projekt my-vue-booking-app, wenn Sie dazu aufgefordert werden.
Abhängigkeiten installieren
Wechseln Sie in das Projektverzeichnis.
Der folgende Befehl öffnet den neu erstellten App-Ordner:
cd my-vue-booking-app
Installieren Sie die Abhängigkeiten und starten Sie den Dev-Server 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 Dev-Server, bevor Sie das Booking-Paket installieren, und erstellen Sie dann eine Vue-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 aktiv.
Schritt 2. Booking-Komponente erstellen
Erstellen Sie eine Datei Booking.vue im Verzeichnis src/components/ 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, aus einem lokalen Ordner installiert
- @dhx/trial-booking — Testversion
Der folgende Code-Ausschnitt 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.
Der folgende Code-Ausschnitt 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
Deklarieren Sie den Host-Container im Template und instanziieren Sie Booking im mounted()-Hook. Rufen Sie destructor() in unmounted() auf, um das Widget zu entfernen, wenn Vue die Komponente ausblendet.
Der folgende Code-Ausschnitt deklariert eine Booking-Komponente mit einem ref'd-Container und Lifecycle-Hooks:
<script>
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css";
export default {
mounted() {
// Booking-Instanz erstellen
this.booking = new Booking(this.$refs.container, {});
},
unmounted() {
this.booking.destructor(); // Booking entfernen
}
};
</script>
<template>
<div ref="container" class="widget"></div>
</template>
Styles hinzufügen
Booking benötigt sowohl das Widget-Stylesheet (oben importiert) als auch einen Container mit definierter Größe. Legen Sie in der Haupt-CSS-Datei des Projekts die volle Höhe für die Seite und den Widget-Container fest.
Der folgende Code-Ausschnitt setzt die volle Höhe für die Seite und den Booking-Container:
/* Seitenstile — Root-Container #app verwenden */
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. Informationen zum vollständigen Datenformat und zu Ladeszenarien finden Sie im Handbuch Daten laden.
Erstellen Sie eine Datei data.js im Verzeichnis src/.
Der folgende Code-Ausschnitt 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.vue, importieren Sie den Datensatz, stellen Sie ihn über die Option data() bereit und übergeben Sie den Datensatz als Prop an die Komponente <Booking/>.
Der folgende Code-Ausschnitt rendert die Booking-Komponente mit einem data-Prop:
<script>
import Booking from "./components/Booking.vue";
import { getData } from "./data";
export default {
components: { Booking },
data() {
const dataset = getData();
return { dataset };
}
};
</script>
<template>
<Booking :data="dataset" />
</template>
Öffnen Sie Booking.vue und leiten Sie das data-Prop an die Booking-Konfiguration weiter.
Der folgende Code-Ausschnitt verbindet das Prop mit dem Booking-Konstruktor:
<script>
import { Booking } from "@dhx/trial-booking";
import "@dhx/trial-booking/dist/booking.css";
export default {
props: ["data"],
mounted() {
this.booking = new Booking(this.$refs.container, {
data: this.data,
// weitere Konfigurationseigenschaften
});
},
unmounted() {
this.booking.destructor();
}
};
</script>
<template>
<div ref="container" class="widget"></div>
</template>
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 Events-Übersicht.
Öffnen Sie Booking.vue und erweitern Sie mounted() um ein Event-Abonnement.
Der folgende Code-Ausschnitt protokolliert die Slot-ID, wenn ein Benutzer einen Slot auswählt:
<script>
// ...
export default {
// ...
mounted() {
this.booking = new Booking(this.$refs.container, {});
// ID des ausgewählten Slots protokollieren
this.booking.api.on("select-slot", (obj) => {
console.log(obj.id);
});
}
// ...
}
</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.