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.

• 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.
• Resources calendar: The library supports displaying events for multiple resources (e.g., rooms, employees, equipment) side by side in a single calendar view.

For detailed usage and customization options, please refer to the official documentation.

For examples and usage, please refer to the example app.

To install React Native Calendar Kit, follow these steps:

yarn add @howljs/calendar-kit

# or

npm install @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.

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

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

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

# or

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

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

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

yarn add react-native-haptic-feedback

# or

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

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

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

export default Calendar;