Recettes
Exemples BookingJs prêts à copier pour des besoins courants – des modèles complets combinant plusieurs concepts BookingJs et testables dans le navigateur.
Cette page rassemble des exemples complets et copiables qui combinent plusieurs concepts BookingJs. Vous pouvez essayer et modifier directement dans le navigateur les exemples en direct référencés.
Personnaliser les polices globalement et par composant
Définit une nouvelle police par défaut pour l'ensemble du widget et des polices propres pour les boutons et les liens (PRO).
<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: {
// Police par défaut pour l'ensemble du widget
fontFamily: '"Ysabeau Office", Roboto, Helvetica, Arial',
// Sources de police, chargées via <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: {
// Remplacer la police uniquement pour les boutons
MuiButton: {
styleOverrides: {
root: { fontFamily: '"Tangerine", Roboto, Helvetica, Arial' },
},
},
// Remplacer la police uniquement pour les liens
MuiLink: {
styleOverrides: {
root: { fontFamily: '"Tangerine", Roboto, Helvetica, Arial' },
},
},
},
},
);
</script>Exemple en direct sur jsFiddle
Réservation uniquement pour les clients invités
Affiche BookingJs uniquement lorsque le visiteur arrive via un lien d'invitation personnel avec ref et invitee. L'identification se fait via pData auprès de votre plateforme CRM (par ex. onOffice).
<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';
// Masquer le conteneur du widget
const hideBookingJs = () => {
const el = document.getElementById('bookingjs');
if (el) el.style.display = 'none';
};
// Lire les paramètres depuis l'URL
const url = new URL(window.location.href);
const ref = url.searchParams.get('ref');
const inviteeId = url.searchParams.get('invitee');
// Sans paramètres d'invitation : ne pas initialiser
if (!ref || !inviteeId) {
hideBookingJs();
} else {
timum.init({
ref: ref,
// Transmettre l'ID client pour vérification via pData
pData: {
platform: 'onoffice',
personId: inviteeId,
},
callbacks: {
// Masquer si aucun rendez-vous réservable n'est trouvé
fetchingBookablesSucceeded: (bookables) => {
const hasBookables = bookables && Object.values(bookables).length > 0;
if (!hasBookables) hideBookingJs();
},
fetchingBookablesFailed: () => hideBookingJs(),
},
});
}
</script>Masquer le widget en l'absence de rendez-vous disponibles
Masque le conteneur lorsque la requête de rendez-vous ne renvoie rien ou échoue – par exemple pour afficher à la place votre propre message.
<div id="bookingjs" style="margin: 32px"></div>
<script type="module">
import * as timum from 'https://cdn.timum.de/bookingjs/1/booking.js';
// Masquer le conteneur du widget
const hideBookingJs = () => {
const el = document.getElementById('bookingjs');
if (el) el.style.display = 'none';
};
timum.init({
ref: 'ihre-ressourcen-referenz',
callbacks: {
// Requête réussie, mais aucun rendez-vous
fetchingBookablesSucceeded: (bookables) => {
const hasBookables = bookables && Object.values(bookables).length > 0;
if (!hasBookables) hideBookingJs();
},
// Requête échouée (par ex. erreur serveur)
fetchingBookablesFailed: () => hideBookingJs(),
},
});
</script>Mode multi-ressource pour la CondensedView
Affiche les rendez-vous qui se chevauchent de plusieurs ressources, côte à côte et en couleur – idéal lorsque le rendez-vous compte plus que la ressource précise. Avec une seule ressource ou sans chevauchement, le mode revient automatiquement à l'affichage standard.
import { TimumBooking } from '@timum/booking';
<TimumBooking
appConfig={{
ref: ['resource-1@provider', 'resource-2@provider'],
calendarFrontend: 'condensedView', // ou detailsCondensedView
calendarFrontendOptions: {
condensedView: {
multiResourceMode: true, // Activer l'affichage multi-ressource
},
},
}}
/>;Champ obligatoire personnalisé avec validation et traduction
Supprime les champs mobile et message, ajoute un champ obligatoire « Sexe » sous forme de champ de sélection et traduit le libellé et le message de validation (PRO).
<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: {
// Définir explicitement les champs sur undefined pour les supprimer
message: undefined,
mobile: undefined,
// Champ de sélection avec validation obligatoire
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' },
],
},
},
// Nécessaire pour transmettre les valeurs des champs personnalisés en tant que message
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: {
// Traiter la valeur saisie dans le callback
createBookingStarted: ({ data }) => {
console.log(data.gender);
},
},
});
</script>Exemple en direct sur jsFiddle