Features
Mobile FAB
Show or hide the floating create-event button on mobile viewports.
Mobile FAB
On viewports narrower than 768px, CalendarKit Pro shows a floating action button (FAB) in the bottom-right corner to create a new event.
The FAB is portaled to document.body so it stays visible even when the scheduler root has overflow: hidden.
Visibility rules
The FAB is shown only when all of these are true:
| Condition | Meaning |
|---|---|
| Viewport < 768px | Mobile / small tablet |
readOnly is not set | Editing is allowed |
hideFab is not true | FAB is not explicitly hidden |
Hide the FAB
<ProScheduler
hideFab
events={events}
view="week"
...
/>Or conditionally:
<ProScheduler
hideFab={!canCreateEvents}
events={events}
...
/>Show the FAB (default)
hideFab defaults to false, so you do not need to pass anything to show it:
<ProScheduler
events={events}
view="week"
// hideFab={false} ← default
/>Relation to readOnly
readOnly already hides the FAB (along with create / drag / resize). Use hideFab when the calendar is editable but you still want to hide the floating button — for example if you provide your own create CTA.
// Editable calendar, custom create button in your app chrome
<ProScheduler
hideFab
onEventCreate={handleCreate}
events={events}
/>Full example
'use client';
import { useState } from 'react';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent } from 'calendarkit-prov2';
export default function FabToggleDemo() {
const [events, setEvents] = useState<CalendarEvent[]>([]);
const [hideFab, setHideFab] = useState(false);
return (
<div className="space-y-3">
<label className="flex items-center gap-2 text-sm">
<input
type="checkbox"
checked={hideFab}
onChange={(e) => setHideFab(e.target.checked)}
/>
Hide mobile FAB
</label>
<div className="h-[700px] border rounded-xl overflow-hidden">
<ProScheduler
view="week"
events={events}
hideFab={hideFab}
onEventCreate={(e) =>
setEvents((prev) => [
...prev,
{ ...e, id: crypto.randomUUID() } as CalendarEvent,
])
}
/>
</div>
</div>
);
}