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