Views
Day View
A single-day hourly grid with an 80px-per-hour time axis.
Day View
The Day view ('day') shows a single day with an 80px-per-hour time axis. It is ideal for viewing a packed schedule in fine detail.
Usage
<ProScheduler
view="day"
date={date}
onDateChange={setDate}
initialScrollHour={8}
events={events}
/>Differences from Week view
| Feature | Week view | Day view |
|---|---|---|
| Columns | 7 (Mon–Sun) | 1 |
| Hour height | 60 px | 80 px |
| All-day row | Yes | Yes |
| Drag & Drop | Yes | Yes |
| Resize | Yes | Yes |
The larger hour height in Day view makes it easier to see short events (e.g. 15-minute slots).
Example: Focused daily schedule
'use client';
import { useState } from 'react';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent } from 'calendarkit-prov2';
import { addHours } from 'date-fns';
const today = new Date();
today.setHours(0, 0, 0, 0);
const events: CalendarEvent[] = [
{
id: '1',
title: 'Morning Standup',
start: addHours(today, 9),
end: addHours(today, 9.5),
color: '#3b82f6',
},
{
id: '2',
title: 'Deep Work',
start: addHours(today, 10),
end: addHours(today, 12),
color: '#8b5cf6',
},
{
id: '3',
title: 'Lunch',
start: addHours(today, 12),
end: addHours(today, 13),
color: '#f59e0b',
},
{
id: '4',
title: 'Code Review',
start: addHours(today, 14),
end: addHours(today, 15),
color: '#3b82f6',
},
{
id: '5',
title: '1:1 with Manager',
start: addHours(today, 15),
end: addHours(today, 15.5),
color: '#10b981',
},
{
id: '6',
title: 'Team Retrospective',
start: addHours(today, 16),
end: addHours(today, 17),
color: '#3b82f6',
},
];
export default function DayCalendar() {
const [allEvents, setAllEvents] = useState<CalendarEvent[]>(events);
const [date, setDate] = useState(new Date());
return (
<div className="h-[750px] border rounded-xl overflow-hidden">
<ProScheduler
view="day"
events={allEvents}
date={date}
onDateChange={setDate}
initialScrollHour={8}
onEventCreate={(e) =>
setAllEvents((prev) => [...prev, { ...e, id: crypto.randomUUID() } as CalendarEvent])
}
onEventUpdate={(updated) =>
setAllEvents((prev) => prev.map((e) => (e.id === updated.id ? updated : e)))
}
onEventDelete={(id) =>
setAllEvents((prev) => prev.filter((e) => e.id !== id))
}
onEventDrop={(event, start, end) =>
setAllEvents((prev) =>
prev.map((e) => (e.id === event.id ? { ...e, start, end } : e))
)
}
/>
</div>
);
}