Mise en forme du calendrier ?

Soutien
1

Existe-t-il un moyen simple d’ajuster les couleurs du calendrier affiché dans le plugin de calendrier ? Nous avons reçu des plaintes concernant l’accessibilité du schéma de couleurs gris clair sur blanc.

2

Il n’y a pas de paramètres pour ajuster les couleurs du calendrier, mais les couleurs peuvent être remplacées avec un peu de CSS. Je suis loin d’être une experte en CSS, mais est-ce que quelque chose comme ceci se rapproche de ce que vous recherchez ?

image
image1017×891 38.5 KB

Le seul changement que j’ai apporté est d’assombrir la bordure extérieure et les lignes utilisées pour diviser les jours du calendrier. Si c’est le genre de changement que vous recherchez, je peux trouver les bons sélecteurs CSS pour vous. (L’ajustement que j’ai fait dans cette capture d’écran a été effectué uniquement à l’aide des outils CSS de mon navigateur.)

1 « J'aime »
3

Merci ! Ce serait une grande amélioration. J’aimerais de l’aide pour trouver les bons sélecteurs.

4

Excellent ! Vous devrez modifier le fichier CSS de votre thème ou ajouter les modifications à un composant de thème, puis inclure ce composant de thème dans tous les thèmes de votre site. J’ai utilisé l’approche du composant de thème sur mon site de test. Voici une tentative de montrer ce processus avec des captures d’écran :

image
image1056×604 56.9 KB

image
image823×397 25.3 KB

image
image1073×753 62.5 KB

Assurez-vous d’ajouter le thème (ou les thèmes) de votre site à l’entrée « Inclure le composant sur ces thèmes ».

Une fois que vous avez fait cela, cliquez sur le bouton « Modifier le CSS/HTML » et ajoutez ce qui suit dans l’onglet CSS commun de l’éditeur de thème :

.discourse-calendar-wrap {
    border: 5px solid var(--primary);
}

.calendar.fc.fc-unthemed .fc-content,
.calendar.fc.fc-unthemed .fc-divider,
.calendar.fc.fc-unthemed .fc-list-heading td,
.calendar.fc.fc-unthemed .fc-list-view,
.calendar.fc.fc-unthemed .fc-popover,
.calendar.fc.fc-unthemed .fc-row,
.calendar.fc.fc-unthemed tbody,
.calendar.fc.fc-unthemed td,
.calendar.fc.fc-unthemed th,
.calendar.fc.fc-unthemed thead {
    border-color: var(--primary);
}

Ce changement définit les couleurs des bordures du calendrier sur la couleur « primaire » de votre site, la même couleur que celle utilisée pour le texte du site. En utilisant la variable --primary, le changement fonctionne avec les thèmes clairs et sombres :

image
image989×913 36.2 KB

image
image981×921 37.2 KB

Au lieu d’utiliser var(--primary) pour définir la couleur, vous pouvez coder en dur une couleur hexadécimale. Par exemple #000000 pour le noir :

.discourse-calendar-wrap {
    border: 5px solid #000000;
}

Faites-moi savoir si vous constatez des effets indésirables de ce changement. Il est possible que la deuxième règle sélectionne certains éléments que vous préféreriez laisser à l’ancienne couleur plus claire.

2 « J'aime »
5

Génial ! Merci beaucoup. J’essaierai demain.

2 « J'aime »