react-native-calendars Documentation

React Native Calendar Components 🗓️ 📆

10,327 stars TypeScript TypeScript 12 files · ~11,658 tokens #android#calendar#hacktoberfest#ios#react-native#ui-components
RAW Doc

Technical Documentation: wix/react-native-calendars

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`)

React Native Calendars 🗓️ 📆

A declarative cross-platform React Native calendar component for iOS and Android.


This module includes information on how to use this customizable React Native calendar component.

The package is compatible with both Android and iOS

**Official documentation**

This README provides basic examples of how to get started with react-native-calendars. For detailed information, refer to the official documentation site.

Features ✨

  • Pure JS. No Native code required
  • Date marking - dot, multi-dot, period, multi-period and custom marking
  • Customization of style, content (days, months, etc) and dates
  • Detailed documentation and examples
  • Swipeable calendar with flexible custom rendering
  • Scrolling to today, selecting dates, and more
  • Allowing or blocking certain dates
  • Accessibility support
  • Automatic date formatting for different locales

Try it out ⚡

You can run a sample module using these steps:

text
$ git clone [email protected]:wix/react-native-calendars.git

$ cd react-native-calendars

$ yarn install

$ cd ios && pod install && cd ..

$ react-native run-ios

You can check example screens source code in example module screens

This project is compatible with Expo/CRNA (without ejecting), and the examples have been published on Expo

Getting Started 🔧

Here's how to get started with react-native-calendars in your React Native project:

Install the package:

text
$ yarn add react-native-calendars

RN Calendars is implemented in JavaScript, so no native module linking is required.

Usage 🚀

Basic usage examples of the library

**For detailed information on using this component, see the [official documentation site](https://wix.github.io/react-native-calendars/docs/Intro)**

Importing the `Calendar` component

javascript
import {Calendar, CalendarList, Agenda} from 'react-native-calendars';

Use the `Calendar` component in your app:

javascript
<Calendar
  onDayPress={day => {
    console.log('selected day', day);
  }}
/>

Some Code Examples

Here are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:

Creating a basic calendar with default settings:

javascript
import React, {useState} from 'react';
import {Calendar, LocaleConfig} from 'react-native-calendars';

const App = () => {
  const [selected, setSelected] = useState('');

  return (
    <Calendar
      onDayPress={day => {
        setSelected(day.dateString);
      }}
      markedDates={{
        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
      }}
    />
  );
};

export default App;

Customize the appearance of the calendar:

javascript
<Calendar
  // Customize the appearance of the calendar
  style={{
    borderWidth: 1,
    borderColor: 'gray',
    height: 350
  }}
  // Specify the current date
  current={'2012-03-01'}
  // Callback that gets called when the user selects a day
  onDayPress={day => {
    console.log('selected day', day);
  }}
  // Mark specific dates as marked
  markedDates={{
    '2012-03-01': {selected: true, marked: true, selectedColor: 'blue'},
    '2012-03-02': {marked: true},
    '2012-03-03': {selected: true, marked: true, selectedColor: 'blue'}
  }}
/>

Configuring the locale:

javascript
import {LocaleConfig} from 'react-native-calendars';
import React, {useState} from 'react';
import {Calendar, LocaleConfig} from 'react-native-calendars';

LocaleConfig.locales['fr'] = {
  monthNames: [
    'Janvier',
    'Février',
    'Mars',
    'Avril',
    'Mai',
    'Juin',
    'Juillet',
    'Août',
    'Septembre',
    'Octobre',
    'Novembre',
    'Décembre'
  ],
  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  today: "Aujourd'hui"
};

LocaleConfig.defaultLocale = 'fr';

const App = () => {
  const [selected, setSelected] = useState('');

  return (
    <Calendar
      onDayPress={day => {
        setSelected(day.dateString);
      }}
      markedDates={{
        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
      }}
    />
  );
};

export default App;

Adding a global theme to the calendar:

javascript
<Calendar
      style={{
        borderWidth: 1,
        borderColor: 'gray',
        height: 350,
      }}
      theme={{
        backgroundColor: '#ffffff',
        calendarBackground: '#ffffff',
        textSectionTitleColor: '#b6c1cd',
        selectedDayBackgroundColor: '#00adf5',
        selectedDayTextColor: '#ffffff',
        todayTextColor: '#00adf5',
        dayTextColor: '#2d4150',
        textDisabledColor: '#dd99ee'
      }}
    />

Customized Calendar Examples

Calendar

Dot marking

Multi-Dot marking

Period Marking

Multi-Period marking

Custom marking

Date loading indicator

Scrollable semi-infinite calendar

Horizontal calendar

Agenda

Authors

See also the list of contributors who participated in this project.

Contributing

We welcome contributions to react-native-calendars.

If you have an idea for a new feature or have discovered a bug, please open an issue.

Please yarn test and yarn lint before pushing changes.

Don't forget to add a title and a description explaining the issue you're trying to solve and your proposed solution.

Screenshots and Gifs are VERY helpful to add to the PR for reviews.

Please DO NOT format the files - we're trying to keep a unified syntax and keep the reviewing process fast and simple.

License

React Native Calendars is MIT licensed

Overview (`docsRNC/README.md`)

Website

This website is built using Docusaurus 2, a modern static website generator.

Installation

text
$ yarn

Local Development

text
$ yarn start

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

Build

text
$ yarn build

This command generates static content into the build directory and can be served using any static contents hosting service.

Deployment

Using SSH:

text
$ USE_SSH=true yarn deploy

Not using SSH:

text
$ GIT_USER=<Your GitHub username> yarn deploy

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.

DocsRNC Docs Intro (`docsRNC/docs/intro.md`)

React Native Calendars 🗓️ 📆

A declarative cross-platform React Native calendar component for iOS and Android.


This module includes information on how to use this customizable React Native calendar component.

The package is compatible with both Android and iOS

Features ✨

  • Pure JS. No Native code required
  • Date marking - dot, multi-dot, period, multi-period and custom marking
  • Customization of style, content (days, months, etc) and dates
  • Detailed documentation and examples
  • Swipeable calendar with flexible custom rendering
  • Scrolling to today, selecting dates, and more
  • Allowing or blocking certain dates
  • Accessibility support
  • Automatic date formatting for different locales

Try it out ⚡

You can run a sample module using these steps:

text
$ git clone [email protected]:wix/react-native-calendars.git

$ cd react-native-calendars

$ npm install

$ cd ios && pod install && cd ..

$ react-native run-ios

You can check example screens source code in example module screens

This project is compatible with Expo/CRNA (without ejecting), and the examples have been published on Expo

Getting Started 🔧

Here's how to get started with react-native-calendars in your React Native project:

Install the package:

Using npm:

text
$ npm install --save react-native-calendars

Using Yarn:

text
$ yarn add react-native-calendars

RN Calendars is implemented in JavaScript, so no native module linking is required.

Usage Example

import {[Calendar](#calendar), [CalendarList](#calendarlist), [Agenda](#agenda)} from 'react-native-calendars';

All parameters for components are optional. By default the month of current local date will be displayed.

Event handler callbacks are called with calendar objects like this:

javascript
{
  day: 1,      // day of month (1-31)
  month: 1,    // month of year (1-12)
  year: 2017,  // year
  timestamp,   // UTC timestamp representing 00:00 AM of this date
  dateString: '2016-05-13' // date formatted as 'YYYY-MM-DD' string
}

Parameters that require date types accept YYYY-MM-DD formatted date-strings, JavaScript date objects, calendar objects and UTC timestamps.

Calendars can be localized by adding custom locales to LocaleConfig object:

javascript
import {LocaleConfig} from 'react-native-calendars';

LocaleConfig.locales['fr'] = {
  monthNames: [
    'Janvier',
    'Février',
    'Mars',
    'Avril',
    'Mai',
    'Juin',
    'Juillet',
    'Août',
    'Septembre',
    'Octobre',
    'Novembre',
    'Décembre'
  ],
  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  today: "Aujourd'hui"
};
LocaleConfig.defaultLocale = 'fr';

Authors

See also the list of contributors who participated in this project.

Contributing

Pull requests are most welcome!
Please npm run test and npm run lint before push.
Don't forget to add a title and a description that explain the issue you're trying to solve and your suggested solution.
Screenshots and gifs are VERY helpful.
Please do NOT format the files as we are trying to keep a unified syntax and the reviewing process fast and simple.

License

React Native Calendars is MIT licensed

DocsRNC Docs Testing (`docsRNC/docs/testing.md`)

Testing Calendars

Each component receives a testID as a prop and pass to internal elements by concatenating the testID with the element type/data.

For instance, The Calendar component will concatenate a given testID to each Day element it renders with its date.
So each Day element's testID will be in the following format ${testID}.day_${date_string}.

For example, if you'll pass to Calendar a testID called myCalendar, the day element representing the 2022-08-21 will have myCalendar.day_2022-08-21 as testID.

Follow the components testIDs guidelines to learn how to query them in your tests

Calendar

Element Format Example
Main Container ${testID} myCalendar
Day ${testID}.day_${date_string} myCalendar.day_2022-08-21, myCalendar.day_2022-07-15
Header ${testID}.header myCalendar.header
Week Numbers ${testID}.weekNumber_${weekNumber}} myCalendar.weekNumber_27

CalendarList

Element Format Example
Main Container ${testID} myCalendarList
Calendar Item ${testID}.item_${year}-{month}} myCalendarList.item_2022-07
Static Header ${testID}.staticHeader} myCalendarList.staticHeader
Element Format Example
Main Container ${testID} myCalendarHeader
Header Title ${testID}.title myCalendarHeader.title
Day Names ${testID}.dayNames myCalendarHeader.dayNames
Left Arrow ${testID}.leftArrow myCalendarHeader.leftArrow
Right Arrow ${testID}.rightArrow myCalendarHeader.rightArrow
Loader ${testID}.loader myCalendarHeader.loader

ExpandableCalendar

Element Format Example
Main Container ${testID} myExpandableCalendar
Left Arrow ${testID}.leftArrow myExpandableCalendar.leftArrow
Right Arrow ${testID}.rightArrow myExpandableCalendar.rightArrow
Knob ${testID}.knob myExpandableCalendar.knob
Expandable Container ${testID}.expandableContainer myExpandableCalendar.expandableContainer
Week Calendar ${testID}.weekCalendar myExpandableCalendar.weekCalendar
Calendar List ${testID}.calendarList myExpandableCalendar.calendarList

WeekCalendar

Element Format Example
Main Container ${testID} myWeekCalendar
Day ${testID}.day_${date_string} myWeekCalendar.day_2022-08-21

Notes

Some components render others as internal components and their testIDs are based on the main parent id.
For instance, if you'll pass myExpandableCalendar to ExpandableCalendar testID.
In order to query a Day element, you'll need to go though all the render hierarchy's testIDs.

In this case. ExpandableCalendar -> CalendarList -> Calendar -> Day.
And the testID for the Day element will be myExpandableCalendar.calendarList.item_${year}-${month}.day_${date_string}.

DocsRNC Docs Components Agenda (`docsRNC/docs/Components/Agenda.md`)

Agenda component
(code example)
:::info
This component extends CalendarList, FlatList props.
:::

API

items

the list of items that have to be displayed in agenda. If you want to render item as empty date the value of date key has to be an empty array []. If there exists no value for date key it is considered that the date in question is not yet loaded
AgendaSchedule

loadItemsForMonth

Handler which gets executed when items for a certain month should be loaded (month became visible)
(data: DateData) => void

onDayChange

Handler which gets executed when day changes while scrolling agenda list
(data: DateData) => void

onCalendarToggled

Handler which gets executed when the calendar is opened or closed
(enabled: boolean) => void

selected

initially selected day
string

renderKnob

Replace default agenda's knob with a custom one
() => JSX.Element

hideKnob

Whether to hide the knob
boolean

showClosingKnob

Whether the knob should always be visible (when hideKnob = false)
boolean

showOnlySelectedDayItems

Whether to show items only for the selected date
boolean

renderEmptyData

Replace default ActivityIndicator with a custom one
() => JSX.Element

Agenda Examples

text
/* Detailed source-code truncated for AI context efficiency. */

DocsRNC Docs Components AgendaList (`docsRNC/docs/Components/AgendaList.md`)

Agenda list component for the ExpandableCalendar component.
(code example)
:::info
This component extends FlatList props.
:::
NOTE: This component should be wrapped with CalendarProvider component.

API

theme

Specify theme properties to override specific styles for calendar parts
Theme

dayFormat

Day format in section title. Formatting values: http://arshaw.com/xdate/#Formatting
string

dayFormatter

A function to custom format the section header's title
(arg0: string) => string

useMoment

Whether to use moment.js for date string formatting
boolean

markToday

Whether to mark today's title with the 'Today, ...' string
boolean

avoidDateUpdates

Whether to block the date change in calendar (and calendar context provider) when agenda scrolls
boolean

scrollToNextEvent

Whether to enable scrolling the agenda list to the next date with content when pressing a day without content
boolean

viewOffset

Offset scroll to the section
number

sectionStyle

The style passed to the section view
ViewStyle

DocsRNC Docs Components Calendar (`docsRNC/docs/Components/Calendar.md`)

Calendar component
(code example)
:::info
This component extends CalendarHeader, BasicDay props.
:::

API

theme

Specify theme properties to override specific styles for calendar parts
Theme

style

Specify style for calendar container element
ViewStyle

headerStyle

Specify style for calendar header
ViewStyle

customHeader

Allow rendering a totally custom header
any

initialDate

Initially visible month
string

minDate

Minimum date that can be selected, dates before minDate will be grayed out
string

maxDate

Maximum date that can be selected, dates after maxDate will be grayed out
string

firstDay

If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday
number

markedDates

Collection of dates that have to be marked
MarkedDatesType

displayLoadingIndicator

Whether to display loading indicator
boolean

showWeekNumbers

Whether to show weeks numbers
boolean

hideExtraDays

Whether to hide days of other months in the month page
boolean

showSixWeeks

Whether to always show six weeks on each month (when hideExtraDays = false)
boolean

disableMonthChange

Whether to disable changing month when click on days of other months (when hideExtraDays is false)
boolean

enableSwipeMonths

Whether to enable the option to swipe between months
boolean

disabledByDefault

Whether to disable days by default
boolean

allowSelectionOutOfRange

Whether to allow selection of dates before minDate or after maxDate
boolean

onDayPress

Handler which gets executed on day press
(date: DateData) => void

onDayLongPress

Handler which gets executed on day long press
(date: DateData) => void

onMonthChange

Handler which gets executed when month changes in calendar
(date: DateData) => void

onVisibleMonthsChange

Handler which gets executed when visible month changes in calendar
(months: DateData[]) => void

monthFormat

Month format for the header's title. Formatting values: http://arshaw.com/xdate/#Formatting
string

hideDayNames

Whether to hide the days names
boolean

hideArrows

Whether to hide the arrows
boolean

arrowsHitSlop

Left & Right arrows. Additional distance outside of the buttons in which a press is detected, default: 20
null | Insets | number

disableArrowLeft

Whether to disable the left arrow
boolean

disableArrowRight

Whether to disable the right arrow
boolean

renderArrow

Replace default arrows with custom ones (direction: 'left' | 'right')
(direction: Direction) => ReactNode

onPressArrowLeft

Handler which gets executed when press left arrow. It receive a callback to go to the previous month
(method: () => void, month?: string) => void

onPressArrowRight

Handler which gets executed when press right arrow. It receive a callback to go to the next month
(method: () => void, month?: string) => void

disabledDaysIndexes

Whether to apply custom disable color to selected day names indexes
number[]

renderHeader

Replace default title with custom one
(date?: string) => ReactNode

customHeaderTitle

Replace default title with custom element
JSX.Element

dayComponent

Replace default day with custom day rendering component
JSX.Element

disableAllTouchEventsForDisabledDays

Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates')
boolean

disableAllTouchEventsForInactiveDays

Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates')
boolean

Calendar Examples

Basic parameters

text
/* Detailed source-code truncated for AI context efficiency. */

Date marking

Disclaimer: Make sure that markedDates param is immutable. If you change markedDates object content but the reference to it does not change calendar update will not be triggered.

  • Dot marking
javascript
<Calendar
  // Collection of dates that have to be marked. Default = {}
  markedDates={{
    '2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},
    '2012-05-17': {marked: true},
    '2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},
    '2012-05-19': {disabled: true, disableTouchEvent: true}
  }}
/>

You can customize a dot color for each day independently.

  • Multi-Dot marking

Use markingType={'multi-dot'} if you want to display more than one dot. Both the <Calendar/> and <CalendarList/> support multiple dots by using dots array in markedDates prop.
The property color is mandatory while key and selectedColor are optional. If key is omitted then the array index is used as key. If selectedColor is omitted then color will be used for selected dates.

javascript
const vacation = {key: 'vacation', color: 'red', selectedDotColor: 'blue'};
const massage = {key: 'massage', color: 'blue', selectedDotColor: 'blue'};
const workout = {key: 'workout', color: 'green'};

<Calendar
  markingType={'multi-dot'}
  markedDates={{
    '2017-10-25': {dots: [vacation, massage, workout], selected: true, selectedColor: 'red'},
    '2017-10-26': {dots: [massage, workout], disabled: true}
  }}
/>;
  • Period marking
javascript
<Calendar
  markingType={'period'}
  markedDates={{
    '2012-05-20': {textColor: 'green'},
    '2012-05-22': {startingDay: true, color: 'green'},
    '2012-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
    '2012-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
  }}
/>
  • Multi-period marking

CAUTION: This marking is only fully supported by the <Calendar/> component because it expands its height. Usage with <CalendarList/> might lead to overflow issues.

javascript
<Calendar
  markingType="multi-period"
  markedDates={{
    '2017-12-14': {
      periods: [
        {startingDay: false, endingDay: true, color: '#5f9ea0'},
        {startingDay: false, endingDay: true, color: '#ffa500'},
        {startingDay: true, endingDay: false, color: '#f0e68c'}
      ]
    },
    '2017-12-15': {
      periods: [
        {startingDay: true, endingDay: false, color: '#ffa500'},
        {color: 'transparent'},
        {startingDay: false, endingDay: false, color: '#f0e68c'}
      ]
    }
  }}
/>
  • Custom marking (allows you to customize each marker with custom styles)
javascript
<Calendar
  markingType={'custom'}
  markedDates={{
    '2018-03-28': {
      customStyles: {
        container: {
          backgroundColor: 'green'
        },
        text: {
          color: 'black',
          fontWeight: 'bold'
        }
      }
    },
    '2018-03-29': {
      customStyles: {
        container: {
          backgroundColor: 'white',
          elevation: 2
        },
        text: {
          color: 'blue'
        }
      }
    }
  }}
/>

NEW! While we still don't support multi marking type, we add the possibility to combine between period and dot.

javascript
<Calendar
  markingType={'period'}
  markedDates={{
    '2012-05-15': {marked: true, dotColor: '#50cebb'},
    '2012-05-16': {marked: true, dotColor: '#50cebb'},
    '2012-05-21': {startingDay: true, color: '#50cebb', textColor: 'white'},
    '2012-05-22': {color: '#70d7c7', textColor: 'white'},
    '2012-05-23': {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},
    '2012-05-24': {color: '#70d7c7', textColor: 'white'},
    '2012-05-25': {endingDay: true, color: '#50cebb', textColor: 'white'}
  }}
/>

Keep in mind that different marking types are not compatible. You can use just one marking style for a calendar.

Displaying data loading indicator

The loading indicator next to the month name will be displayed if <Calendar/> has displayLoadingIndicator prop and the markedDates collection does not have a value for every day of the month in question. When you load data for days, just set [] or special marking value to all days in markedDates collection.

Customizing look & feel

javascript
<Calendar
  // Specify style for calendar container element. Default = {}
  style={{
    borderWidth: 1,
    borderColor: 'gray',
    height: 350
  }}
  // Specify theme properties to override specific styles for calendar parts. Default = {}
  theme={{
    backgroundColor: '#ffffff',
    calendarBackground: '#ffffff',
    textSectionTitleColor: '#b6c1cd',
    textSectionTitleDisabledColor: '#d9e1e8',
    selectedDayBackgroundColor: '#00adf5',
    selectedDayTextColor: '#ffffff',
    todayTextColor: '#00adf5',
    dayTextColor: '#2d4150',
    textDisabledColor: '#d9e1e8',
    dotColor: '#00adf5',
    selectedDotColor: '#ffffff',
    arrowColor: 'orange',
    disabledArrowColor: '#d9e1e8',
    monthTextColor: 'blue',
    indicatorColor: 'blue',
    textDayFontFamily: 'monospace',
    textMonthFontFamily: 'monospace',
    textDayHeaderFontFamily: 'monospace',
    textDayFontWeight: '300',
    textMonthFontWeight: 'bold',
    textDayHeaderFontWeight: '300',
    textDayFontSize: 16,
    textMonthFontSize: 16,
    textDayHeaderFontSize: 16
  }}
/>

Customize days titles with disabled styling

javascript
<Calendar
  theme={{
    textSectionTitleDisabledColor: '#d9e1e8'
  }}
  markedDates={{
    ...this.getDisabledDates('2012-05-01', '2012-05-30', [0, 6])
  }}
  disabledDaysIndexes={[0, 6]}
/>

Advanced styling

If you want to have complete control over the calendar styles you can do it by overriding default style.ts files. For example, if you want to override <CalendarHeader/> style first you have to find stylesheet id for this file:

https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style.ts#L60

In this case it is stylesheet.calendar.header. Next you can add overriding stylesheet to your theme with this id.

https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.tsx#L142

javascript
theme={{
  arrowColor: 'white',
  'stylesheet.calendar.header': {
    week: {
      marginTop: 5,
      flexDirection: 'row',
      justifyContent: 'space-between'
    }
  }
}}

Individual day header styling

Using the above advanced styling, it is possible to set styles independently for each day's header. If we wanted to make the header for Sunday red, and Saturday blue, we could write something like the following:

javascript
theme={{
  'stylesheet.calendar.header': {
    dayTextAtIndex0: {
      color: 'red'
    },
    dayTextAtIndex6: {
      color: 'blue'
    }
  }
}}

Disclaimer: Issues that arise because something breaks after using stylesheet override will not be supported. Use this option at your own risk.

Overriding day component

If you need custom functionality not supported by current day component implementations you can pass your own custom day component to the calendar.

javascript
<Calendar
  style={[styles.calendar, {height: 300}]}
  dayComponent={({date, state}) => {
    return (
      <View>
        <Text style={{textAlign: 'center', color: state === 'disabled' ? 'gray' : 'black'}}>{date.day}</Text>
      </View>
    );
  }}
/>

The dayComponent prop has to receive a RN component or a function that receive props. The dayComponent will receive such props:

  • state - disabled if the day should be disabled (this is decided by base calendar component).
  • marking - markedDates value for this day.
  • date - the date object representing this day.

Tip: Don't forget to implement shouldComponentUpdate() for your custom day component to make the calendar perform better

If you implement an awesome day component please make a PR so that other people could use it :)

DocsRNC Docs Components CalendarList (`docsRNC/docs/Components/CalendarList.md`)

Calendar list component
(code example)
:::info
This component extends Calendar, FlatList props.
:::

API

pastScrollRange

Max amount of months allowed to scroll to the past
number

futureScrollRange

Max amount of months allowed to scroll to the future
number

calendarStyle

Specify style for calendar container element
ViewStyle

calendarHeight

Dynamic calendar height
number

calendarWidth

Used when calendar scroll is horizontal, (when pagingEnabled = false)
number

staticHeader

Whether to use a fixed header that doesn't scroll (when horizontal = true)
boolean

showScrollIndicator

Whether to enable or disable vertical / horizontal scroll indicator
boolean

Calendar List Examples

<CalendarList/> is scrollable semi-infinite calendar composed of <Calendar/> components. Currently it is possible to scroll 4 years back and 4 years to the future. All parameters that are available for <Calendar/> are also available for this component. There are also some additional params that can be used:

javascript
<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
/>

Horizontal CalendarList

You can also make the CalendarList scroll horizontally. To do that you need to pass specific props to the CalendarList:

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

DocsRNC Docs Components CalendarProvider (`docsRNC/docs/Components/CalendarProvider.md`)

Calendar context provider component
(code example)
:::info
This component extends Context props.
:::

API

theme

Specify theme properties to override specific styles for calendar parts
Theme

style

Specify style for calendar container element
ViewStyle

date

Initial date in 'yyyy-MM-dd' format
string

onDateChanged

Handler which gets executed when the date changes
(date: string, updateSource: UpdateSource) => void

onMonthChange

Handler which gets executed when the month changes
(date: DateData, updateSource: UpdateSource) => void

showTodayButton

Whether to show the today button
boolean

todayButtonStyle

Today button's style
ViewStyle

todayBottomMargin

Today button's top position
number

disabledOpacity

The opacity for the disabled today button (0-1)
number

DocsRNC Docs Components ExpandableCalendar (`docsRNC/docs/Components/ExpandableCalendar.md`)

Expandable calendar component
(code example)
:::info
This component extends CalendarList props.
:::
NOTE: This component should be wrapped with CalendarProvider component.

API

initialPosition

The initial position of the calendar ('open' | 'closed')
Positions

onCalendarToggled

Handler which gets executed when the calendar is opened or closed
(isOpen: boolean) => void

disablePan

Whether to disable the pan gesture and disable the opening and closing of the calendar (initialPosition will persist)
boolean

hideKnob

Whether to hide the knob
boolean

leftArrowImageSource

The source for the left arrow image
ImageSourcePropType

rightArrowImageSource

The source for the right arrow image
ImageSourcePropType

allowShadow

Whether to have shadow/elevation for the calendar
boolean

disableWeekScroll

Whether to disable the week scroll in closed position
boolean

openThreshold

The threshold for opening the calendar with the pan gesture
number

closeThreshold

The threshold for closing the calendar with the pan gesture
number

closeOnDayPress

Whether to close the calendar on day press
boolean

DocsRNC Docs Components Timeline (`docsRNC/docs/Components/Timeline.md`)

Timeline component
(code example)
:::info
This component extends ScrollView props.
:::

API

theme

Specify theme properties to override specific styles for calendar parts
Theme

style

Specify style for calendar container element
ViewStyle

events

List of events to render on the timeline
Event[]

start

The timeline day start time
number

end

The timeline day end time
number

onEventPress

Handler which gets executed when event is pressed
(event: Event) => void

onBackgroundLongPress

Handler which gets executed when background is long pressed. Pass to handle creation of a new event
(timeString: string, time: NewEventTime) => void

onBackgroundLongPressOut

Handler which gets executed when background's long pressed released. Pass to handle creation of a new event
(timeString: string, time: NewEventTime) => void

renderEvent

Specify a custom event block
(event: PackedEvent) => JSX.Element

scrollToFirst

Whether to scroll to the first event
boolean

format24h

Whether to use 24 hours format for the timeline hours
boolean

DocsRNC Docs Components WeekCalendar (`docsRNC/docs/Components/WeekCalendar.md`)

Week calendar component. You MUST wrap it inside a CalendarProvider component.
(code example)
:::info
This component extends CalendarList props.
:::

API

allowShadow

Whether to have shadow/elevation for the calendar
boolean

hideDayNames

Whether to hide the names of the week days
boolean

--- METRICS ---

Explore Related Technologies & Topics

View All 9,111+ Repositories →

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

#android Browse android catalog → #calendar Browse calendar catalog → #hacktoberfest Browse hacktoberfest catalog → #ios Browse ios catalog → #react-native Browse react-native catalog → #ui-components Browse ui-components catalog → ⚡ MCP Servers Model Context Protocol → 🧠 Agent Skills Prompt & rule files → 🔌 OpenAPI Specs REST & Swagger schemas →