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:

@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 Classes
• Semantic Utility Classes
• Layout & Motion Helpers
• 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
• Event State Attributes

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.

Layout & Motion Helpers

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

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.

Event State Attributes

DayFlow exposes more than just event state flags. Across events, grids, overlays, drawers, and internal layout helpers, the current project uses the following data-* attributes. You can target many of them in CSS directly, while a few are primarily structural hooks for overlay logic and click-outside handling.

Event Elements

Date, Grid, and Layout State

Controls, Inputs, and Search

Sidebar Plugin State

Overlays and Interaction Hooks

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

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

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

Related Documentation

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