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(),
}