React Native Calendar Kit

There are two ways to define all-day events in React Native Calendar Kit:

1. Timezone-dependent: Set start and end using dateTime and timeZone to cover the full day range.
2. Timezone-independent: Omit dateTime and timeZone, and use only the date property (YYYY-MM-DD) for both start and end. This is recommended for holidays or events that should span entire days regardless of local time.

For multi-day events, specify different start and end dates using the date property.

// Timezone-independent all-day event
{
  id: '3',
  title: 'Company Holiday',
  start: { date: '2024-03-17' },
  end: { date: '2024-03-17' },
  color: '#FBBC05',
}

// Multi-day all-day event
{
  id: '4',
  title: 'Annual Leave',
  start: { date: '2024-03-18' },
  end: { date: '2024-03-22' },
  color: '#EA4335',
}

The Resources Calendar allows you to display events for multiple resources (e.g., rooms, employees, equipment) side by side. To implement this, pass a resources array to the CalendarContainer component. Each resource object must contain a unique id.

import {
  CalendarContainer,
  CalendarHeader,
  CalendarBody,
} from "@howljs/calendar-kit";

const resources = [
    { id: 'room1', name: 'Meeting Room 1' },
    { id: 'room2', name: 'Meeting Room 2' },
    { id: 'room3', name: 'Conference Room' },
];

function MyCalendar() {
    return (
    <CalendarContainer
        resources={resources}
        // ... other props
    >
        <CalendarHeader />
        <CalendarBody />
    </CalendarContainer>
    );
}

To allow users to create new events by dragging on the calendar interface, set the allowDragToCreate prop to true on the CalendarContainer component.

import {
  CalendarContainer,
  CalendarHeader,
  CalendarBody,
} from "@howljs/calendar-kit";

const MyCalendar = () => {
  return (
    <CalendarContainer
      allowDragToCreate={true}
      // ... other props
    >
      <CalendarHeader />
      <CalendarBody />
    </CalendarContainer>
  );
};

To allow users to dynamically adjust the time scale of the calendar view using pinch gestures, set the allowPinchToZoom prop to true on the <CalendarKit /> component.

<CalendarKit
    allowPinchToZoom={true}
    // ... other props
/>

You can customize the visual appearance of the calendar by passing a theme prop to the CalendarContainer component. The theme object accepts a DeepPartial<ThemeConfigs> object that allows you to override colors, text styles, and container styles for specific calendar components like the hour column, day bar, and event containers.

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

const customTheme: DeepPartial<ThemeConfigs> = {
  // Your custom theme properties here
};

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

export default Calendar;

To allow users to edit existing events by dragging them to new times or dates, set the allowDragToEdit prop to true on the CalendarContainer component.

import {
  CalendarContainer,
  CalendarHeader,
  CalendarBody,
} from "@howljs/calendar-kit";

const MyCalendar = () => {
  return (
    <CalendarContainer
      allowDragToEdit={true}
      // ... other props
    >
      <CalendarHeader />
      <CalendarBody />
    </CalendarContainer>
  );
};

You can deploy the built website using either SSH or GitHub Pages.

To deploy via SSH, set the USE_SSH environment variable to true.

To deploy to GitHub Pages, provide your GitHub username via the GIT_USER environment variable. This command will build the site and push it to the gh-pages branch.

# Deploy using SSH
$ USE_SSH=true yarn deploy

# Deploy to GitHub Pages
$ GIT_USER=<Your GitHub username> yarn deploy

To generate static content for the documentation website, run the build command. This creates a build directory containing the static files which can be hosted on any static content hosting service.

$ yarn build