Skip to main content
The Calendar component displays a single month with full customization options for marking dates, handling date selection, and styling.

​
Basic usage

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

<Calendar
  onDayPress={(day) => console.log('selected day', day)}
  markedDates={{
    '2023-05-16': {selected: true, marked: true}
  }}
/>

​
Props

The Calendar component extends both CalendarHeader and Day component props.

​
Date configuration

​
current
string
Initially visible month in YYYY-MM-DD format. This prop is being deprecated - use initialDate instead.
​
initialDate
string
Initially visible month in YYYY-MM-DD format. If changed, will reinitialize the calendar to this value.
​
minDate
string
Minimum date that can be selected in YYYY-MM-DD format. Dates before minDate will be grayed out.
​
maxDate
string
Maximum date that can be selected in YYYY-MM-DD format. Dates after maxDate will be grayed out.
​
allowSelectionOutOfRange
boolean
Allow selection of dates before minDate or after maxDate. Default is false.

​
Marking and styling

​
markedDates
MarkedDates
Collection of dates that have to be marked. Object with date strings as keys and marking objects as values.
{
  '2023-05-16': {
    selected: true,
    marked: true,
    selectedColor: 'blue'
  }
}
​
theme
Theme
Specify theme properties to override specific styles for calendar parts.
{
  backgroundColor: '#ffffff',
  calendarBackground: '#ffffff',
  textSectionTitleColor: '#b6c1cd',
  selectedDayBackgroundColor: '#00adf5',
  selectedDayTextColor: '#ffffff',
  todayTextColor: '#00adf5',
  dayTextColor: '#2d4150'
}
​
style
ViewStyle
Specify style for calendar container element.
​
headerStyle
ViewStyle
Style passed to the header.

​
Display options

​
hideExtraDays
boolean
Do not show days of other months in month page. Default is false.
​
showSixWeeks
boolean
Always show six weeks on each month (only when hideExtraDays = false). Default is false.
​
firstDay
number
If 0, week starts from Sunday. If 1, week starts from Monday. Default is 0.
​
showWeekNumbers
boolean
Show week numbers on the left side of the calendar. Default is false.
​
hideDayNames
boolean
Hide day names (Mon, Tue, etc.) at the top of the calendar. Default is false.
​
displayLoadingIndicator
boolean
Display loading indicator when calendar data is being loaded. Default is false.

​
Event handlers

​
onDayPress
(date: DateData) => void
Handler which gets executed on day press.
onDayPress={(day) => {
  console.log('selected day', day);
  // day: { year, month, day, timestamp, dateString }
}}
​
onDayLongPress
(date: DateData) => void
Handler which gets executed on day long press.
​
onMonthChange
(date: DateData) => void
Handler which gets executed when month changes in calendar.
​
onVisibleMonthsChange
(months: DateData[]) => void
Handler which gets executed when visible month changes in calendar.
​
disableMonthChange
boolean
Disables changing month when clicking on days of other months (when hideExtraDays = false). Default is false.
​
enableSwipeMonths
boolean
Enable the option to swipe between months. Default is false.
​
hideArrows
boolean
Hide month navigation arrows. Default is false.
​
disableArrowLeft
boolean
Disable left arrow. Default is false.
​
disableArrowRight
boolean
Disable right arrow. Default is false.
​
renderArrow
(direction: 'left' | 'right') => ReactNode
Replace default arrows with custom ones.
renderArrow={(direction) => (
  <Text>{direction === 'left' ? '<' : '>'}</Text>
)}
​
onPressArrowLeft
(method: () => void, month?: XDate) => void
Handler which gets executed when press arrow icon left. It receives a callback to go back a month.
​
onPressArrowRight
(method: () => void, month?: XDate) => void
Handler which gets executed when press arrow icon right. It receives a callback to go forward a month.

​
Customization

​
customHeader
any
Allow rendering a totally custom header.
customHeader={(props) => <CustomHeader {...props} />}
​
dayComponent
React.ComponentType<DayProps>
Provide custom day rendering component.
​
monthFormat
string
Month format in the header. Default is 'MMMM yyyy'. Formatting values: http://arshaw.com/xdate/#Formatting

​
Disabled dates

​
disabledByDefault
boolean
Disable all days by default. Default is false.
​
disabledByWeekDays
number[]
Disable specific days of the week (0 = Sunday, 6 = Saturday).
disabledByWeekDays={[0, 6]} // Disable weekends
​
disabledDaysIndexes
number[]
Apply custom disable color to selected day name indexes.

​
Accessibility

​
accessibilityElementsHidden
boolean
Whether the accessibility elements contained within this accessibility element are hidden (iOS only).
​
importantForAccessibility
'auto' | 'yes' | 'no' | 'no-hide-descendants'
Controls if a view fires accessibility events and if it is reported to accessibility services (Android only).
​
testID
string
Test identifier for automated testing.

​
Examples

​
Basic calendar with marked dates

<Calendar
  markedDates={{
    '2023-05-16': {selected: true, marked: true, selectedColor: 'blue'},
    '2023-05-17': {marked: true},
    '2023-05-18': {marked: true, dotColor: 'red', activeOpacity: 0}
  }}
/>

​
Calendar with custom theme

<Calendar
  theme={{
    backgroundColor: '#ffffff',
    calendarBackground: '#ffffff',
    textSectionTitleColor: '#b6c1cd',
    selectedDayBackgroundColor: '#00adf5',
    selectedDayTextColor: '#ffffff',
    todayTextColor: '#00adf5',
    dayTextColor: '#2d4150',
    textDisabledColor: '#d9e1e8',
    dotColor: '#00adf5',
    selectedDotColor: '#ffffff',
    arrowColor: 'orange',
    monthTextColor: 'blue',
    textDayFontFamily: 'monospace',
    textMonthFontFamily: 'monospace',
    textDayHeaderFontFamily: 'monospace',
    textDayFontSize: 16,
    textMonthFontSize: 16,
    textDayHeaderFontSize: 16
  }}
/>

​
Calendar with date range selection

import { Calendar } from 'react-native-calendars';
import { useState } from 'react';

function DateRangeCalendar() {
  const [selected, setSelected] = useState('');

  return (
    <Calendar
      onDayPress={(day) => setSelected(day.dateString)}
      markedDates={{
        [selected]: {
          selected: true,
          disableTouchEvent: true,
          selectedColor: 'orange',
          selectedTextColor: 'red'
        }
      }}
    />
  );
}
  • CalendarList - Horizontal or vertical scrollable calendar
  • Agenda - Calendar with agenda/reservation list

Build docs developers (and LLMs) love

Get started for freeTalk to us