Configuration

Cette page décrit en détail toutes les options appConfig de BookingJs : référencement, affichage, comportement, identification du client et callbacks.

Aperçu

Les options appConfig contrôlent directement le comportement de timum et vous permettent de réagir à différents événements.

Les trois arguments de init()

init() accepte jusqu'à trois arguments dans cet ordre :

Options de référencement

Options d'affichage

Valeurs de calendarFrontend

• fullCalendar - Vue FullCalendar
• detailsFullCalendar - FullCalendar avec détails des ressources
• pureListView - Vue liste pure
• detailsListView - Vue liste avec détails
• condensedView - Vue compacte
• detailsCondensedView - Vue compacte avec détails

Options de comportement

Identification du client

Options avancées

fcConfig : options FullCalendar

Si vous utilisez fullCalendar ou detailsFullCalendar comme calendarFrontend, configurez FullCalendar via le troisième argument de init(). En plus des options officielles de FullCalendar, les options suivantes, spécifiques à BookingJs, sont disponibles :

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

Configuration globale : window.timumBookingConfig

En plus des objets transmis directement à init(), BookingJs lit une configuration globale optionnelle depuis la page hôte : window.timumBookingConfig. Cela vous permet d'adapter BookingJs sans modifier le code d'intégration lui-même – idéal lorsque le snippet est généré par un plugin CMS ou un backend, mais que vous contrôlez le HTML environnant.

Ordre de résolution

Les configurations sont résolues dans cet ordre – les sources ultérieures écrasent les précédentes, via une fusion profonde au niveau des clés :

1. Valeurs par défaut de BookingJs
2. appConfig / muiTheme / fcConfig, transmis directement à init()
3. window.timumBookingConfig.appConfig / .muiTheme / .fcConfig – s'applique à toutes les instances de la page
4. window.timumBookingConfig[rootElId] – s'applique uniquement à l'instance avec l'appConfig.rootElId correspondant
5. Paramètres d'URL (priorité la plus élevée)

window.timumBookingConfig = {
  // S'applique à chaque instance de BookingJs sur la page
  appConfig: { culture: 'de' },
  muiTheme: { palette: { primary: { main: '#337ab7' } } },

  // Uniquement pour l'instance avec ce rootElId (par ex. un snippet de provider channel)
  'bookingjs-dd8d32cc-b53b-4ab4-af52-41325000592b': {
    appConfig: { height: 700 },
    muiTheme: { palette: { primary: { main: '#ff5722' } } },
  },
};

Configurer spécifiquement les snippets de provider channel

Chaque snippet généré dans l'interface timum représente un provider channel et porte déjà rootElId: "bookingjs-<provider-channel-uuid>" dans son appel init(). Utilisez exactement cette clé dans window.timumBookingConfig pour configurer un snippet individuel sans modifier le code généré.

Exemple complet

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

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

  // Comportement
  allowCloseOnBooking: true,
  constrainDialogsToContainer: true,
  hideTimumFooter: true,

  // Identification du client
  pData: {
    platform: 'onoffice',
    personId: '12345'
  },

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

Sujets connexes

• Référencement des entités
• Callbacks
• Styling
• Champs de formulaire