Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

React Native Calendar πŸ“†


BuildStatus NPM version npm CodeFactor Codacy Badge PRs Welcome


npm install react-native-calendario --save

Using yarn

yarn add react-native-calendario


import { Calendar } from 'react-native-calendario';
  onChange={(range) => console.log(range)}
  minDate={new Date(2018, 3, 20)}
  startDate={new Date(2018, 3, 30)}
  endDate={new Date(2018, 4, 5)}
    activeDayColor: {},
    monthTitleTextStyle: {
      color: '#6d95da',
      fontWeight: '300',
      fontSize: 16,
    emptyMonthContainerStyle: {},
    emptyMonthTextStyle: {
      fontWeight: '200',
    weekColumnsContainerStyle: {},
    weekColumnStyle: {
      paddingVertical: 10,
    weekColumnTextStyle: {
      color: '#b6c1cd',
      fontSize: 13,
    nonTouchableDayContainerStyle: {},
    nonTouchableDayTextStyle: {},
    startDateContainerStyle: {},
    endDateContainerStyle: {},
    dayContainerStyle: {},
    dayTextStyle: {
      color: '#2d4150',
      fontWeight: '200',
      fontSize: 15,
    dayOutOfRangeContainerStyle: {},
    dayOutOfRangeTextStyle: {},
    todayContainerStyle: {},
    todayTextStyle: {
      color: '#6d95da',
    activeDayContainerStyle: {
      backgroundColor: '#6d95da',
    activeDayTextStyle: {
      color: 'white',
    nonTouchableLastMonthDayTextStyle: {},


Prop Description Required? Default Type
onChange (deprecated) Callback called when a day is pressed. no Function
onPress Callback called when a day is pressed. yes (Date) => void
minDate Minimum date that can be selected. no null Date
maxDate Maximum date that can be selected. no null Date
startDate Selected start date no null Date
endDate Selected end date requires startDate null Date
theme Calendar StyleSheet no null ThemeType
locale Calendar language es, en, fr, br 'en' LocaleType
dayNames Array of day names no [] string[]
monthNames Array of names of each mo no [] string[]
showWeekdays Show Week columns no true boolean
showMonthTitle Show Month title no true boolean
initialListSize FlatList initialNumToRender no 2 number
startingMonth First month to render no current month 'YYYY-MM-DD'
numberOfMonths Number of months to render no 12 number
disableRange Turn off range date selection no false boolean
firstDayMonday Monday as first day of the week no false boolean
monthHeight Change Month row height no 370 number
markedDays Multi-dot support on Day component no undefined MarkedDays
disabledDays Disabled days no null {[string]: any }
renderDayContent Render custom Day content no null Function
renderAllMonths Use this for web, render all months no null boolean
viewableItemsChanged handleViewableItemsChange callback no null Function
disableOffsetDays Remove offset Days. no false boolean