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
• 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.

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, you can target these classes in your global CSS file. Since DayFlow uses Tailwind CSS internally, you might need to use !important or increase selector specificity if your styles are being overridden.

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