Features
Loading State
Show skeleton placeholders while events are being fetched.
Loading State
Pass isLoading to show animated skeleton placeholders instead of the calendar content while events are fetching from your API.
Usage
const { data: events, isLoading } = useQuery({ queryKey: ['events'], queryFn: fetchEvents });
<ProScheduler
isLoading={isLoading}
events={events ?? []}
view="week"
...
/>What the skeleton shows
| View | Skeleton |
|---|---|
month | Grid of empty day cells with placeholder chips |
week | Column grid with shimmering event blocks |
day | Single column with shimmering event blocks |
agenda | List rows with shimmer |
resource | Multi-column grid with shimmer |
Example: async data fetching
'use client';
import { useState, useEffect } from 'react';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent } from 'calendarkit-prov2';
// Simulate an API call
async function fetchEvents(): Promise<CalendarEvent[]> {
await new Promise((r) => setTimeout(r, 1500)); // 1.5s delay
return [
{
id: '1',
title: 'Team Meeting',
start: new Date(new Date().setHours(10, 0, 0, 0)),
end: new Date(new Date().setHours(11, 0, 0, 0)),
color: '#3b82f6',
},
{
id: '2',
title: 'Lunch Break',
start: new Date(new Date().setHours(12, 0, 0, 0)),
end: new Date(new Date().setHours(13, 0, 0, 0)),
color: '#10b981',
},
];
}
export default function LoadingExample() {
const [events, setEvents] = useState<CalendarEvent[]>([]);
const [isLoading, setLoading] = useState(true);
useEffect(() => {
fetchEvents().then((data) => {
setEvents(data);
setLoading(false);
});
}, []);
return (
<div className="h-[700px] border rounded-xl overflow-hidden">
<ProScheduler
view="week"
events={events}
date={new Date()}
isLoading={isLoading}
language="en"
/>
</div>
);
}With React Query
'use client';
import { useQuery } from '@tanstack/react-query';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent } from 'calendarkit-prov2';
async function getEvents(): Promise<CalendarEvent[]> {
const res = await fetch('/api/events');
return res.json();
}
export default function ReactQueryExample() {
const { data, isLoading } = useQuery({
queryKey: ['events'],
queryFn: getEvents,
});
return (
<div className="h-[700px] border rounded-xl overflow-hidden">
<ProScheduler
view="week"
events={data ?? []}
date={new Date()}
isLoading={isLoading}
/>
</div>
);
}