React Native Custom Calendar

A flexible & light weight calendar component for React Native

Installation

Install with npm:

$ npm install --save @skolacode/react-native-custom-calendar

Install with yarn:

$ yarn add @skolacode/react-native-custom-calendar

Usage

import React from 'react';
import {View} from 'react-native';
import {CustomCalendar} from '@skolacode/react-native-custom-calendar'

const App = () => {
  return (
    <View>
      <CustomCalendar />
    </View>
  );
};

Props

Name	Type	Required	Default	Description
id	string	No	random	ID of the component as the reference for its ref
date	Date	No	today	The initial date to display active calendar
offsetMonth	Boolean	No	true	Show the offset previous / next month within Monday to Sunday
expand	Boolean	No	true	The state of the calendar view, either expanded or collapsed
showNav	Boolean	No	true	Show the navigation buttons (only when header is not overwritten)
customHeader	ReactElement	No	-	Custom component to override default header
customDay	ReactElement	No	-	Custom component to override default render of each day
handlePress	Function	No	-	Custom function to trigger on pressed each day

---

Component Ref

import React, {useEffect} from 'react';
import {View} from 'react-native';
import {CustomCalendar, CustomCalendarRef} from '@skolacode/react-native-custom-calendar'

const App = () => {
  useEffect(() => {
    CustomCalendarRef.calendarA.collapse();

    console.log(CustomCalendarRef.calendarA.isExpanded()); // false
  }, []);
  
  return (
    <View>
      <CustomCalendar id={'calendarA'} />
    </View>
  );
};

Available properties & methods after component has mounted:

Name	Type	Return	Description
id	string	string	Reference ID of the component
current	ReactElement	Object	The calendar element itself
expand	Function	Void	Update the calendar to expanded state
collapse	Function	Void	Update the calendar to collapsed state
isExpanded	Function	Boolean	Get current state (expanded / collapsed) of the calendar
getCalendarDate	Function	Object	Get details of active current calendar for that month
getSelectedDay	Function	Object	Get details of active selected day
navigatePrev	Function	Void	Navigate calendar to previous month
navigateNext	Function	Void	Navigate calendar to next month
navigateMonth	Function	Void	Navigate calendar to specific month

---