Styling & CustomizationCopy Anchor Link

react-modular-datepicker provides a centralized class name system with deep merging capabilities for fine-grained styling control.

Import Built-in StylesCopy Anchor Link

To use the default theme, import the compiled CSS stylesheet:

import 'react-modular-datepicker/dist/index.css';

Component Visual AnatomyCopy Anchor Link

Understanding where each class name slot applies in the DOM hierarchy makes custom styling straightforward. Below is the visual structural tree for <Calendar />:

root
 ├── header (or header + headerMultiMonth for 12-month views)
 │    ├── navButton (Previous month/year navigation arrow)
 │    ├── monthYearContainer
 │    │    └── monthYearLabel
 │    │         ├── monthYearButton (Month trigger button)
 │    │         └── monthYearButton (Year trigger button)
 │    └── navButton (Next month/year navigation arrow)
 ├── calendarsContainer
 │    └── calendarContainer (Sheet wrapper for each displayed month)
 │         ├── [Multi-month sheet header (if 1 < monthsToDisplay < 12)]
 │         │    ├── navButtonSlotStart -> navButton
 │         │    ├── headerTitleContainer
 │         │    └── navButtonSlotEnd -> navButton
 │         ├── weekdayGrid (Header row for weekday labels)
 │         │    └── weekday (Individual column header cell, e.g., "SUN")
 │         ├── daysGrid (Grid matrix container for day cells)
 │         │    └── day (Individual day cell button and state wrappers)
 │         │         ├── unselected / selected
 │         │         ├── disabled / empty
 │         │         └── rangeStart / rangeEnd / rangeBetween / rangeHovering
 │         ├── monthsGrid (Displayed when selecting month view)
 │         │    └── monthButton -> monthButtonSelected | monthButtonUnselected
 │         └── yearsGrid (Displayed when selecting year view)
 │              └── yearButton -> yearButtonSelected | yearButtonUnselected
 └── footer (Optional footer node container)

Detailed Slot Guide (CalendarClassNames)Copy Anchor Link

Every key in CalendarClassNames targets a specific DOM element:

Container SlotsCopy Anchor Link

• root: Root container <div> (.rmd-root) wrapping the entire calendar.
• calendarsContainer: Flex container (.rmd-calendars-container) wrapping one or more month sheets.
• calendarContainer: Wrapper <div> (.rmd-calendar-container) for an individual month sheet grid.
• footer: Footer container <div> (.rmd-footer) rendered at the bottom when the footer prop is provided.

Top Header & Navigation SlotsCopy Anchor Link

• header: Header container (.rmd-header) containing month/year controls and navigation arrows.
• headerMultiMonth: Additional class applied to header when displaying 12 months (yearly view).
• navButton: Navigation arrow buttons (.rmd-nav-button) for previous/next navigation.
• navButtonHidden: Class applied to navigation buttons when hidden in month/year selection views.
• monthYearContainer: Centered title container (.rmd-month-year-container).
• monthYearLabel: Label wrapper (.rmd-month-year-label) supporting slide transition animations.
• monthYearButton: Interactive buttons (.rmd-month-year-button) that trigger month or year view modes.
• navButtonSlotStart: Start slot (.rmd-nav-button-slot-start) inside individual sheet headers in multi-month views.
• navButtonSlotEnd: End slot (.rmd-nav-button-slot-end) inside individual sheet headers in multi-month views.
• headerTitleContainer: Title text container (.rmd-header-title-container) inside individual multi-month sheet headers.

Days & Weekdays ViewCopy Anchor Link

• weekdayGrid: CSS grid row (.rmd-weekday-grid) holding weekday headers.
• weekday: Individual weekday cell (.rmd-weekday) (e.g., SUN, MON).
• daysGrid: CSS grid container (.rmd-days-grid) holding day cell buttons.
• day: Nested configuration object (DayClassNames) for date cell states.

Month Selection ViewCopy Anchor Link

• monthsGrid: CSS grid container (.rmd-months-grid) displayed when selecting a month.
• monthButton: Button element (.rmd-month-button) for each month item.
• monthButtonSelected: Modifier class (.rmd-month-button-selected) applied to the currently active month.
• monthButtonUnselected: Modifier class (.rmd-month-button-unselected) applied to unselected months.

Year Selection ViewCopy Anchor Link

• yearsGrid: Scrollable grid container (.rmd-years-grid) displayed when selecting a year.
• yearButton: Button element (.rmd-year-button) for each year item.
• yearButtonSelected: Modifier class (.rmd-year-button-selected) applied to the currently active year.
• yearButtonUnselected: Modifier class (.rmd-year-button-unselected) applied to unselected years.

Detailed Day State Guide (DayClassNames)Copy Anchor Link

The day property under classNames accepts a DayClassNames object to style specific date states:

export interface DayClassNames {
  day?: string;              // Applied to every day cell button element (.rmd-day)
  selected?: string;         // Applied when date is selected (.rmd-day-selected)
  unselected?: string;       // Applied when date is selectable but not selected (.rmd-day-unselected)
  disabled?: string;         // Applied when date is disabled or outside min/max bounds (.rmd-day-disabled)
  empty?: string;            // Applied to empty leading/trailing padding cells (.rmd-day-empty)
  rangeStart?: string;       // Applied to the start date of a selected range (.rmd-day-range-start)
  rangeEnd?: string;         // Applied to the end date of a selected range (.rmd-day-range-end)
  rangeBetween?: string;     // Applied to dates inside an active selection range (.rmd-day-range-between)
  rangeHovering?: string;    // Applied to dates covered during range hover preview (.rmd-day-range-hovering)
  [key: string]: string | undefined; // Custom modifier class names (e.g., weekend, birthday, holiday)
}

Class Name Merging BehaviorCopy Anchor Link

The library automatically combines default semantic classes (rmd-*) with user-provided classNames overrides using clsx.

<Calendar
  classNames={{
    root: 'bg-stone-900 text-stone-100 p-4 rounded-xl shadow-2xl',
    monthYearLabel: 'text-amber-400 font-bold',
    day: {
      unselected: 'bg-stone-800 text-stone-200 hover:bg-amber-900/50',
      selected: 'bg-amber-500 text-stone-950 font-bold',
    },
    monthsGrid: 'grid grid-cols-3 gap-2',
    monthButtonSelected: 'bg-amber-500 text-stone-950 font-bold',
    yearsGrid: 'grid grid-cols-3 gap-2',
    yearButtonSelected: 'bg-amber-500 text-stone-950 font-bold',
  }}
/>

Customization ApproachesCopy Anchor Link

1. Class Names Override (classNames): Target individual element slots with custom Tailwind CSS or CSS classes.
2. CSS Variables: Override root theme tokens (--color-brand-gold, --color-brand-gray-light, --color-brand-gray-dark, --color-brand-text).
3. CSS Modules: Pass styles from .module.css files directly into classNames.

Check out the interactive Custom Styling Recipe for live preset themes and detailed code examples.