react-native-calendar-list

A cross platform optimized customizable CalendarList component for React Native.

Installation

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

Examples

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