CalendarEvent Model
Full reference for the CalendarEvent interface and related types.
CalendarEvent Model
All events displayed in the calendar conform to the CalendarEvent interface.
Interface
interface CalendarEvent {
// Required
id: string;
title: string;
start: Date;
end: Date;
// Display
description?: string;
color?: string; // CSS color string, e.g. '#3b82f6'
allDay?: boolean;
icon?: string; // Emoji or short string shown in compact event chips
badge?: EventBadge; // Full badge object (client-side JSX)
badgeId?: BuiltInEventBadgeId; // JSON-safe key from API (recommended)
// Organization
calendarId?: string; // Matches an id in the `calendars` prop
type?: string; // Matches an id in the `eventTypes` prop
resourceId?: string; // Matches a resource id (Resource view)
// Rich content
attachments?: EventAttachment[];
guests?: string[]; // Array of email addresses
reminders?: EventReminder[];
// Recurrence
recurrence?: {
freq: 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY';
interval?: number; // e.g. 2 = every 2 weeks
count?: number; // end after N occurrences
until?: Date; // end on this date
byweekday?: number[];// 0=Monday … 6=Sunday
};
// Extensible — any extra fields are passed through
[key: string]: any;
}Minimal event
const event: CalendarEvent = {
id: '1',
title: 'Team Standup',
start: new Date('2026-07-21T09:00:00'),
end: new Date('2026-07-21T09:30:00'),
};Event with all common fields
const event: CalendarEvent = {
id: 'evt-001',
title: 'Product Review',
start: new Date('2026-07-22T10:00:00'),
end: new Date('2026-07-22T12:00:00'),
description: 'Quarterly product review session',
color: '#8b5cf6',
allDay: false,
calendarId: 'work',
type: 'meeting',
resourceId: 'room-a',
icon: '📋',
guests: ['alice@example.com', 'bob@example.com'],
reminders: [
{ id: 'r1', type: 'notification', time: 30, label: '30 minutes before' },
],
attachments: [
{ id: 'a1', name: 'Agenda.pdf', type: 'file', size: '230 KB' },
],
};Recurring event
Use the recurrence field to define repeating events. The scheduler automatically expands recurring events into individual occurrences for the visible date range.
// Every Monday at 9 AM for 10 weeks
const standup: CalendarEvent = {
id: 'standup',
title: 'Weekly Standup',
start: new Date('2026-07-21T09:00:00'),
end: new Date('2026-07-21T09:30:00'),
recurrence: {
freq: 'WEEKLY',
interval: 1,
count: 10,
byweekday: [0], // 0 = Monday
},
};
// Daily gym session until end of August
const gym: CalendarEvent = {
id: 'gym',
title: 'Gym',
start: new Date('2026-07-01T18:00:00'),
end: new Date('2026-07-01T19:00:00'),
recurrence: {
freq: 'DAILY',
until: new Date('2026-08-31'),
},
};
// First Monday of every month (byweekday with MONTHLY)
const monthlyMeeting: CalendarEvent = {
id: 'monthly',
title: 'All-Hands',
start: new Date('2026-07-07T14:00:00'),
end: new Date('2026-07-07T15:00:00'),
recurrence: {
freq: 'MONTHLY',
interval: 1,
},
};EventBadge / badgeId
Optional badge rendered in the top-left corner of Week view event cards. See Event Badges for full details.
interface EventBadge {
icon: React.ReactNode;
name: string;
}
// On CalendarEvent:
badge?: EventBadge;
badgeId?: BuiltInEventBadgeId; // preferred for JSON APIsFrom the backend (badgeId) — recommended
Icons cannot travel over JSON. Send a string key; Week view resolves icon + label automatically.
{
"id": "3",
"title": "Paket: 10. Ders",
"start": "2026-07-21T14:00:00",
"end": "2026-07-21T15:00:00",
"badgeId": "packageLesson"
}const event: CalendarEvent = {
id: api.id,
title: api.title,
start: new Date(api.start),
end: new Date(api.end),
badgeId: api.badgeId, // "privateLesson" | "groupLesson" | "packageLesson" | …
};All badgeId values:
[
{ "badgeId": "privateLesson", "name": "Özel Ders" },
{ "badgeId": "groupLesson", "name": "Grup Ders" },
{ "badgeId": "packageLesson", "name": "Paket Ders" },
{ "badgeId": "online", "name": "Online" },
{ "badgeId": "inPerson", "name": "Yüz Yüze" },
{ "badgeId": "homeVisit", "name": "Evde" },
{ "badgeId": "trial", "name": "Deneme" },
{ "badgeId": "makeup", "name": "Telafi" },
{ "badgeId": "exam", "name": "Sınav" },
{ "badgeId": "workshop", "name": "Workshop" },
{ "badgeId": "priority", "name": "Öncelikli" },
{ "badgeId": "holiday", "name": "Tatil" },
{ "badgeId": "cancelled", "name": "İptal" },
{ "badgeId": "listening", "name": "Dinleme" }
]Client-only presets (EVENT_BADGES)
import { EVENT_BADGES } from 'calendarkit-prov2';
badge: EVENT_BADGES.privateLesson // only when you build the event on the clientCustom badge
import { Video } from 'lucide-react';
badge: {
icon: <Video className="w-2.5 h-2.5" />,
name: 'Online',
}EventAttachment
interface EventAttachment {
id: string;
name: string;
url?: string;
type: 'file' | 'link' | 'image';
size?: string; // human-readable, e.g. '230 KB'
}const attachments: EventAttachment[] = [
{ id: 'a1', name: 'Proposal.pdf', type: 'file', size: '1.2 MB' },
{ id: 'a2', name: 'Figma Design', url: 'https://figma.com/...', type: 'link' },
{ id: 'a3', name: 'Screenshot.png', url: '/screenshots/screen.png', type: 'image' },
];EventReminder
interface EventReminder {
id: string;
type: 'notification' | 'email';
time: number; // minutes before the event
label?: string; // display label, e.g. '30 minutes before'
}const reminders: EventReminder[] = [
{ id: 'r1', type: 'notification', time: 0, label: 'At time of event' },
{ id: 'r2', type: 'notification', time: 15, label: '15 minutes before' },
{ id: 'r3', type: 'email', time: 1440, label: '1 day before' },
];All-day events
Set allDay: true to mark an event as spanning the full day. All-day events appear in the all-day row at the top of the Week and Day views, and as full-cell blocks in Month view.
const holiday: CalendarEvent = {
id: 'holiday-1',
title: 'Company Holiday',
start: new Date('2026-07-04'),
end: new Date('2026-07-05'),
allDay: true,
color: '#f59e0b',
};Extending CalendarEvent
You can add any extra fields to a CalendarEvent — they will be passed through the scheduler and available in callbacks:
const customEvent: CalendarEvent = {
id: 'my-event',
title: 'Sprint Review',
start: new Date(),
end: new Date(),
// Custom fields
sprintId: 'sprint-42',
assigneeIds: ['user-1', 'user-2'],
priority: 'high',
};
// Access custom fields in callbacks
<ProScheduler
onEventClick={(event) => {
console.log(event.sprintId); // 'sprint-42'
console.log(event.priority); // 'high'
}}
/>