Global CSS Classes

DayFlow provides a set of CSS classes with the df- prefix that allow you to customize the appearance of calendar components. These classes are designed for easy styling customization without modifying the core library.

Table of Contents

• Common Classes
• Semantic Utility Classes
• Day View Classes
• Week View Classes
• Month View Classes
• Year View Classes
• Mini Calendar Classes
• Sidebar Classes
• Navigation Classes
• Event Detail Classes
• Content Slot Classes

Common

Common CSS classes used across all calendar views.

Semantic Utility Classes

DayFlow now exposes a stable set of df-* semantic classes for internal states such as selected buttons, highlighted dates, destructive actions, and focus rings. These are defined inside the shared foundation CSS and are safe to target from your own stylesheet.

Use these classes when you want to align custom content, plugin UI, or content-slot output with DayFlow's theme tokens:

Prefer these classes or the --df-color-* variables for theming. Avoid targeting old internal combinations such as bg-primary, text-primary, or hover:bg-primary/90 on DayFlow internals, because those Tailwind semantic names are no longer part of the public styling contract.

Day View

CSS classes specific to the Day View.

Week View

CSS classes specific to the Week View.

Month View

CSS classes specific to the Month View.

Year View

CSS classes specific to the Year View. These are particularly useful for customizing event appearance in the year overview.

Mini Calendar

CSS classes for the Mini Calendar component (usually found in the sidebar or day view).

Sidebar

CSS classes for the sidebar component.

Navigation

CSS classes for navigation buttons.

Event Detail

CSS classes for event detail panels and dialogs.

Content Slots

CSS classes used for the Content Slot rendering system.

How to Customize

To customize the appearance, target these classes or override the --df-color-* variables in your global CSS. Most theme-level changes should not need !important; use it only when you intentionally want to beat a highly specific local rule.

Example

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

Usage Tips

1. Specificity: If your styles don't apply, increase specificity by wrapping the calendar in a custom class:

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

2. Responsive Design: Use media queries to adjust styles for mobile devices:

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

3. Dark Mode: Use the .dark selector for dark mode specific styles:

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

4. CSS Variables: DayFlow uses CSS custom properties for colors. Override them for global color changes:

   :root {
     --primary: #3b82f6;
     --primary-foreground: #ffffff;
   }

Related Documentation

• Theme Customization - Advanced theming options
• Dark Mode - Dark mode configuration