Rezepte

Fertige Muster für häufige Anforderungen

Diese Seite sammelt komplette, kopierbare Beispiele, die mehrere BookingJs-Konzepte kombinieren. Die verlinkten Live-Beispiele können Sie direkt im Browser ausprobieren und verändern.

Schriftarten global und pro Komponente anpassen

Setzt eine neue Standard-Schrift für das gesamte Widget und eigene Schriften für Buttons und Links (PRO).

Schriftarten anpassenhtml

<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  timum.init(
    { ref: 'booking-widget-demo-resource@timum' },
    {
      typography: {
        // Standard-Schrift für das gesamte Widget
        fontFamily: '"Ysabeau Office", Roboto, Helvetica, Arial',
        // Schrift-Quellen, geladen per <link rel="stylesheet">
        fontSource: [
          'https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&family=Ysabeau+Office:ital,wght@0,1..1000;1,1..1000&display=swap',
        ],
      },
      components: {
        // Schrift nur für Buttons überschreiben
        MuiButton: {
          styleOverrides: {
            root: { fontFamily: '"Tangerine", Roboto, Helvetica, Arial' },
          },
        },
        // Schrift nur für Links überschreiben
        MuiLink: {
          styleOverrides: {
            root: { fontFamily: '"Tangerine", Roboto, Helvetica, Arial' },
          },
        },
      },
    },
  );
</script>

Live-Beispiel auf jsFiddle

Buchung nur für eingeladene Kunden

Zeigt BookingJs nur, wenn der Besucher über einen persönlichen Einladungslink mit ref und invitee kommt. Die Identifikation läuft über pData gegen Ihre CRM-Plattform (z. B. onOffice).

Nur eingeladene Kundenhtml

<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  // Widget-Container ausblenden
  const hideBookingJs = () => {
    const el = document.getElementById('bookingjs');
    if (el) el.style.display = 'none';
  };

  // Parameter aus der URL lesen
  const url = new URL(window.location.href);
  const ref = url.searchParams.get('ref');
  const inviteeId = url.searchParams.get('invitee');

  // Ohne Einladungsparameter: nicht initialisieren
  if (!ref || !inviteeId) {
    hideBookingJs();
  } else {
    timum.init({
      ref: ref,
      // Kunden-ID zur Verifikation über pData übergeben
      pData: {
        platform: 'onoffice',
        personId: inviteeId,
      },
      callbacks: {
        // Ausblenden, wenn keine buchbaren Termine gefunden werden
        fetchingBookablesSucceeded: (bookables) => {
          const hasBookables = bookables && Object.values(bookables).length > 0;
          if (!hasBookables) hideBookingJs();
        },
        fetchingBookablesFailed: () => hideBookingJs(),
      },
    });
  }
</script>

Widget ausblenden, wenn keine Termine verfügbar sind

Blendet den Container aus, wenn die Terminabfrage leer ausfällt oder fehlschlägt – zum Beispiel, um stattdessen eine eigene Meldung anzuzeigen.

Ohne Termine ausblendenhtml

<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  // Widget-Container ausblenden
  const hideBookingJs = () => {
    const el = document.getElementById('bookingjs');
    if (el) el.style.display = 'none';
  };

  timum.init({
    ref: 'ihre-ressourcen-referenz',
    callbacks: {
      // Abfrage erfolgreich, aber keine Termine
      fetchingBookablesSucceeded: (bookables) => {
        const hasBookables = bookables && Object.values(bookables).length > 0;
        if (!hasBookables) hideBookingJs();
      },
      // Abfrage fehlgeschlagen (z. B. Serverfehler)
      fetchingBookablesFailed: () => hideBookingJs(),
    },
  });
</script>

Multi-Resource-Modus für die CondensedView

Zeigt überlappende Termine mehrerer Ressourcen farbcodiert nebeneinander – ideal, wenn der Termin wichtiger ist als die konkrete Ressource. Bei nur einer Ressource oder ohne Überlappungen degradiert der Modus automatisch zur Standard-Darstellung.

Multi-Resource-Modustsx

import { TimumBooking } from '@timum/booking';

<TimumBooking
  appConfig={{
    ref: ['resource-1@provider', 'resource-2@provider'],
    calendarFrontend: 'condensedView', // oder detailsCondensedView
    calendarFrontendOptions: {
      condensedView: {
        multiResourceMode: true, // Multi-Resource-Darstellung aktivieren
      },
    },
  }}
/>;

Eigenes Pflichtfeld mit Validierung und Übersetzung

Entfernt die Felder mobile und message, ergänzt ein Pflichtfeld „Geschlecht“ als Auswahlfeld und übersetzt Label und Validierungsmeldung (PRO).

Custom Field mit Validierunghtml

<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  timum.init({
    ref: 'booking-widget-demo-resource@timum',
    fields: {
      // Felder explizit auf undefined setzen, um sie zu entfernen
      message: undefined,
      mobile: undefined,
      // Auswahlfeld mit Pflicht-Validierung
      gender: {
        index: 3,
        title: 'fields.gender.title',
        type: 'select',
        validation: timum.yup.string().required('validation.gender_field_required'),
        options: [
          { key: 'm', title: 'fields.gender.male' },
          { key: 'w', title: 'fields.gender.female' },
          { key: 'd', title: 'fields.gender.other' },
        ],
      },
    },
    // Notwendig, um Custom-Field-Werte als Nachricht zu übertragen
    sendCustomValuesInMessage: true,

    localization: {
      de: {
        validation: { gender_field_required: 'Bitte wählen.' },
        fields: {
          gender: { title: 'Geschlecht', male: 'Männlich', female: 'Weiblich', other: 'Divers' },
        },
      },
      en: {
        validation: { gender_field_required: 'Please select an option.' },
        fields: {
          gender: { title: 'Gender', male: 'Male', female: 'Female', other: 'Others' },
        },
      },
    },

    callbacks: {
      // Eingegebenen Wert im Callback weiterverarbeiten
      createBookingStarted: ({ data }) => {
        console.log(data.gender);
      },
    },
  });
</script>