Globale CSS-Klassen

DayFlow bringt eine Reihe von CSS-Klassen mit dem Präfix df- mit, über die Sie das Aussehen der Kalenderkomponenten anpassen. Sie sind dafür gedacht, bequem zu gestalten, ohne die Bibliothek selbst zu ändern.

Den richtigen CSS-Einstiegspunkt wählen

Wählen Sie das Stylesheet danach aus, ob Ihre Anwendung bereits Tailwind CSS verwendet:

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

Zum Überschreiben des Themes verwenden Sie am besten die Variablen --df-color-* oder die stabilen semantischen df-*-Klassen, die weiter unten dokumentiert sind.

Inhaltsübersicht

• Allgemeine Klassen
• Semantische Hilfsklassen
• Helfer für Layout und Animation
• Klassen der Tagesansicht
• Klassen der Wochenansicht
• Klassen der Monatsansicht
• Klassen der Jahresansicht
• Klassen des Minikalenders
• Klassen der Seitenleiste
• Klassen der Navigation
• Klassen der Termindetails
• Klassen der Content Slots
• Attribute für Terminzustände

Allgemeine Klassen

Allgemeine CSS-Klassen, die in allen Kalenderansichten verwendet werden.

Semantische Hilfsklassen

DayFlow stellt inzwischen einen stabilen Satz semantischer df-*-Klassen für interne Zustände bereit – ausgewählte Schaltflächen, hervorgehobene Daten, destruktive Aktionen und Fokusringe. Sie sind in der gemeinsamen Basis-CSS definiert und lassen sich gefahrlos aus Ihrem eigenen Stylesheet ansprechen.

Verwenden Sie diese Klassen, wenn eigene Inhalte, Plugin-Oberflächen oder die Ausgabe eines Content Slots zu den Theme-Tokens von DayFlow passen sollen:

Nutzen Sie zum Gestalten bevorzugt diese Klassen oder die --df-color-*-Variablen. Sprechen Sie an DayFlow-Interna keine alten internen Kombinationen wie bg-primary, text-primary oder hover:bg-primary/90 an – diese semantischen Tailwind-Namen gehören nicht mehr zum öffentlichen Styling-Vertrag.

Helfer für Layout und Animation

Diese Klassen sind nützlich, wenn eigene Slot-Inhalte oder Plugin-Oberflächen das Layout- und Animationsverhalten von DayFlow übernehmen sollen.

Tagesansicht

CSS-Klassen speziell für die Tagesansicht.

Wochenansicht

CSS-Klassen speziell für die Wochenansicht.

Monatsansicht

CSS-Klassen speziell für die Monatsansicht.

Jahresansicht

CSS-Klassen speziell für die Jahresansicht. Sie sind besonders nützlich, um das Aussehen der Termine in der Jahresübersicht anzupassen.

Minikalender

CSS-Klassen der Minikalender-Komponente (meist in der Seitenleiste oder der Tagesansicht).

Seitenleiste

CSS-Klassen der Seitenleisten-Komponente.

Navigation

CSS-Klassen der Navigationsschaltflächen.

Termindetails

CSS-Klassen der Panels und Dialoge für Termindetails.

Content Slots

CSS-Klassen des Rendersystems für Content Slots.

Attribute für Terminzustände

DayFlow stellt weit mehr bereit als reine Zustandsflags für Termine. In Terminen, Rastern, Overlays, Drawern und internen Layout-Helfern verwendet das Projekt derzeit die folgenden data-*-Attribute. Viele davon lassen sich direkt in CSS ansprechen, einige dienen vor allem als strukturelle Anker für die Overlay-Logik und die Erkennung von Klicks außerhalb.

Terminelemente

Zustand von Datum, Raster und Layout

Bedienelemente, Eingaben und Suche

Zustand des Seitenleisten-Plugins

Overlays und Interaktionspunkte

Beispiel

/* 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);
}

Anpassungen vornehmen

Sprechen Sie zum Anpassen des Aussehens diese Klassen an oder überschreiben Sie die --df-color-*-Variablen in Ihrem globalen CSS. Die meisten Theme-Änderungen sollten ohne !important auskommen; setzen Sie es nur ein, wenn Sie eine sehr spezifische lokale Regel bewusst übersteuern wollen.

Beispiel

/* 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;
}

Praxistipps

1. Spezifität: Greifen Ihre Styles nicht, erhöhen Sie die Spezifität, indem Sie den Kalender in eine eigene Klasse einbetten:

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

2. Responsives Design: Passen Sie Styles für Mobilgeräte über Media Queries an:

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

3. Dunkler Modus: Verwenden Sie den Selektor .dark für Styles, die nur im dunklen Modus gelten:

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

4. CSS-Variablen: DayFlow nutzt für Farben die Custom Properties --df-color-*. Überschreiben Sie sie an .df-calendar-container (und an .df-portal für schwebende Overlays), wenn Farbänderungen begrenzt bleiben sollen:

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

Umstieg von älteren Versionen

Verwandte Dokumentation

• Theme-Anpassung – fortgeschrittene Theming-Optionen
• Dunkler Modus – Konfiguration des dunklen Modus