React Native Month View Calendar
- Fork from react-native-month-view-calendar
npm install --save @iftek/react-native-month-view-calendar
import React from 'react';
import MonthViewCalendar from '@iftek/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>
);
}| Properties | Default | type | Description |
|---|---|---|---|
| date | new Date() | Date from which the calendar will be built | |
| dayTextStyles | {} | TextStyle | (day:Date) => TextStyle | Styles for label day(numer of day), can be function, array or object |
| todayTextStyles | {} | Styles for label day(today), can be array or object | |
| otherMonthsDayTextStyles | {} | Styles for label day(numer of day) other months, can be array or object |
|
| otherMonthsEnabled | false | other months day cell onPress enabled or not | |
| events | Array of events | ||
| headerTextStyles | {} | Styles for label week day name, can be array or object | |
| cellStyles | {} | ViewStyle | (day:Date) => ViewStyle | Styles for all cells, can be function, array or object |
| 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) => | ||
| onPress | Callback when day cell is pressed | ||
| 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 |
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
{
/// your props
date: new Date(),
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent