Features
Timezone Support
Display events in any IANA timezone with a built-in timezone selector.
Timezone Support
CalendarKit Pro supports per-scheduler IANA timezones via the timezone prop. The time axis, event positions, and the all-day boundary all respect the configured timezone.
Basic usage
const [timezone, setTimezone] = useState('America/New_York');
<ProScheduler
timezone={timezone}
onTimezoneChange={setTimezone}
events={events}
...
/>The sidebar shows a timezone selector with local time display. Users can pick from a list of common IANA timezones.
IANA timezone strings
Use standard IANA timezone identifiers:
// Examples
'UTC'
'America/New_York'
'America/Los_Angeles'
'Europe/London'
'Europe/Istanbul'
'Europe/Paris'
'Asia/Tokyo'
'Asia/Shanghai'
'Australia/Sydney'
'Pacific/Auckland'Events and timezone
Store your events in UTC (JavaScript Date objects are always UTC internally). The timezone prop tells the calendar how to display them:
// This event is at 09:00 UTC
const event: CalendarEvent = {
id: '1',
title: 'Global Team Call',
start: new Date('2026-07-21T09:00:00Z'), // UTC
end: new Date('2026-07-21T10:00:00Z'),
};
// With timezone="America/New_York" it shows at 05:00 AM
// With timezone="Europe/Istanbul" it shows at 12:00 PM
// With timezone="Asia/Tokyo" it shows at 06:00 PMHide the timezone selector
If you don't need timezone switching, omit both timezone and onTimezoneChange. The sidebar will not show the timezone picker.
Full example: multi-timezone
'use client';
import { useState } from 'react';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent } from 'calendarkit-prov2';
// Events stored in UTC
const events: CalendarEvent[] = [
{
id: '1',
title: 'New York Opening',
start: new Date('2026-07-21T13:30:00Z'), // 09:30 AM EST
end: new Date('2026-07-21T14:00:00Z'),
color: '#3b82f6',
},
{
id: '2',
title: 'London Standup',
start: new Date('2026-07-21T09:00:00Z'), // 10:00 AM BST
end: new Date('2026-07-21T09:30:00Z'),
color: '#10b981',
},
{
id: '3',
title: 'Tokyo All-Hands',
start: new Date('2026-07-21T01:00:00Z'), // 10:00 AM JST
end: new Date('2026-07-21T02:00:00Z'),
color: '#f59e0b',
},
];
const TIMEZONES = [
{ label: '🇺🇸 New York', value: 'America/New_York' },
{ label: '🇬🇧 London', value: 'Europe/London' },
{ label: '🇹🇷 Istanbul', value: 'Europe/Istanbul' },
{ label: '🇯🇵 Tokyo', value: 'Asia/Tokyo' },
{ label: '🌍 UTC', value: 'UTC' },
];
export default function TimezoneExample() {
const [timezone, setTimezone] = useState('UTC');
return (
<div>
{/* External timezone switcher */}
<div className="flex gap-2 mb-4 flex-wrap">
{TIMEZONES.map((tz) => (
<button
key={tz.value}
onClick={() => setTimezone(tz.value)}
className={`px-3 py-1.5 text-sm rounded-lg border transition-colors ${
timezone === tz.value
? 'bg-blue-500 text-white border-blue-500'
: 'border-zinc-300 hover:bg-zinc-100'
}`}
>
{tz.label}
</button>
))}
</div>
<div className="h-[700px] border rounded-xl overflow-hidden">
<ProScheduler
view="day"
events={events}
date={new Date('2026-07-21')}
timezone={timezone}
onTimezoneChange={setTimezone}
language="en"
initialScrollHour={7}
/>
</div>
</div>
);
}