CalendarKit Pro supports 15+ languages including RTL, with per-scheduler locale and custom translation overrides.

Internationalization

CalendarKit Pro ships with 15 built-in languages and supports RTL (right-to-left) layouts. You can also override individual strings without replacing the entire translation.

Supported languages

Code	Language	Native	Flag	RTL
`tr`	Turkish	Türkçe	🇹🇷	No
`en`	English	English	🇬🇧	No
`fr`	French	Français	🇫🇷	No
`de`	German	Deutsch	🇩🇪	No
`es`	Spanish	Español	🇪🇸	No
`it`	Italian	Italiano	🇮🇹	No
`pt`	Portuguese	Português	🇧🇷	No
`ar`	Arabic	العربية	🇸🇦	Yes
`zh`	Chinese	中文	🇨🇳	No
`ja`	Japanese	日本語	🇯🇵	No
`ko`	Korean	한국어	🇰🇷	No
`ru`	Russian	Русский	🇷🇺	No
`nl`	Dutch	Nederlands	🇳🇱	No
`pl`	Polish	Polski	🇵🇱	No
`sv`	Swedish	Svenska	🇸🇪	No

Basic usage

Pass a language code to switch the UI language:

import { ProScheduler, DATE_FNS_LOCALES } from 'calendarkit-prov2';
import type { LanguageCode } from 'calendarkit-prov2';

const [language, setLanguage] = useState<LanguageCode>('en');

<ProScheduler
  language={language}
  onLanguageChange={setLanguage}
  locale={DATE_FNS_LOCALES[language]}  // date-fns locale for date formatting
  ...
/>

The locale prop controls how dates are formatted (e.g. "Monday, July 21" vs "Lundi 21 juillet"). Import it from DATE_FNS_LOCALES keyed by the language code.

Hide the language switcher

If you want to lock the language without showing the dropdown to users:

<ProScheduler
  language="fr"
  hideLanguageSwitcher
  ...
/>

Override individual strings

Use the translations prop to override specific strings without replacing everything:

<ProScheduler
  language="en"
  translations={{
    // Override just these strings
    createEvent: 'Add Appointment',
    editEvent: 'Edit Appointment',
    delete: 'Remove',
    today: 'Jump to Today',
  }}
  ...
/>

Custom full translation

You can provide a complete custom translation by implementing all CalendarTranslations fields:

import type { CalendarTranslations } from 'calendarkit-prov2';

const myTranslations: CalendarTranslations = {
  today: 'Bugün',
  month: 'Ay',
  week: 'Hafta',
  // ... all other fields
};

// Option 1: via translations prop (merged on top of a base language)
<ProScheduler translations={myTranslations} language="tr" ... />

// Option 2: via getTranslations utility
import { getTranslations } from 'calendarkit-prov2';
const t = getTranslations('en', { createEvent: 'New Appointment' });

Controlled language switcher

'use client';

import { useState } from 'react';
import { ProScheduler, DATE_FNS_LOCALES, LANGUAGE_META } from 'calendarkit-prov2';
import type { LanguageCode } from 'calendarkit-prov2';

const SUPPORTED: LanguageCode[] = ['en', 'fr', 'de', 'es', 'ar'];

export default function I18nExample() {
  const [language, setLanguage] = useState<LanguageCode>('en');

  return (
    <div>
      {/* External language picker */}
      <div className="flex gap-2 mb-4 flex-wrap">
        {SUPPORTED.map((code) => {
          const meta = LANGUAGE_META[code];
          return (
            <button
              key={code}
              onClick={() => setLanguage(code)}
              className={`px-3 py-1.5 text-sm rounded-lg border transition-colors ${
                language === code
                  ? 'bg-blue-500 text-white border-blue-500'
                  : 'border-zinc-300 hover:bg-zinc-100'
              }`}
            >
              {meta.flag} {meta.native}
            </button>
          );
        })}
      </div>

      <div className="h-[700px] border rounded-xl overflow-hidden">
        <ProScheduler
          view="week"
          events={[]}
          date={new Date()}
          language={language}
          onLanguageChange={setLanguage}
          locale={DATE_FNS_LOCALES[language]}
          hideLanguageSwitcher // we use our own picker above
        />
      </div>
    </div>
  );
}

LANGUAGE_META reference

import { LANGUAGE_META } from 'calendarkit-prov2';

// Each entry has:
LANGUAGE_META['en'] = {
  native:  'English',   // display name in native language
  english: 'English',   // display name in English
  flag:    '🇬🇧',
  rtl:     undefined,   // true only for Arabic
};

Internationalization (i18n)