Ricette

Esempi BookingJs pronti da copiare per esigenze comuni – pattern completi che combinano più concetti BookingJs e sono testabili nel browser.

Questa pagina raccoglie esempi completi e copiabili che combinano più concetti BookingJs. Può provare e modificare direttamente nel browser gli esempi live collegati.

Personalizzare i caratteri a livello globale e per componente

Imposta un nuovo carattere predefinito per l'intero widget e caratteri propri per pulsanti e link (PRO).

Personalizzare i caratteri

<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: {
        // Carattere predefinito per l'intero widget
        fontFamily: '"Ysabeau Office", Roboto, Helvetica, Arial',
        // Fonti dei caratteri, caricate tramite <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: {
        // Sovrascrivere il carattere solo per i pulsanti
        MuiButton: {
          styleOverrides: {
            root: { fontFamily: '"Tangerine", Roboto, Helvetica, Arial' },
          },
        },
        // Sovrascrivere il carattere solo per i link
        MuiLink: {
          styleOverrides: {
            root: { fontFamily: '"Tangerine", Roboto, Helvetica, Arial' },
          },
        },
      },
    },
  );
</script>

Esempio live su jsFiddle

Prenotazione solo per clienti invitati

Mostra BookingJs solo quando il visitatore arriva tramite un link di invito personale con ref e invitee. L'identificazione avviene tramite pData verso la Sua piattaforma CRM (ad es. onOffice).

Solo clienti invitati

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

  // Nascondere il contenitore del widget
  const hideBookingJs = () => {
    const el = document.getElementById('bookingjs');
    if (el) el.style.display = 'none';
  };

  // Leggere i parametri dall'URL
  const url = new URL(window.location.href);
  const ref = url.searchParams.get('ref');
  const inviteeId = url.searchParams.get('invitee');

  // Senza parametri di invito: non inizializzare
  if (!ref || !inviteeId) {
    hideBookingJs();
  } else {
    timum.init({
      ref: ref,
      // Trasmettere l'ID cliente per la verifica tramite pData
      pData: {
        platform: 'onoffice',
        personId: inviteeId,
      },
      callbacks: {
        // Nascondere se non vengono trovati appuntamenti prenotabili
        fetchingBookablesSucceeded: (bookables) => {
          const hasBookables = bookables && Object.values(bookables).length > 0;
          if (!hasBookables) hideBookingJs();
        },
        fetchingBookablesFailed: () => hideBookingJs(),
      },
    });
  }
</script>

Nascondere il widget quando non sono disponibili appuntamenti

Nasconde il contenitore quando la richiesta di appuntamenti risulta vuota o fallisce – ad esempio per mostrare invece un messaggio personalizzato.

Nascondere senza appuntamenti

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

  // Nascondere il contenitore del widget
  const hideBookingJs = () => {
    const el = document.getElementById('bookingjs');
    if (el) el.style.display = 'none';
  };

  timum.init({
    ref: 'ihre-ressourcen-referenz',
    callbacks: {
      // Richiesta riuscita, ma nessun appuntamento
      fetchingBookablesSucceeded: (bookables) => {
        const hasBookables = bookables && Object.values(bookables).length > 0;
        if (!hasBookables) hideBookingJs();
      },
      // Richiesta fallita (ad es. errore del server)
      fetchingBookablesFailed: () => hideBookingJs(),
    },
  });
</script>

Modalità multi-risorsa per la CondensedView

Mostra appuntamenti sovrapposti di più risorse affiancati e colorati in modo distintivo – ideale quando l'appuntamento conta più della risorsa specifica. Con una sola risorsa o senza sovrapposizioni, la modalità torna automaticamente alla visualizzazione standard.

Modalità multi-risorsa

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

<TimumBooking
  appConfig={{
    ref: ['resource-1@provider', 'resource-2@provider'],
    calendarFrontend: 'condensedView', // o detailsCondensedView
    calendarFrontendOptions: {
      condensedView: {
        multiResourceMode: true, // Attivare la visualizzazione multi-risorsa
      },
    },
  }}
/>;

Campo obbligatorio personalizzato con convalida e traduzione

Rimuove i campi mobile e message, aggiunge un campo obbligatorio "Genere" come campo di selezione e traduce l'etichetta e il messaggio di convalida (PRO).

Campo personalizzato con convalida

<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: {
      // Impostare esplicitamente i campi su undefined per rimuoverli
      message: undefined,
      mobile: undefined,
      // Campo di selezione con convalida obbligatoria
      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' },
        ],
      },
    },
    // Necessario per trasmettere i valori dei campi personalizzati come messaggio
    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: {
      // Elaborare ulteriormente il valore inserito nel callback
      createBookingStarted: ({ data }) => {
        console.log(data.gender);
      },
    },
  });
</script>