react-native-inline-calendar

React Native component that renders selectable monthly calendar or week stripe with agenda for selected date

Installation

Run in your terminal:

yarn add react-native-inline-calendar

or

npm install react-native-inline-calendar --save

Then add to your application as

import { Calendar } from react-native-inline-calendar

Usage

You can see usage example in this Expo demo

Params

| Param name | Type | Default value | Description | | ------------- | ----------- | ------------- | ----------- | | weekMode | boolean | false | enable week stripe mode | | disableWeekToggle | boolean | false | disable toggle from week stripe to month view | | scrollable | boolean | false | scrollable or not | | weekStartsOn | number | 0 | Index of the first week day, i.e. 0 - Sunday, 1 - Monday, etc. | | showAgenda | boolean | true | show agenda list under the calendar (items property) | | scrollByOne | boolean | true | scroll by one page or with momentum | | animatedScrollTo | boolean | true | animate initial scroll | | hideHeader | boolean | false | Hide/show month header | | hideWeekDays | boolean | false | Hide/show week days names | | showArrows | boolean | true | Hide/show navigation arrows | | minMonthsToScroll | number | 0 | number of months in the past available for scroll | | maxMonthsToScroll | number | 1 | number of months in the future available for scroll | | initialDate | date | new Date | initial date | | minDate | date | new Date | if set, all dates earlier than that will be disabled | | headerDateFormat | string | Date format for header | | selectedDate | date | initialDate or now | date, initially selected | | currentDate | date | initialDate or now | current date | | items | object | null | agenda items in map format (see below) | | dataUpdated | timestamp | null | timestamp of last data refresh to update calendar cache. Required for dinamic data updates | | emptyListRenderer | function | defaultEmptyListRenderer | what should be rendered if agenda is empty for selected date | | itemRenderer | function | defaultItemRenderer | agenda item renderer | | itemClickHandler | function | void | agenda item click handler | | onDateSelect | function | void | date select handler, doesn't prevent rendering date's agenda, runs after selected date state is updated | | styles | object | defaultStyles | custom styles that can be applied to the component. Import defaultStyles for the reference |

Agenda items data format:

{
  'YYYY-MM-DD': {
    style: object,
    items: [ object ] 
  } 
}