Version: v0.30.x

Migrate from `react-native-calendars`

- <Calendar
-   current="2026-10-01"
-   minDate="2026-10-05"
-   onDayPress={(day) => setSelected(day.dateString)}
-   markedDates={{ [selected]: { selected: true }, '2026-10-22': { marked: true, dotColor: 'green' } }}
-   firstDay={1}
- />
+ <DatePicker
+   initialMonth={new Date(2026, 9, 1)}
+   minDate={new Date(2026, 9, 5)}
+   value={selected}
+   onChange={setSelected}
+   markedDates={{ '2026-10-22': { dots: ['green'] } }}
+   firstDayOfWeek={1}
+ />

react-native-calendars	React Native Pickers
`current` (string)	`initialMonth` (`Date`)
`minDate` / `maxDate` (strings)	`minDate` / `maxDate` (`Date`)
`onDayPress(day)`	`onChange(date)`; selection is managed for you
`markedDates[k].selected`	`value` (no manual marking)
`markingType="period"` + manual start/end marking	`mode="range"`
`markedDates[k].marked` + `dotColor`	`markedDates[k].dots: [color]`
`markingType="multi-dot"` `dots: [{ color }]`	`dots: ['#hex', …]` (max 3)
`markedDates[k].disabled` / `disableTouchEvent`	`markedDates[k].disabled` or `isDateDisabled`
`firstDay`	`firstDayOfWeek`
`onMonthChange`	`onMonthChange(month: Date)`
`hideExtraDays`	`showOutsideDays={false}`
`enableSwipeMonths`	`enableSwipe` (on by default)
`dayComponent`	`renderDay(state, theme)`
`renderArrow(direction)`	`renderArrow(direction, disabled)`
`theme={{ selectedDayBackgroundColor, todayTextColor, … }}`	`theme={{ colors: { primary, … } }}` + `styles` slots
`LocaleConfig`	`locale="fr-FR"` (names from `Intl`)

ExpandableCalendar

Its ExpandableCalendar needs a CalendarProvider around it and an AgendaList for the day's items. Here the calendar holds the date itself, and you list the day's items under it with a plain FlatList or View:

- <CalendarProvider date={selected} onDateChanged={setSelected}>
-   <ExpandableCalendar firstDay={1} markedDates={marked} />
-   <AgendaList sections={sections} renderItem={renderItem} />
- </CalendarProvider>
+ <ExpandableCalendar value={selected} onChange={setSelected} firstDayOfWeek={1} markedDates={marks} />
+ <FlatList data={itemsFor(selected)} renderItem={renderItem} />

react-native-calendars	React Native Pickers
`CalendarProvider date` / `onDateChanged`	`value` / `onChange` on `ExpandableCalendar`
`initialPosition="open"`	`defaultExpanded`
`onCalendarToggled(open)`	`onExpandedChange(expanded)`
`disablePan`	`enableSwipe={false}`
`WeekCalendar`	`WeekStrip`
`AgendaList`, `Timeline`	your own list: this package picks dates, it doesn't lay out events

See all migration guides for other libraries, and Comparison for when another library is the better choice.

ExpandableCalendar​

ExpandableCalendar