infoTemplate
Beschreibung
Optional. Ermöglicht das Anwenden einer Vorlage auf den Informationsblock im Booking-Dialog
Verwendung
infoTemplate?: ({item: obj, slot: number}) => string;
Parameter
infoTemplate nimmt das card-Element-Objekt und den ausgewählten slot-Zeitstempel als Eingabe entgegen und gibt einen HTML-String zurück.
Beispiel
Im folgenden Beispiel definieren wir die Funktion cardInfoTemplate, die das benutzerdefinierte HTML für den Informationsblock generiert. Diese Funktion erhält item (das Kartenobjekt) und slot (den Slot-Zeitstempel) als Eingabeparameter. Die Funktion gibt div-Container zurück, die den Informationsblock für ein ausgewähltes Buchungselement darstellen, einschließlich eines Bildes, einer Kategorie, eines Titels und eines formatierten Datums. Sie müssen außerdem den template-Hilfshelfer importieren und Ihre benutzerdefinierte Funktion infoTemplate zuweisen.
<style>
.custom-info {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
}
.info-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 34px;
background: rgba(128, 128, 155, 0.12);
border-radius: 8px;
}
/* weitere Stile */
</style>
<script>
const { Booking, template } = booking; // Template-Helfer importieren
function cardInfoTemplate({
item,
slot,
}) {
return `
<div class="custom-info">
<div class="info-wrapper">
<div class="photo-wrapper">
${getPhotoElement(item.preview, "info")}
</div>
<span class="info-title">${item.title}</span>
<span class="info-category">${item.category}</span>
<div class="date" data-action="reset-slot">
<i class="icon wxi-calendar"></i>
<span>${formatDate(slot, { dateFormat, timeFormat })}</span>
</div>
</div>
</div>
`;
}
const widget = new Booking("#root", {
data,
infoTemplate: template(cardInfoTemplate), // Funktion an die Widget-Konfiguration übergeben
});
</script>
Das folgende Snippet zeigt, wie Sie eine Vorlage auf den Informationsblock des Booking-Dialogs anwenden, der erscheint, wenn ein Benutzer auf die Zeitslot-Schaltfläche klickt:
Sie können auch steuern, welche Felder im Informationsblock des Booking-Dialogs angezeigt werden, indem Sie die Eigenschaft infoShape verwenden. Wenn jedoch beide Eigenschaften angewendet werden, überschreibt infoTemplate die infoShape-Einstellungen.
Verwandte Artikel: