Skip to main content
Version: 2.x

Introduction

Overview​

React Native Calendar Kit is a powerful and flexible calendar component for React Native applications. It provides a customizable and feature-rich calendar view with support for various functionalities.

Note: This is a trial version with basic functionality of the library, not yet fully optimized for the web.

Features​

  • Multiple view types: Support for different calendar views (e.g., day, 3-days, week).
  • Support for all-day events: The library can handle and display all-day events.
  • Drag and drop functionality: Users can create and edit events by dragging and dropping.
  • Flexible day view: The library supports hiding specific days of the week.
  • Scrolling by day: Users can scroll through the calendar view by individual days.
  • Pinch to zoom: The calendar supports pinch gestures for zooming in and out.
  • Recurring events: The library has support for handling recurring events.
  • Haptic feedback: The library includes optional haptic feedback for user interactions.
  • Timezone support: The calendar can handle different timezones.
  • Unavailable hours: The ability to mark certain hours as unavailable in the calendar.
  • Theming support: The library includes a theming system for consistent styling.
  • Overlap events: The library supports overlapping events.

Installation​

To install React Native Calendar Kit, follow these steps:

npm install @howljs/calendar-kit

Dependencies​

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.

Installing dependencies into a bare React Native project​

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

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

Haptic Feedback​

The library includes optional haptic feedback when dragging events. To enable haptic feedback, please install the expo-haptics or react-native-haptic-feedback library and set the useHaptic prop to true on the CalendarContainer component.

$ npx expo install expo-haptics

or

$ npm install react-native-haptic-feedback

Initialize the Calendar​

import { CalendarBody, CalendarContainer, CalendarHeader } from '@howljs/calendar-kit';
import React from 'react';

const Calendar = () => {
  return (
    <CalendarContainer>
      <CalendarHeader />
      <CalendarBody />
    </CalendarContainer>
  );
};

export default Calendar;