CalendarKit Pro

A professional, feature-rich React calendar component with drag-and-drop, recurring events, timezone support, resource scheduling, and internationalization.

Features

• 5 Views - Month, Week, Day, Agenda, and Resource views
• Drag & Drop - Move events with smooth animations and grid snapping
• Event Resize - Drag event edges to adjust duration
• Recurring Events - Daily, weekly, monthly, yearly with RRule support
• Timezone Support - Full IANA timezone handling
• i18n Ready - Built-in English/French, fully customizable
• Resource Scheduling - Schedule across rooms, people, or equipment
• Dark Mode - Built-in theme toggle
• ICS Import/Export - RFC 5545 compliant
• Mobile Friendly - Touch gestures and responsive layout
• TypeScript - Full type definitions included
• High Performance - Handles 10,000+ events

Installation

npm install calendarkit-pro

Requirements

CalendarKit Pro requires TailwindCSS. Add the package to your Tailwind config:

// tailwind.config.js
module.exports = {
  content: [
    // ... your paths
    './node_modules/calendarkit-pro/**/*.{js,mjs}',
  ],
}

Quick Start

import { Scheduler } from 'calendarkit-pro';
import type { CalendarEvent, ViewType } from 'calendarkit-pro';
import { useState } from 'react';

function MyCalendar() {
  const [events, setEvents] = useState<CalendarEvent[]>([]);
  const [view, setView] = useState<ViewType>('week');
  const [date, setDate] = useState(new Date());

  return (
    <Scheduler
      events={events}
      view={view}
      onViewChange={setView}
      date={date}
      onDateChange={setDate}
      onEventCreate={(event) => {
        setEvents([...events, { ...event, id: crypto.randomUUID() } as CalendarEvent]);
      }}
      onEventUpdate={(event) => {
        setEvents(events.map(e => e.id === event.id ? event : e));
      }}
      onEventDelete={(id) => {
        setEvents(events.filter(e => e.id !== id));
      }}
    />
  );
}

Props

Prop	Type	Description
events	CalendarEvent[]	Array of events to display
view	ViewType	Current view: 'month' | 'week' | 'day' | 'agenda' | 'resource'
date	Date	Currently focused date
onViewChange	(view: ViewType) => void	View change callback
onDateChange	(date: Date) => void	Date change callback
onEventCreate	(event: Partial<CalendarEvent>) => void	Event creation callback
onEventUpdate	(event: CalendarEvent) => void	Event update callback
onEventDelete	(eventId: string) => void	Event deletion callback
onEventResize	(event, start, end) => void	Event resize callback
calendars	Calendar[]	Multiple calendar support
resources	Resource[]	Resources for resource view
eventTypes	EventType[]	Pre-defined event types
timezone	string	IANA timezone (e.g., 'America/New_York')
onTimezoneChange	(tz: string) => void	Timezone change callback
language	'en' | 'fr'	UI language
translations	Partial<CalendarTranslations>	Custom translations
locale	Locale	date-fns locale for formatting
isDarkMode	boolean	Enable dark mode
onThemeToggle	() => void	Dark mode toggle callback
theme	CalendarTheme	Custom theme colors
readOnly	boolean	Disable editing
isLoading	boolean	Show loading skeletons
hideViewSwitcher	boolean	Hide view switcher
renderEventForm	(props) => ReactNode	Custom event form

Types

CalendarEvent

interface CalendarEvent {
  id: string;
  title: string;
  start: Date;
  end: Date;
  description?: string;
  color?: string;
  allDay?: boolean;
  calendarId?: string;
  resourceId?: string;
  type?: string;
  guests?: string[];
  attachments?: EventAttachment[];
  reminders?: EventReminder[];
  recurrence?: {
    freq: 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY';
    interval?: number;
    count?: number;
    until?: Date;
    byweekday?: number[];
  };
}

Resource

interface Resource {
  id: string;
  label: string;
  color?: string;
  avatar?: string;
}

CalendarTheme

interface CalendarTheme {
  colors?: {
    primary?: string;
    secondary?: string;
    background?: string;
    foreground?: string;
    border?: string;
    muted?: string;
    accent?: string;
  };
  fontFamily?: string;
  borderRadius?: string;
}

Views

Month View

Full month grid with event indicators. Click a date to switch to day view.

Week View

7-day view with hourly time slots. Drag events to reschedule, resize from bottom edge.

Day View

Single day with 15-minute time slots. Ideal for detailed scheduling.

Agenda View

Chronological list of upcoming events for 30 days. Shows event details and metadata.

Resource View

Horizontal timeline for scheduling across resources (rooms, people, equipment).

Recurring Events

const recurringEvent: CalendarEvent = {
  id: '1',
  title: 'Weekly Standup',
  start: new Date(),
  end: new Date(Date.now() + 3600000),
  recurrence: {
    freq: 'WEEKLY',
    interval: 1,
    count: 10, // or use 'until' for end date
  },
};

Timezone Support

<Scheduler
  timezone="Europe/Paris"
  onTimezoneChange={(tz) => console.log('Timezone:', tz)}
/>

Internationalization

import { fr } from 'date-fns/locale';

const frenchTranslations = {
  today: "Aujourd'hui",
  month: 'Mois',
  week: 'Semaine',
  day: 'Jour',
  agenda: 'Agenda',
  createEvent: 'Créer un événement',
  // ... more translations
};

<Scheduler
  language="fr"
  locale={fr}
  translations={frenchTranslations}
/>

Theming

<Scheduler
  isDarkMode={darkMode}
  onThemeToggle={() => setDarkMode(!darkMode)}
  theme={{
    colors: {
      primary: '#3b82f6',
      background: '#ffffff',
      foreground: '#1a1a1a',
    },
    fontFamily: 'Inter, sans-serif',
    borderRadius: '12px',
  }}
/>

Resource Scheduling

const resources: Resource[] = [
  { id: 'room-a', label: 'Conference Room A', color: '#3b82f6' },
  { id: 'room-b', label: 'Conference Room B', color: '#10b981' },
];

<Scheduler
  view="resource"
  resources={resources}
  events={events}
/>

Multiple Calendars

const calendars = [
  { id: 'work', label: 'Work', color: '#3b82f6', active: true },
  { id: 'personal', label: 'Personal', color: '#10b981', active: true },
];

<Scheduler
  calendars={calendars}
  onCalendarToggle={(id, active) => {
    // Toggle calendar visibility
  }}
/>

Custom Event Form

<Scheduler
  renderEventForm={({ isOpen, onClose, event, onSave, onDelete }) => (
    <MyCustomForm
      open={isOpen}
      onClose={onClose}
      event={event}
      onSave={onSave}
      onDelete={onDelete}
    />
  )}
/>

Exports

// Components
export { Scheduler } from 'calendarkit-pro';

// Types
export type {
  CalendarEvent,
  CalendarProps,
  CalendarTheme,
  CalendarTranslations,
  ViewType,
  EventType,
  Resource,
  EventReminder,
  EventAttachment,
  ThemeColors,
} from 'calendarkit-pro';

// Utilities
export { cn } from 'calendarkit-pro';

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT License - see LICENSE for details.

Links

• GitHub
• Issues
• CalendarKit