1.0.1 • Published 3 years ago
react-native-month-view-calendar v1.0.1
React Native Month View Calendar
Install
npm install --save react-native-month-view-calendarBasic 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(),
}