@skolacode/react-native-custom-calendar
TypeScript icon, indicating that this package has built-in type declarations

0.2.12 • Public • Published

!! 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

Alt text

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

Alt text

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

Package Sidebar

Install

npm i @skolacode/react-native-custom-calendar

Weekly Downloads

2

Version

0.2.12

License

MIT

Unpacked Size

72 kB

Total Files

30

Last publish

Collaborators

  • burhan3759
  • merekata
  • aibrahim3546