Customisation des "bulles" dans le calendrier de réservation

Hello la commu,

Est-il possible de modifier la couleur des bulles qui indique la disponibilitĂ© d’un article dans le calendrier des crĂ©neaux de la boutique ? Par exemple via un css dans un thĂšme dokos personnalisĂ©?
image

Par exemple sur tierslieux.dokos.io la disponibilitĂ© est indiquĂ©e par diffĂ©rentes nuances de vert + absence de couleur lorsqu’il n’y a pas de crĂ©neau. Je souhaiterais par exemple mettre les jours non disponibles en rouge.

Merci :slight_smile: ,
Antoine.

Hello @Antoine_Maas,

Le vert est la couleur par défaut de Fullcalendar.
Tu peux la remplacer en modifiant le css suivant:

.fc .fc-bg-event {
    background: rgb(143, 223, 130);
    background: var(--fc-bg-event-color, rgb(143, 223, 130));
    opacity: .3;
    opacity: var(--fc-bg-event-opacity, 0.3)
}

La nuance vient du fait que si les créneaux réservés sont affichés avec la couleur primaire du site ("orange"sur la démo par exemple). Il suffit de changer la couleur primaire (ou la variable css --primary-color) pour modifier la nuance.
Sinon il faut juste savoir que Fullcalendar superpose les créneaux disponibles/réservés les uns au dessus des autres, ce qui explique les nuances.

Pour les jours sans crĂ©neaux, je ne suis pas sĂ»r que ce soit modifiable par contre. Il faut jouer avec la DOM, mais tu n’as pas de crĂ©neaux, donc pas sĂ»r que tu puisse savoir cĂŽtĂ© css si c’est rĂ©servable ou non.
L’astuce est peut ĂȘtre de mettre une couleur par dĂ©faut sur tous les crĂ©neaux et de se servir des couleurs de crĂ©neaux rĂ©servables/rĂ©servĂ©s pour avoir des diffĂ©rences.

Bonne journée.

J’ai pas explorer comment mettre une couleur sur l’absence de crĂ©neau mais juste en augmentant l’opacitĂ© j’obtiens une grille beaucoup plus contrastĂ©e ce qui rend la lecture de la dispo des crĂ©neaux plus clair et c’est ce que je souhaitais donc c’est bon :slight_smile:

Merci !

La mise en forme du calendrier de réservation change dans Dokos 4.
Plus d’infos ici : dokos/dokos!381

2 « J'aime »