Konfiguration

Alle appConfig-Optionen im Detail

Übersicht

Die appConfig-Optionen steuern direkt das Verhalten von timum und ermöglichen Ihnen, auf verschiedene Events zu reagieren.

Die drei Argumente von init()

init() akzeptiert bis zu drei Argumente in dieser Reihenfolge:

Referenzierungs-Optionen

Darstellungs-Optionen

calendarFrontend Werte

• fullCalendar - FullCalendar-Ansicht
• detailsFullCalendar - FullCalendar mit Ressourcen-Details
• pureListView - Reine Listenansicht
• detailsListView - Listenansicht mit Details
• condensedView - Kompakte Ansicht
• detailsCondensedView - Kompakte Ansicht mit Details

Verhaltens-Optionen

Kunden-Identifikation

Erweiterte Optionen

fcConfig: FullCalendar-Optionen

Wenn Sie fullCalendar oder detailsFullCalendar als calendarFrontend verwenden, konfigurieren Sie FullCalendar über das dritte init()-Argument. Zusätzlich zu den offiziellen FullCalendar-Optionen gibt es folgende BookingJs-spezifische Optionen:

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

Globale Konfiguration: window.timumBookingConfig

Zusätzlich zu den direkt an init() übergebenen Objekten liest BookingJs eine optionale globale Konfiguration von der Host-Seite: window.timumBookingConfig. Damit passen Sie BookingJs an, ohne den Einbettungscode selbst zu ändern – ideal, wenn das Snippet von einem CMS-Plugin oder Backend generiert wird, Sie aber das umgebende HTML kontrollieren.

Auflösungsreihenfolge

Konfigurationen werden in dieser Reihenfolge aufgelöst – spätere Quellen überschreiben frühere, per Deep Merge auf Schlüsselebene:

1. BookingJs-Standardwerte
2. appConfig / muiTheme / fcConfig, direkt an init() übergeben
3. window.timumBookingConfig.appConfig / .muiTheme / .fcConfig – gilt für alle Instanzen auf der Seite
4. window.timumBookingConfig[rootElId] – gilt nur für die Instanz mit passender appConfig.rootElId
5. URL-Parameter (höchste Priorität)

window.timumBookingConfig = {
  // Gilt für jede BookingJs-Instanz auf der Seite
  appConfig: { culture: 'de' },
  muiTheme: { palette: { primary: { main: '#337ab7' } } },

  // Nur für die Instanz mit dieser rootElId (z. B. ein Provider-Channel-Snippet)
  'bookingjs-dd8d32cc-b53b-4ab4-af52-41325000592b': {
    appConfig: { height: 700 },
    muiTheme: { palette: { primary: { main: '#ff5722' } } },
  },
};

Provider-Channel-Snippets gezielt konfigurieren

Jedes in der timum-Oberfläche erzeugte Snippet steht für einen Provider Channel und trägt bereits rootElId: "bookingjs-<provider-channel-uuid>" in seinem init()-Aufruf. Verwenden Sie genau diesen Schlüssel in window.timumBookingConfig, um ein einzelnes Snippet zu konfigurieren, ohne den generierten Code anzufassen.

Vollständiges Beispiel

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

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

  // Verhalten
  allowCloseOnBooking: true,
  constrainDialogsToContainer: true,
  hideTimumFooter: true,

  // Kunden-Identifikation
  pData: {
    platform: 'onoffice',
    personId: '12345'
  },

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

Verwandte Themen

• Entity-Referenzierung
• Callbacks
• Styling
• Formularfelder