Skip to main content

​
Theme tokens

Pass a Partial<CalendarTheme> — anything you omit falls back to defaultTheme.

​
Color tokens

Every coloured surface is a token, so the visual touches below are all yours to restyle. The names are shared by both renderers — the React Native theme nests them under colors, the dom theme (DomCalendarTheme) is flat. Metric tokens cover the sizes: rangeBandHeight (the pill strip’s height; its corner radius is half this), the day-badge size/radius, and on dom cellHeight and fontFamily. See CalendarTheme / DomCalendarTheme for the exact types. The time-grid column header is fully themeable on React Native: text.dayNumber (the day number), text.columnHeaderWeekday (the weekday label; include a color to override the muted default), and the columnHeader / columnHeaderBadge containers below. Combined with onPressDateHeader, this lets an app restyle the built-in header instead of replacing it via renderTimeGridHeader.

​
Container styles (React Native)

Beyond text and colours, the React Native theme takes a containers map of ViewStyle overrides for the renderer’s container elements — the native counterpart of the web renderer’s per-slot classes. Each is merged onto the built-in style, so you set only what you need:
Available slots: The date selection in MonthList draws filled endpoint badges (selectedBackground / selectedText) and a rounded band across the span (rangeBackground, height rangeBandHeight). The band caps at the endpoint circles; pass fillCellOnSelection to fill the whole cell instead of the pill.

​
Dark mode

A ready-made darkTheme is included. Switch on the system scheme with useColorScheme():

​
Reading the theme

Inside a custom renderEvent (or any descendant), read the active theme with useCalendarTheme().

​
Tailwind & per-part classes (web)

The theme recolours everything at once. To hand a specific part of the web calendar to Tailwind or your own CSS (with data-* state variants like data-[today]:), use per-slot classNames / styles — see Styling with Tailwind & CSS.

​
Business hours

Pass businessHours to tint the closed hours on the week/day grid. It’s a function of the day, so open hours can vary and weekends can read as closed: return { start, end } (hours, fractions allowed) to shade outside that range, or null to shade the whole day. The tint is the theme’s outsideHoursBackground.

​
Per-date column styling

For shading specific dates (holidays, the selected day) across month cells and week/day columns, use calendarCellStyle — a function of the date returning a style. Unlike businessHours (which shades a time band), this tints the whole day.