Skip to main content
The CalendarProvider component wraps your calendar components and provides shared state management through React Context. It handles date selection, month changes, and coordinates updates between multiple calendar components like ExpandableCalendar, WeekCalendar, and AgendaList.

​
Import

import { CalendarProvider } from 'react-native-calendars';

​
Basic usage

import React from 'react';
import { CalendarProvider, ExpandableCalendar, AgendaList } from 'react-native-calendars';

const MyCalendar = () => {
  return (
    <CalendarProvider date="2024-03-15">
      <ExpandableCalendar />
      <AgendaList />
    </CalendarProvider>
  );
};

​
Props

​
date
string
required
Initial date in ‘yyyy-MM-dd’ format. This is the starting date for the calendar.
<CalendarProvider date="2024-03-15">
​
onDateChanged
(date: string, updateSource: UpdateSources) => void
Callback fired when the selected date changes. Receives the new date string and the source of the update.
<CalendarProvider
  date="2024-03-15"
  onDateChanged={(date, source) => {
    console.log('Date changed to:', date);
    console.log('Update source:', source);
  }}
>
​
onMonthChange
(date: DateData, updateSource: UpdateSources) => void
Callback fired when the visible month changes. Receives date data object and the source of the update.
<CalendarProvider
  date="2024-03-15"
  onMonthChange={(dateData, source) => {
    console.log('Month changed to:', dateData.month, dateData.year);
  }}
>
​
theme
Theme
Theme object to override specific styles for calendar components. See the Theme documentation for all available options.
<CalendarProvider
  date="2024-03-15"
  theme={{
    todayButtonTextColor: '#4A90E2',
    selectedDayBackgroundColor: '#4A90E2',
    dotColor: '#4A90E2',
  }}
>
​
style
StyleProp<ViewStyle>
Custom style for the calendar container element.
<CalendarProvider
  date="2024-03-15"
  style={{ backgroundColor: '#f5f5f5' }}
>
​
disableAutoDaySelection
CalendarNavigationTypes[]
Array of navigation types for which to disable automatic day selection. This allows users to scroll through months without changing the selected date.Available options:
  • 'listDrag' - When scrolling the agenda list
  • 'pageScroll' - When scrolling between months
  • 'weekScroll' - When scrolling between weeks
  • 'arrowPress' - When pressing month arrows
  • 'weekArrowPress' - When pressing week arrows
  • 'todayPress' - When pressing the today button
<CalendarProvider
  date="2024-03-15"
  disableAutoDaySelection={['listDrag', 'pageScroll']}
>
​
showTodayButton
boolean
default:"false"
Whether to show the floating “Today” button that jumps to the current date.
<CalendarProvider date="2024-03-15" showTodayButton>
​
todayBottomMargin
number
Bottom margin for the today button positioning in pixels.
<CalendarProvider
  date="2024-03-15"
  showTodayButton
  todayBottomMargin={20}
>
​
todayButtonStyle
ViewStyle
Custom style object for the today button.
<CalendarProvider
  date="2024-03-15"
  showTodayButton
  todayButtonStyle={{
    backgroundColor: '#4A90E2',
    borderRadius: 20,
  }}
>
​
disabledOpacity
number
Opacity value (0-1) for the today button when it’s disabled (already showing today).
<CalendarProvider
  date="2024-03-15"
  showTodayButton
  disabledOpacity={0.3}
>
​
numberOfDays
number
Number of days to display in timeline calendar mode. Used with Timeline and WeekCalendar components.
<CalendarProvider date="2024-03-15" numberOfDays={7}>
  <WeekCalendar />
  <Timeline />
</CalendarProvider>
​
timelineLeftInset
number
default:"72"
Left inset width for the timeline calendar (sidebar width) in pixels.
<CalendarProvider
  date="2024-03-15"
  numberOfDays={7}
  timelineLeftInset={80}
>

​
Update sources

The onDateChanged and onMonthChange callbacks receive an updateSource parameter that indicates what triggered the update:
​
CALENDAR_INIT
string
Initial calendar setup
​
PROP_UPDATE
string
Date prop changed from parent
​
TODAY_PRESS
string
Today button was pressed
​
DAY_PRESS
string
A day was pressed in the calendar
​
ARROW_PRESS
string
Month arrow was pressed
​
WEEK_ARROW_PRESS
string
Week arrow was pressed
​
LIST_DRAG
string
Agenda list was scrolled
​
PAGE_SCROLL
string
Calendar month was scrolled
​
WEEK_SCROLL
string
Week calendar was scrolled

​
Advanced example

import React, { useState } from 'react';
import {
  CalendarProvider,
  ExpandableCalendar,
  AgendaList,
} from 'react-native-calendars';

const AdvancedCalendar = () => {
  const [currentDate, setCurrentDate] = useState('2024-03-15');

  const handleDateChange = (date, source) => {
    console.log('Date changed:', date, 'from', source);
    setCurrentDate(date);
  };

  const handleMonthChange = (dateData, source) => {
    console.log('Month changed:', dateData.month, dateData.year);
  };

  return (
    <CalendarProvider
      date={currentDate}
      onDateChanged={handleDateChange}
      onMonthChange={handleMonthChange}
      showTodayButton
      disableAutoDaySelection={['listDrag']}
      theme={{
        todayButtonTextColor: '#4A90E2',
        selectedDayBackgroundColor: '#4A90E2',
      }}
    >
      <ExpandableCalendar
        firstDay={1}
        markedDates={{
          [currentDate]: { selected: true },
        }}
      />
      <AgendaList
        sections={/* your agenda data */}
      />
    </CalendarProvider>
  );
};

Build docs developers (and LLMs) love

Get started for freeTalk to us