react-native-month-view-calendar

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