!! IMPORTANT
** This project is still under development, please hold on tight guys. We will release the first version end of DEC 2022
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 |