Recetas

Ejemplos de BookingJs listos para copiar para necesidades habituales – patrones completos que combinan varios conceptos de BookingJs y son comprobables en el navegador.

Esta página reúne ejemplos completos y copiables que combinan varios conceptos de BookingJs. Puede probar y modificar directamente en el navegador los ejemplos en directo enlazados.

Personalizar las fuentes de forma global y por componente

Define una nueva fuente predeterminada para todo el widget y fuentes propias para botones y enlaces (PRO).

Personalizar las fuentes

<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  timum.init(
    { ref: 'booking-widget-demo-resource@timum' },
    {
      typography: {
        // Fuente predeterminada para todo el widget
        fontFamily: '"Ysabeau Office", Roboto, Helvetica, Arial',
        // Orígenes de las fuentes, cargados mediante <link rel="stylesheet">
        fontSource: [
          'https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&family=Ysabeau+Office:ital,wght@0,1..1000;1,1..1000&display=swap',
        ],
      },
      components: {
        // Sobrescribir la fuente solo para los botones
        MuiButton: {
          styleOverrides: {
            root: { fontFamily: '"Tangerine", Roboto, Helvetica, Arial' },
          },
        },
        // Sobrescribir la fuente solo para los enlaces
        MuiLink: {
          styleOverrides: {
            root: { fontFamily: '"Tangerine", Roboto, Helvetica, Arial' },
          },
        },
      },
    },
  );
</script>

Ejemplo en directo en jsFiddle

Reserva solo para clientes invitados

Muestra BookingJs solo cuando el visitante llega mediante un enlace de invitación personal con ref e invitee. La identificación se realiza mediante pData frente a su plataforma CRM (p. ej. onOffice).

Solo clientes invitados

<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  // Ocultar el contenedor del widget
  const hideBookingJs = () => {
    const el = document.getElementById('bookingjs');
    if (el) el.style.display = 'none';
  };

  // Leer parámetros de la URL
  const url = new URL(window.location.href);
  const ref = url.searchParams.get('ref');
  const inviteeId = url.searchParams.get('invitee');

  // Sin parámetros de invitación: no inicializar
  if (!ref || !inviteeId) {
    hideBookingJs();
  } else {
    timum.init({
      ref: ref,
      // Transmitir el ID de cliente para verificación mediante pData
      pData: {
        platform: 'onoffice',
        personId: inviteeId,
      },
      callbacks: {
        // Ocultar si no se encuentran citas reservables
        fetchingBookablesSucceeded: (bookables) => {
          const hasBookables = bookables && Object.values(bookables).length > 0;
          if (!hasBookables) hideBookingJs();
        },
        fetchingBookablesFailed: () => hideBookingJs(),
      },
    });
  }
</script>

Ocultar el widget cuando no hay citas disponibles

Oculta el contenedor cuando la consulta de citas resulta vacía o falla – por ejemplo, para mostrar en su lugar un mensaje propio.

Ocultar sin citas

<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  // Ocultar el contenedor del widget
  const hideBookingJs = () => {
    const el = document.getElementById('bookingjs');
    if (el) el.style.display = 'none';
  };

  timum.init({
    ref: 'ihre-ressourcen-referenz',
    callbacks: {
      // Consulta exitosa, pero sin citas
      fetchingBookablesSucceeded: (bookables) => {
        const hasBookables = bookables && Object.values(bookables).length > 0;
        if (!hasBookables) hideBookingJs();
      },
      // Consulta fallida (p. ej. error del servidor)
      fetchingBookablesFailed: () => hideBookingJs(),
    },
  });
</script>

Modo multi-recurso para la CondensedView

Muestra citas superpuestas de varios recursos codificadas por color una junto a otra – ideal cuando la cita importa más que el recurso concreto. Con un solo recurso o sin solapamientos, el modo vuelve automáticamente a la vista estándar.

Modo multi-recurso

import { TimumBooking } from '@timum/booking';

<TimumBooking
  appConfig={{
    ref: ['resource-1@provider', 'resource-2@provider'],
    calendarFrontend: 'condensedView', // o detailsCondensedView
    calendarFrontendOptions: {
      condensedView: {
        multiResourceMode: true, // Activar la vista multi-recurso
      },
    },
  }}
/>;

Campo obligatorio personalizado con validación y traducción

Elimina los campos mobile y message, añade un campo obligatorio "Género" como campo de selección y traduce la etiqueta y el mensaje de validación (PRO).

Campo personalizado con validación

<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
  import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';

  timum.init({
    ref: 'booking-widget-demo-resource@timum',
    fields: {
      // Establecer los campos explícitamente en undefined para eliminarlos
      message: undefined,
      mobile: undefined,
      // Campo de selección con validación obligatoria
      gender: {
        index: 3,
        title: 'fields.gender.title',
        type: 'select',
        validation: timum.yup.string().required('validation.gender_field_required'),
        options: [
          { key: 'm', title: 'fields.gender.male' },
          { key: 'w', title: 'fields.gender.female' },
          { key: 'd', title: 'fields.gender.other' },
        ],
      },
    },
    // Necesario para transmitir los valores de campos personalizados como mensaje
    sendCustomValuesInMessage: true,

    localization: {
      de: {
        validation: { gender_field_required: 'Bitte wählen.' },
        fields: {
          gender: { title: 'Geschlecht', male: 'Männlich', female: 'Weiblich', other: 'Divers' },
        },
      },
      en: {
        validation: { gender_field_required: 'Please select an option.' },
        fields: {
          gender: { title: 'Gender', male: 'Male', female: 'Female', other: 'Others' },
        },
      },
    },

    callbacks: {
      // Procesar el valor introducido en el callback
      createBookingStarted: ({ data }) => {
        console.log(data.gender);
      },
    },
  });
</script>