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

1

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.

2

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.

3

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 !