@iftek/react-native-month-view-calendar

React Native Month View Calendar

• Fork from react-native-month-view-calendar

 

Install

npm install --save @iftek/react-native-month-view-calendar

Basic usage

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>
  );
}

Props

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

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