React Native Month View Calendar
Install
npm install --save react-native-month-view-calendar
Basic usage
import React from 'react';
import { MonthViewCalendar } from 'react-native-month-view-calendar';
import { View, ScrollView } from 'react-native'
const Component = () => {
const eventsForCalendar = [
{
title: 'My awesome event',
date: new Date(),
},
];
return (
<ScrollView>
<MonthViewCalendar
cellStyles={{ minHeight: 65 }}
events={eventsForCalendar}
renderEvent={(event, i) => {
return (
<Text key={i} numberOfLines={1}>{event.title}</Text>
)
}}
/>
</ScrollView>
);
}
Props
Properties | Default | Description |
---|---|---|
date | new Date() | Date from which the calendar will be built |
dayTextStyles | {} | Styles for label day(numer of day), can be array or object |
events | Array of events | |
headerTextStyles | {} | Styles for label week day name, can be array or object |
cellStyles | {} | Styles for all cells |
pastMonthsCellStyles | {} | Styles for all cells from past dates |
weekDays | ['S', 'M', 'T', 'W', 'T', 'F', 'S'] | Array with name of the day of the week |
renderEvent | Function required to render event information. Example (event, index) => | |
onSwipe | Callback when calendar is swiped | |
onSwipePrev | Callback when calendar is swiped to previous month | |
onSwipeNext | Callback when calendar is swiped to next month | |
onScrollToIndexFailed | Callback to handle errors on swipe |
Methods
To use the component methods save a reference to it:
const reference = useRef();
<MonthViewCalendar
ref={reference}
/>
- goToDate(date): the component navigates to a custom date, date variable must be an instance of Date. Example: reference.current.goToDate(new Date());
- getCurrentDate() returns current date that being displayed
Event object
{
/// your props
date: new Date(),
}