Configurazione

Questa pagina descrive in dettaglio tutte le opzioni appConfig di BookingJs: referenziazione, visualizzazione, comportamento, identificazione del cliente e callback.

Panoramica

Le opzioni appConfig controllano direttamente il comportamento di timum e Le consentono di reagire a diversi eventi.

I tre argomenti di init()

init() accetta fino a tre argomenti in quest'ordine:

Opzioni di referenziazione

Opzioni di visualizzazione

Valori di calendarFrontend

• fullCalendar - Vista FullCalendar
• detailsFullCalendar - FullCalendar con dettagli delle risorse
• pureListView - Vista elenco pura
• detailsListView - Vista elenco con dettagli
• condensedView - Vista compatta
• detailsCondensedView - Vista compatta con dettagli

Opzioni di comportamento

Identificazione del cliente

Opzioni avanzate

fcConfig: opzioni FullCalendar

Se utilizza fullCalendar o detailsFullCalendar come calendarFrontend, configuri FullCalendar tramite il terzo argomento di init(). Oltre alle opzioni ufficiali di FullCalendar, sono disponibili le seguenti opzioni specifiche di BookingJs:

timum.init(
  {
    ref: 'ihre-ressourcen-referenz',
    calendarFrontend: 'fullCalendar',
  },
  undefined,
  // Terzo argomento: opzioni FullCalendar
  {
    largeView: 'dayGridMonth',
    smallView: 'listWeek',
  }
);

Configurazione globale: window.timumBookingConfig

Oltre agli oggetti passati direttamente a init(), BookingJs legge una configurazione globale opzionale dalla pagina host: window.timumBookingConfig. Questo Le consente di personalizzare BookingJs senza modificare il codice di incorporamento stesso – ideale quando lo snippet viene generato da un plugin CMS o da un backend, ma Lei controlla l'HTML circostante.

Ordine di risoluzione

Le configurazioni vengono risolte in quest'ordine – le fonti successive sovrascrivono quelle precedenti, tramite un merge profondo a livello di chiave:

1. Valori predefiniti di BookingJs
2. appConfig / muiTheme / fcConfig, passati direttamente a init()
3. window.timumBookingConfig.appConfig / .muiTheme / .fcConfig – si applica a tutte le istanze nella pagina
4. window.timumBookingConfig[rootElId] – si applica solo all'istanza con l'appConfig.rootElId corrispondente
5. Parametri URL (priorità massima)

window.timumBookingConfig = {
  // Si applica a ogni istanza di BookingJs nella pagina
  appConfig: { culture: 'de' },
  muiTheme: { palette: { primary: { main: '#337ab7' } } },

  // Solo per l'istanza con questo rootElId (ad es. uno snippet di provider channel)
  'bookingjs-dd8d32cc-b53b-4ab4-af52-41325000592b': {
    appConfig: { height: 700 },
    muiTheme: { palette: { primary: { main: '#ff5722' } } },
  },
};

Configurare in modo mirato gli snippet di provider channel

Ogni snippet generato nell'interfaccia timum rappresenta un provider channel e contiene già rootElId: "bookingjs-<provider-channel-uuid>" nella sua chiamata init(). Utilizzi esattamente questa chiave in window.timumBookingConfig per configurare un singolo snippet senza modificare il codice generato.

Esempio completo

timum.init({
  // Referenziazione
  ref: 'ihre-ressourcen-referenz',
  prdRefs: ['besichtigung', 'beratung'],
  channelKey: 'RESOURCE_PUBLIC',

  // Visualizzazione
  height: '600px',
  calendarFrontend: 'detailsListView',
  culture: 'de',

  // Comportamento
  allowCloseOnBooking: true,
  constrainDialogsToContainer: true,
  hideTimumFooter: true,

  // Identificazione del cliente
  pData: {
    platform: 'onoffice',
    personId: '12345'
  },

  // Callbacks
  callbacks: {
    createBookingSuccessful: ({ timeslot, data }) => {
      console.log('Buchung erfolgreich:', timeslot);
      // Analytics, redirect, ecc.
    },
    fetchingBookablesSucceeded: ({ bookables }) => {
      console.log('Termine geladen:', bookables);
    }
  }
});

Argomenti correlati

• Referenziazione delle entità
• Callbacks
• Styling
• Campi del modulo