Event Calendar
A feature-rich calendar component with month, week, day, and agenda views. Manage recurring events, multiple calendars, iCalendar import/export, and drag-and-drop scheduling — all rendered at 60fps.
Features
Multiple Views
Month, week, day, and agenda views. Responsive layout automatically switches week to day on mobile.
Recurring Events
Full RFC 5545 RRULE support — daily, weekly, monthly, and yearly recurrence with exceptions and overrides.
Drag & Drop
Move and resize events across days and time slots. Create new events by dragging on empty areas.
Multiple Calendars
Organize events into color-coded calendars with independent visibility toggles.
iCalendar Support
Import and export .ics files for interoperability with Google Calendar, Outlook, and Apple Calendar.
Mini Calendar & Sidebar
Built-in mini calendar for date navigation and calendar list for managing calendar visibility.
All-day Events
Dedicated all-day section in week and day views. Multi-day events span across columns.
Item Types
Nine built-in types — meetings, tasks, appointments, deadlines, holidays, birthdays, reminders, and more.
Custom Rendering
Override entry appearance with custom render functions. Full control over content and styling.
Export
Export to PNG, PDF, CSV, Excel, and iCalendar (.ics) format.
Undo & Redo
Full undo/redo for all operations — moves, resizes, additions, and deletions.
Keyboard Navigation
Full keyboard support for accessibility. Navigate, select, and edit without a mouse.
Quick start
Add a calendar to your app in a few lines of code.
import { useRef, useEffect } from 'react';
import { EventCalendar, EventCalendarRef } from '@timelinekit/react';
import '@timelinekit/core/styles';
function day(offset: number, hour?: number) {
const d = new Date();
d.setDate(d.getDate() + offset);
if (hour !== undefined) d.setHours(hour, 0, 0, 0);
return d.toISOString();
}
function date(offset: number) {
const d = new Date();
d.setDate(d.getDate() + offset);
return d.toISOString().slice(0, 10);
}
export default function App() {
const ref = useRef<EventCalendarRef>(null);
useEffect(() => {
ref.current?.load(JSON.stringify({
calendars: [
{ id: 'c1', name: 'Work', color: 0, isVisible: true, isDefault: true },
{ id: 'c2', name: 'Personal', color: 3, isVisible: true },
],
items: [
{ id: '1', calendarId: 'c1', title: 'Sprint Planning',
startTime: day(0, 9), endTime: day(0, 11), type: 'meeting' },
{ id: '2', calendarId: 'c1', title: 'Code Review',
startTime: day(1, 14), endTime: day(1, 15), type: 'appointment' },
{ id: '3', calendarId: 'c2', title: 'Vacation',
startTime: date(3), endTime: date(7), isAllDay: true, type: 'holiday' },
],
}));
}, []);
return (
<div style={{ height: '100vh' }}>
<EventCalendar ref={ref} />
</div>
);
}