Configuration

This page describes all appConfig options of BookingJs in detail: referencing, display, behavior, customer identification, and callbacks.

Overview

The appConfig options directly control the behavior of timum and let you react to various events.

The three arguments of init()

init() accepts up to three arguments in this order:

Referencing options

Display options

calendarFrontend values

• fullCalendar - FullCalendar view
• detailsFullCalendar - FullCalendar with resource details
• pureListView - Pure list view
• detailsListView - List view with details
• condensedView - Condensed view
• detailsCondensedView - Condensed view with details

Behavior options

Customer identification

Advanced options

fcConfig: FullCalendar options

If you use fullCalendar or detailsFullCalendar as calendarFrontend, configure FullCalendar via the third init() argument. In addition to the official FullCalendar options, the following BookingJs-specific options are available:

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

Global configuration: window.timumBookingConfig

In addition to the objects passed directly to init(), BookingJs reads an optional global configuration from the host page: window.timumBookingConfig. This lets you customize BookingJs without changing the embed code itself – ideal when the snippet is generated by a CMS plugin or backend, but you control the surrounding HTML.

Resolution order

Configurations are resolved in this order – later sources override earlier ones, via a deep merge at the key level:

1. BookingJs default values
2. appConfig / muiTheme / fcConfig, passed directly to init()
3. window.timumBookingConfig.appConfig / .muiTheme / .fcConfig – applies to all instances on the page
4. window.timumBookingConfig[rootElId] – applies only to the instance with the matching appConfig.rootElId
5. URL parameters (highest priority)

window.timumBookingConfig = {
  // Applies to every BookingJs instance on the page
  appConfig: { culture: 'de' },
  muiTheme: { palette: { primary: { main: '#337ab7' } } },

  // Only for the instance with this rootElId (e.g. a provider channel snippet)
  'bookingjs-dd8d32cc-b53b-4ab4-af52-41325000592b': {
    appConfig: { height: 700 },
    muiTheme: { palette: { primary: { main: '#ff5722' } } },
  },
};

Configuring provider channel snippets individually

Every snippet generated in the timum interface represents a provider channel and already carries rootElId: "bookingjs-<provider-channel-uuid>" in its init() call. Use exactly this key in window.timumBookingConfig to configure a single snippet without touching the generated code.

Complete example

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

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

  // Behavior
  allowCloseOnBooking: true,
  constrainDialogsToContainer: true,
  hideTimumFooter: true,

  // Customer identification
  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);
    }
  }
});

Related topics

• Entity Referencing
• Callbacks
• Styling
• Form Fields