CalendarThe Calendar component mainly serves as the foundation for other components, including ExpandableCalendar, WeekCalendar, and CalendarList.

Overview

Structure

Component ImplementationHere are examples of the Calendar component used in other components. Detailed guidelines can be found on each component’s page. The Calendar is part of components like ExpandableCalendar, CalendarList, DateRangePicker, CalendarWeek, and DatePicker.

Spec

Tablet SpecOn tablets, the calendar’s background should stretch to full width, while the content stays within the page margins.

Dev

PlaygroundCode Example

TIP

This component extends the Calendar props.

APIThis is the list of additional props for the component

allowSelectionOutOfRange

boolean

Whether to allow selection of dates before minDate or after maxDate

arrowsHitSlop

null | Insets | number

. Default is 20

customHeader

any

Allow rendering a totally custom header

customHeaderTitle

JSX.Element

Replace default title with custom element

dayComponent

JSX.Element

Replace default day with custom day rendering component

disableAllTouchEventsForDisabledDays

boolean

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

disableArrowLeft

boolean

Whether to disable the left arrow

disableArrowRight

boolean

Whether to disable the right arrow

disableMonthChange

boolean

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

disabledByDefault

boolean

Whether to disable days by default

disabledByWeekDays

number[]

Disable dates by days of the week (Sunday=0)

disabledDaysIndexes

number[]

Whether to apply custom disable color to selected day names indexes

displayLoadingIndicator

boolean

Whether to display loading indicator

enableSwipeMonths

boolean

Whether to enable the option to swipe between months

headerStyle

ViewStyle

Specify style for calendar header

hideArrows

boolean

Whether to hide the arrows

hideDayNames

boolean

Whether to hide the days names

hideExtraDays

boolean

Whether to hide days of other months in the month page

initialDate

string

Initially visible month

inverted

boolean

Whether to invert the theme colors

markedDates

MarkedDatesType

Collection of dates that have to be marked

maxDate

string

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

minDate

string

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

onDayLongPress

(date: DateData) => void

Handler which gets executed on day long press

onDayPress

(date: DateData) => void

Handler which gets executed on day press

onMonthChange

(date: DateData) => void

Handler which gets executed when month changes in calendar

onPressArrowLeft

(method: () => void, month?: string) => void

Handler which gets executed when press left arrow. It receive a callback to go to the previous month

onPressArrowRight

(method: () => void, month?: string) => void

Handler which gets executed when press right arrow. It receive a callback to go to the next month

onVisibleMonthsChange

(months: DateData[]) => void

Handler which gets executed when visible month changes in calendar

renderArrow

(direction: Direction) => ReactNode

Replace default arrows with custom ones (direction: 'left' | 'right')

renderHeader

(date?: string) => ReactNode

Replace default title with custom one

showSixWeeks

boolean

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

showWeekNumbers

boolean

Whether to show weeks numbers