Views
Agenda View
A scrollable list of upcoming events for the next 30 days.
Agenda View
The Agenda view ('agenda') displays a flat, date-grouped list of events for the next 30 days starting from the current date. It is ideal for a "what's coming up" overview.
Usage
<ProScheduler
view="agenda"
events={events}
date={date}
onDateChange={setDate}
/>Features
- Date groups — events are grouped by date. The group header shows the day name, numeric date, and relative label (e.g. "Today", "Tomorrow").
- Event count badge — the header shows a live count of upcoming events in the next 30-day window.
- Empty state — when there are no events, a built-in empty state is shown. You can replace it with
renderEmptyState. - Read-only friendly — in
readOnlymode, clicking events only opens the detail view.
Custom empty state
Replace the default empty state with your own component:
<ProScheduler
view="agenda"
renderEmptyState={({ view, onCreateEvent }) => (
<div className="flex flex-col items-center justify-center h-full gap-4">
<p className="text-muted-foreground text-lg">No upcoming events</p>
<button
onClick={onCreateEvent}
className="px-4 py-2 bg-blue-500 text-white rounded-lg"
>
Create your first event
</button>
</div>
)}
...
/>Example: Agenda with search filtering
'use client';
import { useState, useMemo } from 'react';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent } from 'calendarkit-prov2';
import { addDays, addHours } from 'date-fns';
const today = new Date();
const sampleEvents: CalendarEvent[] = [
{
id: '1',
title: 'Sprint Planning',
start: addHours(today, 2),
end: addHours(today, 4),
color: '#3b82f6',
},
{
id: '2',
title: 'Design Workshop',
start: addHours(addDays(today, 1), 10),
end: addHours(addDays(today, 1), 12),
color: '#8b5cf6',
},
{
id: '3',
title: 'Client Demo',
start: addHours(addDays(today, 3), 14),
end: addHours(addDays(today, 3), 15),
color: '#10b981',
},
{
id: '4',
title: 'Team Retrospective',
start: addHours(addDays(today, 7), 15),
end: addHours(addDays(today, 7), 16),
color: '#f59e0b',
},
];
export default function AgendaCalendar() {
const [events, setEvents] = useState<CalendarEvent[]>(sampleEvents);
const [query, setQuery] = useState('');
// Client-side search filter
const filtered = useMemo(
() =>
query
? events.filter((e) => e.title.toLowerCase().includes(query.toLowerCase()))
: events,
[events, query]
);
return (
<div className="flex flex-col gap-4">
<input
type="search"
placeholder="Search events..."
value={query}
onChange={(e) => setQuery(e.target.value)}
className="px-3 py-2 border rounded-lg text-sm w-64"
/>
<div className="h-[600px] border rounded-xl overflow-hidden">
<ProScheduler
view="agenda"
events={filtered}
date={today}
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))
}
/>
</div>
</div>
);
}