Calendarkit Pro V2

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 APIs

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 client

Custom 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'
  }}
/>

On this page