Features
Read-Only Mode
Disable all editing interactions with a single readOnly prop.
Read-Only Mode
Pass readOnly to disable all editing capabilities. In read-only mode:
- Drag & drop is disabled
- Event resize is disabled
- Clicking events opens a detail view (no edit form)
- The "Create Event" button and FAB are hidden (you can also hide only the FAB with
hideFab— see Mobile FAB) - Time slot clicks do nothing
- Context menu edit / delete options are hidden
Usage
<ProScheduler
readOnly
events={events}
view="week"
...
/>Read-only display calendar
'use client';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent } from 'calendarkit-prov2';
import { addHours, addDays, startOfWeek } from 'date-fns';
const weekStart = startOfWeek(new Date());
// Public events — displayed but not editable
const publicEvents: CalendarEvent[] = [
{
id: '1',
title: 'Company All-Hands',
start: addHours(addDays(weekStart, 1), 10),
end: addHours(addDays(weekStart, 1), 11),
color: '#3b82f6',
},
{
id: '2',
title: 'Q3 Product Launch',
start: addHours(addDays(weekStart, 3), 14),
end: addHours(addDays(weekStart, 3), 16),
color: '#8b5cf6',
},
{
id: '3',
title: 'Holiday Party 🎉',
start: addHours(addDays(weekStart, 5), 18),
end: addHours(addDays(weekStart, 5), 21),
color: '#10b981',
},
];
export default function ReadOnlyCalendar() {
return (
<div className="h-[700px] border rounded-xl overflow-hidden">
<ProScheduler
view="week"
readOnly
events={publicEvents}
date={new Date()}
language="en"
/>
</div>
);
}Role-based read-only
Toggle readOnly based on user permissions:
const { user } = useAuth();
const isViewer = user?.role === 'viewer';
<ProScheduler
readOnly={isViewer}
events={events}
onEventCreate={isViewer ? undefined : handleCreate}
onEventUpdate={isViewer ? undefined : handleUpdate}
onEventDelete={isViewer ? undefined : handleDelete}
...
/>