📅 React Native Calendar Kit

Status: In Progress

React Native Calendar component, fully implemented using react-native-gesture-handler and react-native-reanimated. Support pinch to zoom, drag and drop to create/update event.

Features

• Support all day events.
• Support drag/drop to create/edit event.
• Support hiding the days of the week.
• Support scrolling by day.
• Support Pinch to zoom.
• Support recurring events.

Demo:

iOS:

ios_demo.mp4

Android:

android_demo.mp4

Installation

Using Yarn:

$ yarn add @howljs/calendar-kit

Using NPM:

$ npm install --save @howljs/calendar-kit

The libraries we will install now are react-native-gesture-handler and react-native-reanimated. If you already have these libraries installed and at the latest version, you are done here! Otherwise, read on.

Installing dependencies into an Expo managed project

$ npx expo install react-native-gesture-handler react-native-reanimated

Follow installation instructions for React Native Reanimated and React Native Gesture Handler.

If you enable useHaptic, you need to install expo-haptics

$ npx expo install expo-haptics

Installing dependencies into a bare React Native project

Using Yarn:

$ yarn add react-native-gesture-handler react-native-reanimated

Using NPM:

$ npm install --save react-native-gesture-handler react-native-reanimated

Follow installation instructions for React Native Reanimated and React Native Gesture Handler.

If you enable useHaptic, you need to install react-native-haptic-feedback.

Using Yarn:

$ yarn add react-native-haptic-feedback

Using NPM:

$ npm install --save react-native-haptic-feedback

Documentation

The documentation for version 2.0.0 hasn’t been updated yet, so follow the code from the example if you want to use the library early.

TODO:

• Update documentation
• Cache events to speed up rendering
• Month View