Skip to content

A cross platform optimized customizable CalendarList component for React Native

License

Notifications You must be signed in to change notification settings

hernancorigliano/react-native-calendar-list

Repository files navigation

Build Status npm version

react-native-calendar-list

A cross platform optimized customizable CalendarList component for React Native.

NPM

Installation

$ npm install react-native-calendar-list --save

Examples

exmple 1 exmple 2

Also check example app with some calendar styling and behaviour here

Why another calendar list?

Short answer: The most famous react native calendar package out there did has many issues with performance. So this calendar list is optimized for fast renders, fast state update and scrolling experience. It uses Direct Manipulation to avoid reconciliation algorythm from react, this improving performance.

Usage

<CalendarList
        startDate={'2017-02-01'}
        monthsCount={12}
        onDatePress={this.dayPressed}
        initialNumToRender={3}
        rowHeight={40}
        headerHeight={40} />

Props

Prop Description Default
startDate example '2017-10-01'. The day is not important. Calendar will start from this month and year. None
monthsCount How many months to show from the startDate ahead. None
mondayWeekStart This sets the week start on monday. false
dayNames Array of names to override the day names in the week row. Example value: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi','Sa']. Note: Always first item of array is the Sunday name, ignore mondayWeekStart English names
monthNames Array of names to override the month names in the header. Example value: ['Jan', 'Feb', 'Mar','Abr','May','Jun','Jul','Ago', 'Sep','Oct','Nov','Dic']. English names
onDatePress Callback function invoked on a date press. Will call this func with a single parameter, the date in ISO format 'YYYY-MM-DD' None
rowHeight Day Row height. Required to make optimizations. None
headerHeight Month title height. Required to make optimizations. None
Styling None
marks An object with ISO dates as keys to style specific dates. Example: {"2017-02-20": markStyle, "2017-02-01": markStyle }. The expected object in each date is like this: {dayTextStyle: {color: 'white', fontSize: 14, fontWeight: 'bold'}, dayBackgroundColor: '#08a'}. Only the text style and the backgroundColor of the button can be styled. None
showVerticalScrollIndicator VirtualizedList prop true
enableAutoScrollOnMonthPress Makes the month header tappable and performs scroll to the month when tapped. false
enableFixVisualLinesArtifacts Calendar will adjust it's width in order to be multiple of 7 an avoid RN line artifacts. Use it if you see some weird glitching lines in the calendar. None
dayBackgroundColor Day box button background color. #fff
headerBackgroundColor Month header background color grey
weekHeaderBoxStyle week day names box style. None
headerTextStyle Month header text style None
weekHeaderTextStyle Month header background color None
dayTextStyle Day button text style None
initialNumToRender VirtualizedList prop. Tune for required performance. None

License

The MIT License.

See LICENSE

About

A cross platform optimized customizable CalendarList component for React Native

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published