Now with Resource View & Recurring Events
The React Calendar
You'll Actually Enjoy
Build scheduling features in minutes, not months. A beautifully crafted React calendar component with drag & drop, dark mode, and full TypeScript support.
Demo
Experience the Difference
Try both versions below. Create events, switch views, and see why developers choose Pro.
January 2026
Pro Features
Easy to Integrate
Copy-paste ready code examples. Works with any React framework and backend.
import { BasicScheduler } from '@calendarkit/react';
import { useState } from 'react';
export default function MyCalendar() {
const [events, setEvents] = useState([
{
id: '1',
title: 'Team Meeting',
start: new Date(2025, 0, 15, 10, 0),
end: new Date(2025, 0, 15, 11, 0),
color: '#3b82f6'
},
{
id: '2',
title: 'Lunch Break',
start: new Date(2025, 0, 15, 12, 0),
end: new Date(2025, 0, 15, 13, 0),
color: '#10b981'
}
]);
return (
<BasicScheduler
events={events}
onEventClick={(event) => console.log('Clicked:', event.title)}
onTimeSlotClick={(date) => {
const newEvent = {
id: Date.now().toString(),
title: 'New Event',
start: date,
end: new Date(date.getTime() + 60 * 60 * 1000),
color: '#8b5cf6'
};
setEvents([...events, newEvent]);
}}
/>
);
}Use Cases
Built for Every Scheduling Need
From booking systems to project management, CalendarKit adapts to your use case with flexible views and customizable features.
Project Management
Sprint planning, task scheduling, and deadline tracking for agile teams.
Booking & Appointments
Medical appointments, salon bookings, and consultation scheduling.
Team Collaboration
Meeting coordination, resource allocation, and room booking systems.
Event Management
Conference schedules, event planning, and agenda management.
HR & Workforce
Shift scheduling, time tracking, and employee availability management.
Education
Class schedules, course planning, and academic calendar systems.
Time Savings
Stop Building Calendars.
Start Shipping Features.
Building a production-ready calendar scheduler is complex and time-consuming. See how CalendarKit gets you to market faster than building from scratch or using AI.
Build from Scratch
Solo Developer
Building a production-ready calendar scheduler from scratch requires significant time investment.
Build with AI
Developer + AI Tools
AI can accelerate development, but you still need to integrate, test, and refine everything.
Use CalendarKit
Production-Ready Solution
Install, configure, and you're ready to ship. Focus on your business logic, not reinventing calendars.
Why Choose CalendarKit?
Compare our pricing and features against the leading calendar solutions on the market.
| Feature | FullCalendar $480 1 - 10 devs/team | React Big Calendar $680 per dev/team | CalendarKit Pro Free one-time forever |
|---|---|---|---|
| Pricing Model | Per developer license | Per developer/team | One-time payment |
| Free Open Source Version | |||
| Month/Week/Day Views | |||
| Drag & Drop Events | Basic only | ||
| Agenda View | |||
| Resource/Timeline View | +$200 addon | ||
| Recurring Events (RRULE) | +$150 addon | ||
| Built-in Dark Mode | Manual CSS | Manual CSS | |
| TypeScript First | Partial | ||
| Timezone Support | Manual | ||
| Multi-language (i18n) | Manual | ||
| Full Source Code Access | |||
| Lifetime Updates | 1 year only | 1 year only | |
| Email Support | Forum only | Community | |
| Total Cost (5 developers) | $2,400 + renewals | $3,400 + renewals | Free forever |
Pricing
100% Free & Open Source
Both Basic and Pro are now free and open source. Install from npm and start building.
BasicOpen Source
Open source React calendar component on npm.
- Month / Week / Day views
- Event creation & editing
- Event overlap detection
- Custom event renderer
- Week start configuration
- Mobile swipe gestures
- Loading skeletons & empty states
- Calendar filtering
- Full TypeScript types
- MIT License
ProOpen SourceMost Popular
Professional features for production apps. Now open source!
- Everything in Basic
- Agenda & Resource views
- Drag & drop + Event resizing
- ICS Import/Export
- Context menus (right-click)
- Mobile swipe gestures
- Skeleton loading & empty states
- Notification reminders
- Timezone support
- Dark / Light mode (polished)
- Multi-language (i18n)
- Recurring events (RRULE)
- Guest management & attachments
Have questions? Check our FAQ or contact us.
Frequently Asked Questions
Everything you need to know about CalendarKit. Can't find what you're looking for? Contact support
Basic includes month, week, and day views with event creation and calendar filtering. Pro adds drag & drop, agenda view, resource view, timezone support, dark mode, multi-language support (i18n), recurring events, guest management, and file attachments.
Yes! Both Basic and Pro come with a commercial license. You can use CalendarKit in unlimited projects, including client work and SaaS applications.
Yes, you receive the full source code with your purchase. This allows you to customize components, modify styles, and integrate deeply with your application.
Currently, CalendarKit supports React 18+ and Next.js. Vue, Angular, Svelte, and Solid support is coming soon with our Universal license.
Pro includes built-in support for recurring events using RRULE-style configuration. Simply add a recurrence object to your event with freq (DAILY, WEEKLY, MONTHLY, YEARLY), interval, and either count or until date.
Yes! Use the renderEventForm prop to provide your own custom event form component. You receive all necessary props including event data, save/delete handlers, and modal state.
Pro includes full timezone support using date-fns-tz. Events automatically adjust when users change timezones, and the timezone picker shows all IANA timezone identifiers.
Use the translations prop to override any UI strings. Pro includes built-in English and French translations. You can also use date-fns locales for date formatting in any language.
CalendarKit is built with TypeScript from the ground up. All components, props, and types are fully typed with excellent IDE autocomplete support.
CalendarKit is headless when it comes to data - you control the events array. Use the onEventCreate, onEventUpdate, onEventDelete, and onEventDrop callbacks to sync with any REST API, GraphQL, or real-time backend.