Skip to main content

Styling and classNames

Use classNames when you want to restyle the internal parts while keeping the default component tree.

How it works​

Each key in classNames maps to one internal calendar part. The value is a string of classes that gets appended to the default calendar__* class.

<Calendar
  classNames={{
    DayContent: "text-orange-600",
    DaySelection: "bg-orange-500/20",
  }}
/>

Styling with classNames

Layer your own classes onto the internal parts without replacing components.

Live example
Loading interactive preview...
const classNames = {
  CalendarContainer: "booking-demo booking-demo--sunrise",
  MonthContent: "booking-demo__month",
  MonthArrowBack: "booking-demo__arrow",
  MonthArrowNext: "booking-demo__arrow",
  WeekContent: "booking-demo__weekday",
  DayContainer: "booking-demo__day",
  DayContent: "booking-demo__day-content",
  DaySelection: "booking-demo__selection",
  DayReservation: "booking-demo__reservation",
  DayToday: "booking-demo__today",
};

<Calendar
  range
  selected={selected}
  reserved={reserved}
  classNames={classNames}
  onChange={setSelected}
/>;

Available keys​

  • CalendarContainer
  • MonthContainer
  • MonthContent
  • MonthArrowBack
  • MonthArrowNext
  • WeekContainer
  • WeekContent
  • DaysContainer
  • DayContainer
  • DayContent
  • DaySelection
  • DayReservation
  • DayToday

When to stop at classNames​

classNames is the right tool when you need:

  • visual theming
  • spacing or typography changes
  • custom hover and selection treatment
  • design-system utility classes such as Tailwind

Move to Custom Components only when the markup itself needs to change.