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.

Choosing the Right CSS Entry

Choose the stylesheet based on whether your app already uses Tailwind CSS:

EntryIncludesUse when
styles.cssFull bundle including Tailwind preflightYou are not using Tailwind
styles.components.cssComponent styles only, without CSS resetYou already use Tailwind
@import '@dayflow/core/dist/styles.components.css';
@import 'tailwindcss';

For theme overrides, prefer --df-color-* variables or the stable df-* semantic classes documented below.

Table of Contents


Common

Common CSS classes used across all calendar views.

Class NameDescription
df-calendar-containerOuter root container for the Sidebar and Calendar; supports --df-calendar-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-view-header-containerShared container used by the secondary view header area
df-view-header-titleShared title text class used in view-level headers
df-view-header-subtitleShared subtitle text class used in view-level headers
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-calendar-checkboxShared checkbox style used by calendar lists and related controls
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-mdStronger primary-tinted hover state
df-hover-primary-solidSolid primary hover state for filled buttons
df-hover-baseDefault hover background using DayFlow's hover token
df-hover-mutedMuted hover background
df-hover-destructiveDestructive hover state
df-text-primaryPrimary text color
df-text-mutedMuted text color
df-text-primary-fgText color for primary-filled backgrounds
df-text-secondary-fgText color for secondary-filled backgrounds
df-text-destructiveDestructive text color
df-text-destructive-fgText color for destructive-filled backgrounds
df-bg-baseBase surface background
df-bg-cardCard surface background
df-bg-sidebarSidebar-style muted background
df-bg-secondarySecondary muted background
df-bg-tertiaryTertiary background / divider surface
df-border-baseBase border
df-border-lightLighter / softer border
df-border-strongStrong border using the primary token
df-border-primaryPrimary border color
df-border-primary-softSofter primary border color
df-ring-primaryPrimary focus/selection ring color
df-ring-primary-solidSolid primary ring color
df-shadow-smSmall elevation shadow
df-shadow-mdMedium elevation shadow
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
df-focus-border-primaryPrimary border-color on :focus only

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.


Layout & Motion Helpers

These classes are useful when you want custom slot content or plugin UI to inherit DayFlow's layout and animation behavior.

Class NamePurpose
df-content-slot-stackedMakes a content slot fill available height and stack vertically
df-scrollbar-hideHides scrollbars while preserving scroll behavior
df-animate-inBase animation timing helper for entry transitions
df-fade-inFade-in animation helper
df-zoom-in-95Slight zoom-in animation helper
df-animate-slide-upSlide-up entry animation
df-animate-slide-downSlide-down exit animation

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-event-year-contentEvent content container - contains icon, title, and other content
df-event-year-titleEvent title text - use this to customize title alignment, font, etc.
df-event-icon-svgEvent icon SVG used across event renderers, including Year view
df-event-year-indicatorTimed event color indicator - the colored dot/bar for timed events
df-year-grid-monthMonth card container in grid-based Year view
df-year-fixed-day-cellDay cell in fixed-week Year view

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-bodyMini calendar body wrapper
df-mini-calendar-header-navMonth navigation row
df-mini-calendar-nav-btnPrevious / next month button
df-mini-calendar-month-labelCurrent month label
df-mini-calendar-gridThe grid container for days
df-mini-calendar-headerWeekday header cell (e.g., "Mo", "Tu")
df-mini-calendar-dayBase class for a mini calendar date button
df-mini-calendar-day-cellStyled date cell surface
df-mini-calendar-day-numberNumeric day label
df-mini-calendar-dotsEvent-dot container inside a day cell
df-mini-calendar-dotIndividual event dot

CSS classes for the sidebar component.

Class NameDescription
df-sidebarSidebar container
df-sidebar-headerSidebar header container
df-sidebar-toggleSidebar collapse/expand toggle button
df-sidebar-header-titleSidebar header title ("Calendars")
df-sidebar-list-shellScrollable wrapper around sidebar lists
df-sidebar-listCalendar list container
df-sidebar-list-itemIndividual calendar item in list
df-sidebar-rowInteractive row inside each list item
df-sidebar-chipSmall sidebar label / chip
df-sidebar-dialogSidebar modal/dialog container
df-sidebar-buttonShared sidebar button class

CSS classes for navigation buttons.

Class NameDescription
df-nav-buttonBase navigation arrow button class (prev/next)
df-calendar-nav-buttonStyled calendar navigation arrow button
df-today-buttonBase "Today" button class
df-calendar-today-buttonStyled calendar "Today" button

Event Detail

CSS classes for event detail panels and dialogs.

Class NameDescription
df-event-detail-panelFloating event detail panel
df-event-dialog-overlayEvent detail dialog overlay root
df-event-dialog-backdropEvent detail dialog backdrop
df-dialog-containerDialog content container
df-event-dialog-closeEvent detail dialog close button
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

Event State Attributes

Every calendar event element exposes a set of data-* attributes that reflect its current state. You can target these directly in CSS without adding extra classes.

AttributeValuesDescription
data-view"day" "week" "month" "year"Which view is currently rendering the event
data-all-day"true" "false"Whether the event is an all-day event
data-selected"true" "false"Whether the event is currently selected
data-dragging"true" "false"Whether the event is being dragged
data-resizing"true" "false"Whether the event is being resized
data-multi-day"true" "false"Whether the event spans multiple days
data-editable"true" "false"Whether the event can be edited
data-segment-shape"full" "start" "middle" "end"Rounded-corner shape for multi-segment events

Example

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

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 --df-color-* custom properties for colors. Override them on .df-calendar-container (and .df-portal for floating overlays) for scoped color changes:

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

Upgrading from Earlier Versions

Breaking change: calendar-event class removed

The calendar-event class has been removed from event elements. If your stylesheet targets .calendar-event { ... }, update it to .df-event { ... }.

Internal Tailwind utility classes (flex, rounded-md, shadow-sm, etc.) that were previously present on DayFlow DOM elements have also been removed. These were never part of the public API. Use the documented df-* classes and data-* attributes for all CSS customization.

On this page