React Native Month View Calendar

 

Install

``
npm install --save react-native-month-view-calendar
`

$3


`js
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 (

cellStyles={{ minHeight: 65 }}
events={eventsForCalendar}
renderEvent={(event, i) => {
return (
{event.title}
)
}}
/>

);
}
`


$3

| 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|

$3

To use the component methods save a reference to it:

`js
const reference = useRef();

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

$3


`js
{
/// your props
date: new Date(),
}
``