Configuración

Esta página describe en detalle todas las opciones appConfig de BookingJs: referenciación, visualización, comportamiento, identificación del cliente y callbacks.

Resumen

Las opciones appConfig controlan directamente el comportamiento de timum y le permiten reaccionar a distintos eventos.

Los tres argumentos de init()

init() acepta hasta tres argumentos en este orden:

Opciones de referenciación

Opciones de visualización

Valores de calendarFrontend

• fullCalendar - Vista FullCalendar
• detailsFullCalendar - FullCalendar con detalles de recursos
• pureListView - Vista de lista pura
• detailsListView - Vista de lista con detalles
• condensedView - Vista compacta
• detailsCondensedView - Vista compacta con detalles

Opciones de comportamiento

Identificación del cliente

Opciones avanzadas

fcConfig: opciones de FullCalendar

Si utiliza fullCalendar o detailsFullCalendar como calendarFrontend, configure FullCalendar a través del tercer argumento de init(). Además de las opciones oficiales de FullCalendar, están disponibles las siguientes opciones específicas de BookingJs:

timum.init(
  {
    ref: 'ihre-ressourcen-referenz',
    calendarFrontend: 'fullCalendar',
  },
  undefined,
  // Tercer argumento: opciones de FullCalendar
  {
    largeView: 'dayGridMonth',
    smallView: 'listWeek',
  }
);

Configuración global: window.timumBookingConfig

Además de los objetos que se pasan directamente a init(), BookingJs lee una configuración global opcional desde la página anfitriona: window.timumBookingConfig. Esto le permite adaptar BookingJs sin modificar el propio código de inserción – ideal cuando el snippet es generado por un plugin de CMS o un backend, pero usted controla el HTML circundante.

Orden de resolución

Las configuraciones se resuelven en este orden – las fuentes posteriores sobrescriben a las anteriores, mediante una fusión profunda a nivel de clave:

1. Valores predeterminados de BookingJs
2. appConfig / muiTheme / fcConfig, pasados directamente a init()
3. window.timumBookingConfig.appConfig / .muiTheme / .fcConfig – se aplica a todas las instancias de la página
4. window.timumBookingConfig[rootElId] – se aplica únicamente a la instancia con el appConfig.rootElId correspondiente
5. Parámetros de URL (máxima prioridad)

window.timumBookingConfig = {
  // Se aplica a cada instancia de BookingJs en la página
  appConfig: { culture: 'de' },
  muiTheme: { palette: { primary: { main: '#337ab7' } } },

  // Solo para la instancia con este rootElId (p. ej., un snippet de provider channel)
  'bookingjs-dd8d32cc-b53b-4ab4-af52-41325000592b': {
    appConfig: { height: 700 },
    muiTheme: { palette: { primary: { main: '#ff5722' } } },
  },
};

Configurar snippets de provider channel de forma específica

Cada snippet generado en la interfaz de timum representa un provider channel y ya contiene rootElId: "bookingjs-<provider-channel-uuid>" en su llamada a init(). Utilice exactamente esta clave en window.timumBookingConfig para configurar un único snippet sin modificar el código generado.

Ejemplo completo

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

  // Visualización
  height: '600px',
  calendarFrontend: 'detailsListView',
  culture: 'de',

  // Comportamiento
  allowCloseOnBooking: true,
  constrainDialogsToContainer: true,
  hideTimumFooter: true,

  // Identificación del cliente
  pData: {
    platform: 'onoffice',
    personId: '12345'
  },

  // Callbacks
  callbacks: {
    createBookingSuccessful: ({ timeslot, data }) => {
      console.log('Buchung erfolgreich:', timeslot);
      // Analítica, redirección, etc.
    },
    fetchingBookablesSucceeded: ({ bookables }) => {
      console.log('Termine geladen:', bookables);
    }
  }
});

Temas relacionados

• Referenciación de entidades
• Callbacks
• Styling
• Campos de formulario