Calendarkit Pro V2
API Reference

Exports

All named exports from the calendarkit-prov2 package.

Exports

Everything exported from calendarkit-prov2:

Components

import { ProScheduler, Scheduler } from 'calendarkit-prov2';
// ProScheduler — primary export
// Scheduler — backward-compatible alias for v1 users

Types

import type {
  // Component props
  CalendarProps,
  ProSchedulerProps,   // alias for CalendarProps

  // Event & related
  CalendarEvent,
  EventBadge,
  BuiltInEventBadgeId,
  EventAttachment,
  EventReminder,

  // UI metadata
  ViewType,
  Resource,
  EventType,
  CustomView,
  SidebarMenuItem,

  // Theme
  CalendarTheme,
  ThemeColors,

  // i18n
  CalendarTranslations,
  LanguageCode,
} from 'calendarkit-prov2';

Event badge presets

import {
  EVENT_BADGES,          // Record<BuiltInEventBadgeId, EventBadge> (TR labels)
  EVENT_BADGE_ICONS,     // icon nodes only
  getEventBadge,         // (id, language?, name?) => EventBadge
  resolveEventBadge,     // (event, language?) => EventBadge | undefined
  isBuiltInEventBadgeId, // type guard for API strings
} from 'calendarkit-prov2';

// Prefer badgeId from the API — Week view resolves it automatically:
// { badgeId: 'packageLesson' }

See Event Badges for the full list of built-in ids.

Locale utilities

import {
  LANGUAGE_META,   // Record<LanguageCode, { native, english, flag, rtl? }>
  LOCALES,         // Record<LanguageCode, CalendarTranslations>
  DATE_FNS_LOCALES,// Record<LanguageCode, date-fns Locale>
  getTranslations, // (lang, overrides?) => CalendarTranslations
} from 'calendarkit-prov2';

LANGUAGE_META

Metadata for each supported language — useful for building a custom language switcher UI:

const meta = LANGUAGE_META['en'];
// { native: 'English', english: 'English', flag: '🇬🇧' }

const arMeta = LANGUAGE_META['ar'];
// { native: 'العربية', english: 'Arabic', flag: '🇸🇦', rtl: true }

// Iterate all supported languages
Object.entries(LANGUAGE_META).forEach(([code, meta]) => {
  console.log(`${meta.flag} ${meta.native} (${code})`);
});

DATE_FNS_LOCALES

Map from LanguageCode to a date-fns Locale object. Pass to the locale prop for date formatting:

import { DATE_FNS_LOCALES } from 'calendarkit-prov2';

<ProScheduler
  language="fr"
  locale={DATE_FNS_LOCALES['fr']}  // formats dates as "lundi 21 juillet 2026"
  ...
/>

getTranslations

Build a full CalendarTranslations object with optional overrides:

import { getTranslations } from 'calendarkit-prov2';

// Base Turkish translations
const tr = getTranslations('tr');

// English with custom strings
const custom = getTranslations('en', {
  createEvent: 'New Appointment',
  editEvent:   'Edit Appointment',
  delete:      'Remove',
});

Utilities

import { cn } from 'calendarkit-prov2';
// Tailwind class merger (wraps clsx + tailwind-merge)
cn('px-4 py-2', condition && 'bg-blue-500', 'rounded-lg');
// → 'px-4 py-2 bg-blue-500 rounded-lg'

CSS

// Import once at your app root
import 'calendarkit-prov2/calendarkit.css';

This file provides:

  • CSS variable tokens for light and dark mode (:root and .dark)
  • Base component styles
  • Font and spacing resets

On this page