Classes CSS globales

DayFlow fournit un ensemble de classes CSS préfixées df- qui permettent de personnaliser l'apparence des composants du calendrier. Elles sont pensées pour styliser facilement, sans modifier la bibliothèque.

Choisir le bon point d'entrée CSS

Choisissez la feuille de style selon que votre application utilise déjà Tailwind CSS ou non :

@import '@dayflow/core/dist/styles.components.css';
@import 'tailwindcss';

Pour surcharger le thème, privilégiez les variables --df-color-* ou les classes sémantiques stables df-* documentées ci-dessous.

Sommaire

• Classes communes
• Classes utilitaires sémantiques
• Utilitaires de mise en page et animation
• Classes de la vue Jour
• Classes de la vue Semaine
• Classes de la vue Mois
• Classes de la vue Année
• Classes du mini-calendrier
• Classes de la barre latérale
• Classes de navigation
• Classes de détail des événements
• Classes des content slots
• Attributs de statut des événements

Classes communes

Classes CSS communes, utilisées dans toutes les vues du calendrier.

Classes utilitaires sémantiques

DayFlow expose désormais un ensemble stable de classes sémantiques df-* pour les états internes : boutons sélectionnés, dates mises en évidence, actions destructives et anneaux de focus. Elles sont définies dans la CSS de base partagée et peuvent être ciblées sans risque depuis votre propre feuille de style.

Utilisez ces classes pour aligner votre contenu personnalisé, l'interface d'un plugin ou la sortie d'un content slot sur les tokens de thème de DayFlow :

Pour la thématisation, préférez ces classes ou les variables --df-color-*. Évitez de cibler d'anciennes combinaisons internes telles que bg-primary, text-primary ou hover:bg-primary/90 sur les éléments internes de DayFlow : ces noms sémantiques Tailwind ne font plus partie du contrat public de style.

Utilitaires de mise en page et animation

Ces classes sont utiles pour que le contenu de vos slots ou l'interface d'un plugin héritent du comportement de mise en page et d'animation de DayFlow.

Vue Jour

Classes CSS propres à la vue Jour.

Vue Semaine

Classes CSS propres à la vue Semaine.

Vue Mois

Classes CSS propres à la vue Mois.

Vue Année

Classes CSS propres à la vue Année. Elles sont particulièrement utiles pour personnaliser l'apparence des événements dans la vue annuelle.

Mini-calendrier

Classes CSS du composant mini-calendrier (généralement dans la barre latérale ou la vue Jour).

Barre latérale

Classes CSS du composant de barre latérale.

Navigation

Classes CSS des boutons de navigation.

Détail des événements

Classes CSS des panneaux et boîtes de dialogue de détail d'événement.

Content Slots

Classes CSS du système de rendu des content slots.

Attributs de statut des événements

DayFlow expose bien plus que de simples indicateurs d'état d'événement. Sur les événements, les grilles, les surcouches, les panneaux et les utilitaires internes de mise en page, le projet utilise actuellement les attributs data-* suivants. Beaucoup peuvent être ciblés directement en CSS ; quelques-uns servent surtout de points d'ancrage structurels à la logique de surcouche et à la détection des clics extérieurs.

Éléments d'événement

État des dates, grilles et mises en page

Contrôles, champs et recherche

État du plugin de barre latérale

Surcouches et points d'interaction

Exemple

/* Selected events */
.df-event[data-selected='true'] {
  outline: 2px solid var(--df-color-primary);
}

/* Events while being dragged */
.df-event[data-dragging='true'] {
  opacity: 0.6;
}

/* Only target month-view events */
.df-event[data-view='month'] {
  font-size: 11px;
}

/* All-day events only */
.df-event[data-all-day='true'] {
  font-weight: 600;
}

/* Highlight today's agenda section or compact grid cell */
[data-today='true'] {
  background-color: color-mix(in srgb, var(--df-color-primary) 8%, transparent);
}

Personnalisation

Pour personnaliser l'apparence, ciblez ces classes ou surchargez les variables --df-color-* dans votre CSS global. La plupart des changements de thème ne devraient pas nécessiter !important ; ne l'utilisez que pour l'emporter délibérément sur une règle locale très spécifique.

Exemple

/* Change the background of all events */
.df-event {
  border-radius: 8px !important;
}

/* Customize the current time indicator */
.df-current-time-line {
  z-index: 100;
}
.df-current-time-bar {
  height: 3px !important;
  background-color: #ef4444 !important;
}

/* Customize specific view */
.df-day-view .df-event {
  border-left: 4px solid #3b82f6;
}

/* Style the sidebar */
.df-sidebar {
  background-color: #f8fafc !important;
}

/* Style mini calendar */
.df-mini-calendar-day:hover {
  background-color: #e2e8f0;
}

/* Reuse DayFlow semantic helpers in your own slot or plugin markup */
.my-custom-primary-chip {
  background-color: var(--df-color-primary);
  color: var(--df-color-primary-foreground);
}

/* Dark mode overrides */
.dark .df-calendar {
  background-color: #111827;
}

/* Style event detail panel */
.df-event-detail-panel {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

Conseils d'utilisation

1. Spécificité : si vos styles ne s'appliquent pas, augmentez la spécificité en encadrant le calendrier dans une classe à vous :

   .my-custom-calendar .df-event { ... }

2. Design adaptatif : utilisez des media queries pour ajuster les styles sur mobile :

   @media (max-width: 768px) {
     .df-event-title {
       font-size: 10px;
     }
     .df-time-label {
       font-size: 10px;
     }
   }

3. Mode sombre : utilisez le sélecteur .dark pour les styles propres au mode sombre :

   .dark .df-month-day-cell {
     border-color: #374151;
   }

4. Variables CSS : DayFlow utilise des propriétés personnalisées --df-color-* pour les couleurs. Surchargez-les sur .df-calendar-container (et .df-portal pour les surfaces flottantes) pour des changements de couleur circonscrits :

   .df-calendar-container,
   .df-portal {
     --df-color-primary: #3b82f6;
     --df-color-primary-foreground: #ffffff;
   }

Migrer depuis les versions antérieures

Documentation associée

• Personnalisation du thème — options de thématisation avancées
• Mode sombre — configuration du mode sombre