Skip to main content
React Native Calendars provides a comprehensive theming system that allows you to customize colors, fonts, sizes, and even component stylesheets.

​
Basic theming

Pass a theme object to any calendar component to customize its appearance: 
<Calendar
  theme={{
    backgroundColor: '#ffffff',
    calendarBackground: '#ffffff',
    textSectionTitleColor: '#b6c1cd',
    selectedDayBackgroundColor: '#00adf5',
    selectedDayTextColor: '#ffffff',
    todayTextColor: '#00adf5',
    dayTextColor: '#2d4150',
    textDisabledColor: '#d9e1e8'
  }}
/>

​
Theme interface

The complete theme interface from the source code: 
export interface Theme {
  // Background colors
  calendarBackground?: string;
  backgroundColor?: string; // Deprecated, use calendarBackground
  
  // Text colors
  textSectionTitleColor?: string;
  textSectionTitleDisabledColor?: string;
  dayTextColor?: string;
  selectedDayTextColor?: string;
  monthTextColor?: string;
  todayTextColor?: string;
  textDisabledColor?: string;
  textInactiveColor?: string;
  
  // Day styling
  selectedDayBackgroundColor?: string;
  todayBackgroundColor?: string;
  
  // Arrow styling
  arrowColor?: string;
  disabledArrowColor?: string;
  arrowStyle?: ViewStyle;
  arrowHeight?: number;
  arrowWidth?: number;
  
  // Indicator
  indicatorColor?: string;
  
  // Dot styling
  dotColor?: string;
  selectedDotColor?: string;
  disabledDotColor?: string;
  inactiveDotColor?: string;
  todayDotColor?: string;
  dotStyle?: object;
  
  // Font families
  textDayFontFamily?: TextStyle['fontFamily'];
  textMonthFontFamily?: TextStyle['fontFamily'];
  textDayHeaderFontFamily?: TextStyle['fontFamily'];
  todayButtonFontFamily?: TextStyle['fontFamily'];
  
  // Font weights
  textDayFontWeight?: TextStyle['fontWeight'];
  textMonthFontWeight?: TextStyle['fontWeight'];
  textDayHeaderFontWeight?: TextStyle['fontWeight'];
  todayButtonFontWeight?: TextStyle['fontWeight'];
  
  // Font sizes
  textDayFontSize?: number;
  textMonthFontSize?: number;
  textDayHeaderFontSize?: number;
  todayButtonFontSize?: number;
  
  // Text styling
  textDayStyle?: TextStyle;
  
  // Today button
  todayButtonTextColor?: string;
  todayButtonPosition?: string;
  
  // Agenda
  agendaDayTextColor?: string;
  agendaDayNumColor?: string;
  agendaTodayColor?: string;
  agendaKnobColor?: string;
  
  // Timeline
  timelineContainer?: object;
  contentStyle?: ViewStyle;
  event?: object;
  eventTitle?: object;
  eventSummary?: object;
  eventTimes?: object;
  line?: object;
  verticalLine?: object;
  nowIndicatorLine?: object;
  nowIndicatorKnob?: object;
  timeLabel?: object;
  
  // Spacing
  weekVerticalMargin?: number;
  
  // Reservations
  reservationsBackgroundColor?: string;
  
  // Advanced: Custom stylesheets
  stylesheet?: {
    calendar?: {
      main?: object;
      header?: object;
    };
    day?: {
      basic?: object;
      period?: object;
    };
    dot?: object;
    marking?: object;
    'calendar-list'?: {
      main?: object;
    };
    agenda?: {
      main?: object;
      list?: object;
    };
    expandable?: {
      main?: object;
    };
  };
}

​
Theme properties

​
Colors

​
calendarBackground
string
Background color of the calendar
​
selectedDayBackgroundColor
string
Background color for selected dates
​
todayBackgroundColor
string
Background color for today’s date
​
reservationsBackgroundColor
string
Background color for the reservations section in Agenda

​
Typography

​
textDayFontFamily
string
Font family for day numbers
​
textMonthFontFamily
string
Font family for month name
​
textDayHeaderFontFamily
string
Font family for day names (Mon, Tue, etc.)
​
todayButtonFontFamily
string
Font family for the today button

​
Styling

​
textDayStyle
TextStyle
Complete text style object for day numbers
​
dotStyle
object
Style object for marking dots
​
arrowStyle
ViewStyle
Style object for navigation arrows
​
arrowHeight
number
Height of navigation arrows
​
arrowWidth
number
Width of navigation arrows
​
weekVerticalMargin
number
Vertical margin for week rows

​
Example themes

​
Dark theme

const darkTheme = {
  calendarBackground: '#1a1a1a',
  textSectionTitleColor: '#b6c1cd',
  textSectionTitleDisabledColor: '#555555',
  selectedDayBackgroundColor: '#00adf5',
  selectedDayTextColor: '#ffffff',
  todayTextColor: '#00adf5',
  dayTextColor: '#ffffff',
  textDisabledColor: '#555555',
  monthTextColor: '#ffffff',
  indicatorColor: '#00adf5',
  dotColor: '#00adf5',
  selectedDotColor: '#ffffff',
  arrowColor: '#ffffff',
  disabledArrowColor: '#555555'
};

<Calendar theme={darkTheme} />

​
Custom font theme

const customFontTheme = {
  textDayFontFamily: 'HelveticaNeue',
  textMonthFontFamily: 'HelveticaNeue',
  textDayHeaderFontFamily: 'HelveticaNeue',
  textDayFontSize: 18,
  textMonthFontSize: 16,
  textDayHeaderFontSize: 12,
  textDayFontWeight: '500',
  textMonthFontWeight: 'bold',
  textDayHeaderFontWeight: 'normal',
  textDayStyle: {
    marginTop: Platform.OS === 'android' ? 2 : 4
  }
};

<Calendar theme={customFontTheme} />

​
Colorful accent theme

const colorfulTheme = {
  calendarBackground: '#f2f7f7',
  selectedDayBackgroundColor: '#00AAAF',
  selectedDayTextColor: 'white',
  todayTextColor: '#af0078',
  dayTextColor: '#00AAAF',
  textSectionTitleColor: 'black',
  arrowColor: 'black',
  monthTextColor: 'black',
  dotColor: '#00AAAF',
  selectedDotColor: 'white',
  disabledDotColor: 'grey'
};

<Calendar theme={colorfulTheme} />

​
Advanced: Custom stylesheets

For deep customization, you can override component stylesheets: 
<Calendar
  theme={{
    stylesheet: {
      calendar: {
        header: {
          week: {
            marginTop: 30,
            marginHorizontal: 12,
            flexDirection: 'row',
            justifyContent: 'space-between'
          }
        }
      }
    }
  }}
/>

​
Available stylesheets

Customize the main calendar component:
  • main: Container styles
  • header: Header section styles
Customize day components:
  • basic: Basic day cell styles
  • period: Period marking day styles
Customize dot marking styles
Customize marking container styles
Customize the CalendarList component:
  • main: Container styles
Customize the Agenda component:
  • main: Container styles
  • list: List section styles
Customize the ExpandableCalendar component:
  • main: Container styles
Custom stylesheets override default styles completely. Make sure to include all necessary styles when using this feature.

​
Theme inheritance

Themes are passed down from parent components to child components. This means:
  • Setting a theme on CalendarProvider applies it to all nested calendar components
  • Individual components can override the inherited theme
  • You can mix global and local theme customization
<CalendarProvider theme={globalTheme}>
  <ExpandableCalendar /> {/* Uses globalTheme */}
  <WeekCalendar theme={weekTheme} /> {/* Overrides with weekTheme */}
</CalendarProvider>

​
Agenda-specific theming

The Agenda component has additional theme properties: 
<Agenda
  theme={{
    agendaDayTextColor: '#2d4150',
    agendaDayNumColor: '#2d4150',
    agendaTodayColor: '#00adf5',
    agendaKnobColor: '#00adf5',
    reservationsBackgroundColor: '#f3f3f3'
  }}
/>
​
agendaDayTextColor
string
Color for day names in the agenda
​
agendaDayNumColor
string
Color for day numbers in the agenda
​
agendaTodayColor
string
Color for today’s date in the agenda
​
agendaKnobColor
string
Color of the expandable knob

​
Timeline-specific theming

The Timeline component supports additional theme properties: 
<Timeline
  theme={{
    timelineContainer: { backgroundColor: '#f3f3f3' },
    nowIndicatorLine: { backgroundColor: 'red' },
    nowIndicatorKnob: { backgroundColor: 'red' },
    verticalLine: { backgroundColor: '#e0e0e0' }
  }}
/>

​
Best practices

Define themes as constants and reuse them across your app:
// theme.ts
export const lightTheme = { ... };
export const darkTheme = { ... };

// MyComponent.tsx
import { lightTheme } from './theme';
<Calendar theme={lightTheme} />
Apply the same theme to all calendar components in your app for a consistent look:
const theme = useCalendarTheme(); // Custom hook

<Calendar theme={theme} />
<CalendarList theme={theme} />
<Agenda theme={theme} />
Detect and apply light/dark theme based on system preferences:
import { useColorScheme } from 'react-native';

const colorScheme = useColorScheme();
const theme = colorScheme === 'dark' ? darkTheme : lightTheme;

<Calendar theme={theme} />
The backgroundColor property is deprecated. Use calendarBackground instead for better clarity.

Build docs developers (and LLMs) love

Get started for freeTalk to us