react-native-calendars

CalendarList is a scrollable, semi-infinite calendar composed of multiple Calendar components. It supports both vertical and horizontal scrolling. It inherits all props from the standard Calendar component, plus additional configuration for scroll range and layout.

<CalendarList
  // Callback which gets executed when visible months change in scroll view. Default = undefined
  onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
  // Max amount of months allowed to scroll to the past. Default = 50
  pastScrollRange={50}
  // Max amount of months allowed to scroll to the future. Default = 50
  futureScrollRange={50}
  // Enable or disable scrolling of calendar list
  scrollEnabled={true}
  // Enable or disable vertical scroll indicator. Default = false
  showScrollIndicator={true}
  ...calendarParams
/>

Start a local development server to preview the documentation website. This command opens a browser window and supports live reloading for most changes.

$ yarn start

The WeekCalendar component provides a weekly view of the calendar.

Important Requirement: You MUST wrap the WeekCalendar component inside a CalendarProvider component for it to function correctly.

This component extends all props available to the CalendarList component.

To switch from vertical to horizontal scrolling, set the horizontal prop to true. You can also enable pagingEnabled for a snap-to-page effect and must provide a calendarWidth to define the width of the calendar during horizontal scrolling.

<CalendarList
  // Enable horizontal scrolling, default = false
  horizontal={true}
  // Enable paging on horizontal, default = false
  pagingEnabled={true}
  // Set custom calendarWidth.
  calendarWidth={320}
  ...calendarListParams
  ...calendarParams
/>

The Agenda component provides a combined calendar and list view, allowing users to see a calendar at the top and a list of items for the selected day below. It extends props from CalendarList and FlatList.

To use it, you must provide an items object where keys are date strings (e.g., '2012-05-22') and values are arrays of objects representing the items for that day. To represent an empty date, use an empty array []. If a date key is missing entirely, the component treats it as not yet loaded.

<Agenda
  items={{
    '2012-05-22': [{name: 'item 1 - any js object'}],
    '2012-05-23': [{name: 'item 2 - any js object', height: 80}],
    '2012-05-24': [],
    '2012-05-25': [{name: 'item 3 - any js object'}, {name: 'any js object'}]
  }}
  // ... other props
/>

The ExpandableCalendar component provides an expandable calendar interface.

Important Requirements:

• This component must be wrapped with the CalendarProvider component to function correctly.
• It extends all props from the CalendarList component.

Some components render other components internally. In these cases, the testID of the internal element is a concatenation of the entire render hierarchy's IDs.

For example, if you use ExpandableCalendar with testID="myExpandableCalendar", the hierarchy is: ExpandableCalendar -> CalendarList -> Calendar -> Day.

To query a Day element within an ExpandableCalendar, the format is: ${parentTestID}.calendarList.item_${year}-${month}.day_${date_string}

Install the package using yarn. Since the library is implemented in pure JavaScript, no native module linking is required, making it compatible with Expo and standard React Native projects.

$ yarn add react-native-calendars

Generate static content for the website. The output will be placed in the build directory, which can then be served by any static hosting service.

$ yarn build