Home

Awesome

React Native Calendar 📆

Coverlogo

BuildStatus NPM version npm CodeFactor Codacy Badge PRs Welcome

Installation

npm install react-native-calendario --save

Using yarn

yarn add react-native-calendario

Usage

import { Calendar } from 'react-native-calendario';
<Calendar
  onChange={(range) => console.log(range)}
  minDate={new Date(2018, 3, 20)}
  startDate={new Date(2018, 3, 30)}
  endDate={new Date(2018, 4, 5)}
  theme={{
    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: {},
  }}
/>

API

PropDescriptionRequired?DefaultType
onChange (deprecated)Callback called when a day is pressed.noFunction
onPressCallback called when a day is pressed.yes(Date) => void
minDateMinimum date that can be selected.nonullDate
maxDateMaximum date that can be selected.nonullDate
startDateSelected start datenonullDate
endDateSelected end daterequires startDatenullDate
themeCalendar StyleSheetnonullThemeType
localeCalendar languagees, en, fr, br'en'LocaleType
dayNamesArray of day namesno[]string[]
monthNamesArray of names of each mono[]string[]
showWeekdaysShow Week columnsnotrueboolean
showMonthTitleShow Month titlenotrueboolean
initialListSizeFlatList initialNumToRenderno2number
startingMonthFirst month to rendernocurrent month'YYYY-MM-DD'
numberOfMonthsNumber of months to renderno12number
disableRangeTurn off range date selectionnofalseboolean
firstDayMondayMonday as first day of the weeknofalseboolean
monthHeightChange Month row heightno370number
markedDaysMulti-dot support on Day componentnoundefinedMarkedDays
disabledDaysDisabled daysnonull{[string]: any }
renderDayContentRender custom Day contentnonullFunction
renderAllMonthsUse this for web, render all monthsnonullboolean
viewableItemsChangedhandleViewableItemsChange callbacknonullFunction
disableOffsetDaysRemove offset Days.nofalseboolean

License

MIT