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

Common CSS classes used across all calendar views.

Class NameDescription
df-calendar-containerThe outer root container that wraps both the Sidebar and the Calendar. Supports the --df-calendar-height CSS variable to set the component height.
df-calendarMain calendar container (includes header and view content)
df-headerCalendar header section (includes title, today button, and view switcher)
df-header-leftLeft section of the header (title and navigation buttons)
df-header-midMiddle section of the header (current date range title)
df-header-rightRight section of the header (view switcher and search)
df-navigationNavigation controls container
df-eventBase class for all events
df-event-titleEvent title text
df-event-timeEvent time text
df-event-color-barColored bar on the left side of events (Day/Week view)
df-month-event-color-barColored indicator for regular events (Month view)
df-all-day-rowAll-day event row container
df-all-day-labelAll-day label text
df-all-day-contentAll-day event content area
df-all-day-cellIndividual all-day event cell
df-date-numberDate number display
df-current-time-lineCurrent time indicator line container
df-current-time-labelCurrent time label text
df-current-time-barCurrent time horizontal line
df-portalRoot scope class used by floating overlays rendered with portals
df-range-pickerRoot scope class used by the range picker popup and trigger wrapper

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:

Class NamePurpose
df-fill-primaryPrimary filled background + matching foreground text
df-fill-secondarySecondary filled background + matching foreground text
df-fill-destructiveDestructive filled background + matching foreground text
df-tint-primaryPrimary 10% tint + primary text
df-tint-primary-mdPrimary 20% tint + primary text
df-tint-primary-lgPrimary 30% tint + primary text
df-hover-primaryPrimary-tinted hover state
df-hover-primary-solidSolid primary hover state for filled buttons
df-hover-destructiveDestructive hover state
df-text-primaryPrimary text color
df-text-primary-fgText color for primary-filled backgrounds
df-text-destructiveDestructive text color
df-border-primaryPrimary border color
df-ring-primaryPrimary focus/selection ring color
df-shadow-primaryPrimary shadow color token
df-focus-ringCombined primary border-color + ring-color on :focus
df-focus-ring-onlyPrimary ring-color on :focus without changing border color

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.

Class NameDescription
df-day-viewDay view container
df-day-eventIndividual event in day view
df-day-time-gridTime grid container
df-time-columnTime column (left sidebar with hours)
df-time-slotIndividual time slot container (left column)
df-time-labelTime label text (e.g., "1 PM")
df-time-grid-rowHorizontal row in the time grid
df-time-grid-cellIndividual cell in the time grid
df-right-panelRight panel in day view (mini calendar + event list)

Week View

CSS classes specific to the Week View.

Class NameDescription
df-week-viewWeek view container
df-week-eventIndividual event in week view
df-week-headerWeek header container with day names
df-week-header-rowThe sticky header row containing day names
df-week-day-cellIndividual weekday cell in header
df-time-columnTime column (left sidebar with hours)
df-time-slotIndividual time slot container (left column)
df-time-labelTime label text
df-time-grid-rowHorizontal row in the time grid
df-time-grid-cellIndividual cell in the time grid

Month View

CSS classes specific to the Month View.

Class NameDescription
df-month-viewMonth view container
df-month-gridThe main grid container for the month view
df-month-day-cellIndividual day cell in month view
df-month-date-number-containerContainer for date number area
df-month-date-numberDate number in month view
df-month-more-events"+ x more" indicator for hidden events
df-month-titleFloating month title during scroll

Year View

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

Class NameDescription
df-year-eventEvent outer container - wraps the entire event element
df-year-event-contentEvent content container - contains icon, title, and other content
df-year-event-titleEvent title text - use this to customize title alignment, font, etc.
df-year-event-iconEvent icon container - for all-day event icons
df-year-event-indicatorTimed event color indicator - the colored dot/bar for timed events
df-year-view-weekend-headerWeekend day headers (Saturday/Sunday) in Fixed Week layout
df-year-view-weekend-cellWeekend grid cells (empty or date) in Fixed Week layout

Mini Calendar

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

Class NameDescription
df-mini-calendarMini calendar container
df-mini-calendar-gridThe grid container for days
df-mini-calendar-headerWeekday header cell (e.g., "Mo", "Tu")
df-mini-calendar-dayIndividual date cell

CSS classes for the sidebar component.

Class NameDescription
df-sidebarSidebar container
df-sidebar-headerSidebar header container
df-sidebar-header-toggleSidebar collapse/expand toggle button
df-sidebar-header-titleSidebar header title ("Calendars")
df-calendar-listCalendar list container
df-calendar-list-itemIndividual calendar item in list

CSS classes for navigation buttons.

Class NameDescription
df-nav-buttonNavigation arrow buttons (prev/next)
df-today-button"Today" button

Event Detail

CSS classes for event detail panels and dialogs.

Class NameDescription
df-event-detail-panelFloating event detail panel
df-dialog-overlayDialog background overlay
df-dialog-containerDialog content container
df-portalShared portal root class

Content Slots

CSS classes used for the Content Slot rendering system.

Class NameDescription
df-content-slotContainer for a content slot
df-slot-[id]Dynamic class assigned to a specific slot instance where [id] is a unique identifier

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

On this page