Views
Week View
A 7-column hourly grid — the most commonly used calendar view.
Week View
The Week view ('week') renders a 7-column grid (Monday–Sunday) with an hourly time axis on the left. It is the default power-user view for detailed scheduling.
Usage
<ProScheduler
view="week"
events={events}
date={date}
onDateChange={setDate}
initialScrollHour={9} // scroll to 9 AM on mount
/>Features
- Hourly grid — 24-hour time axis, scrollable vertically.
- Multi-day events — events spanning multiple days appear in the all-day row at the top.
- Event badges — optional
badgeIdfrom the API (e.g."packageLesson") or a fullbadgeobject; shown in the top-left corner of event cards. See Event Badges. - Drag & drop — move events to different times or days by dragging. Snap: 15-minute intervals.
- Resize — drag the bottom edge of an event to change its end time.
- 15-minute snap — events snap to 15-minute grid lines during drag and resize.
- Initial scroll — use
initialScrollHourto control the initial scroll position (default: 8). - Reverse time — use
reverseTimeto flip the axis (23:00 at top). Persisted inlocalStorage. - Swipe navigation — on touch devices, swipe left/right to navigate weeks.
- Timezone — all times are displayed in the configured timezone.
Initial scroll hour
// Scroll to 9 AM on mount
<ProScheduler
view="week"
initialScrollHour={9}
...
/>Reverse time axis
// Show 23:00 at the top, 00:00 at the bottom
<ProScheduler
view="week"
reverseTime={true}
...
/>Full example
'use client';
import { useState } from 'react';
import { ProScheduler, DATE_FNS_LOCALES } from 'calendarkit-prov2';
import type { CalendarEvent, LanguageCode } from 'calendarkit-prov2';
import { addHours, addDays, startOfWeek } from 'date-fns';
const weekStart = startOfWeek(new Date());
// badgeId mirrors a JSON API payload — Week view resolves icon + label
const defaultEvents: CalendarEvent[] = [
{
id: '1',
title: 'Ayşe Yılmaz',
start: addHours(addDays(weekStart, 1), 9),
end: addHours(addDays(weekStart, 1), 10),
color: '#3b82f6',
badgeId: 'privateLesson',
},
{
id: '2',
title: 'A1 İngilizce',
start: addHours(addDays(weekStart, 2), 14),
end: addHours(addDays(weekStart, 2), 15.5),
color: '#8b5cf6',
badgeId: 'groupLesson',
},
{
id: '3',
title: 'Paket: 10. Ders',
start: addHours(addDays(weekStart, 6), 8),
end: addHours(addDays(weekStart, 6), 12),
color: '#10b981',
badgeId: 'packageLesson',
},
];
export default function WeekCalendar() {
const [events, setEvents] = useState<CalendarEvent[]>(defaultEvents);
const [date, setDate] = useState(new Date());
const [lang] = useState<LanguageCode>('en');
return (
<div className="h-[700px] border rounded-xl overflow-hidden">
<ProScheduler
view="week"
events={events}
date={date}
onDateChange={setDate}
initialScrollHour={9}
language={lang}
locale={DATE_FNS_LOCALES[lang]}
onEventCreate={(e) =>
setEvents((prev) => [...prev, { ...e, id: crypto.randomUUID() } as CalendarEvent])
}
onEventUpdate={(updated) =>
setEvents((prev) => prev.map((e) => (e.id === updated.id ? updated : e)))
}
onEventDelete={(id) =>
setEvents((prev) => prev.filter((e) => e.id !== id))
}
onEventDrop={(event, start, end) =>
setEvents((prev) =>
prev.map((e) => (e.id === event.id ? { ...e, start, end } : e))
)
}
onEventResize={(event, start, end) =>
setEvents((prev) =>
prev.map((e) => (e.id === event.id ? { ...e, start, end } : e))
)
}
/>
</div>
);
}