Resource Scheduler
A visual scheduling component for managing events across resources. Plan team schedules, room bookings, equipment allocation, or any resource-based timeline.
Features
Resource Lanes
Display resources as rows with events scheduled across a timeline. Support for grouping and hierarchy.
Drag & Drop
Move, resize, and create events by dragging. Snap to grid with configurable intervals.
Multi-lane Layout
Multiple events per resource displayed in parallel lanes without overlap.
Frozen Rows
Pin important resources at the top of the view for quick reference.
Custom Rendering
Render event content with custom templates. Full control over colors, icons, and labels.
Time Scales
Hour, day, week, and month views. Non-working hours and holidays support.
Filtering
Filter resources and events by type, department, skill, or custom criteria.
Export
Export schedule to PNG, PDF, CSV, or Excel.
Quick start
Schedule resources in a few lines of code.
import { useRef, useCallback } from 'react';
import { ResourceScheduler, ResourceSchedulerRef,
SchedulerResource, SchedulerEvent } from '@timelinekit/react';
import '@timelinekit/core/styles';
function day(offset: number, hour = 8) {
const d = new Date();
d.setDate(d.getDate() + offset);
d.setHours(hour, 0, 0, 0);
return d;
}
export default function App() {
const ref = useRef<ResourceSchedulerRef>(null);
const handleReady = useCallback(() => {
const scheduler = ref.current;
if (!scheduler) return;
const r1 = new SchedulerResource('r1', 'Alice Johnson');
r1.type = 'person';
scheduler.data.addResource(r1);
const r2 = new SchedulerResource('r2', 'Bob Smith');
r2.type = 'person';
scheduler.data.addResource(r2);
const r3 = new SchedulerResource('r3', 'Boardroom A');
r3.type = 'room';
scheduler.data.addResource(r3);
scheduler.data.addEvent(new SchedulerEvent('e1', 'r1', 'Sprint Planning',
day(1, 9), day(3, 17)));
scheduler.data.addEvent(new SchedulerEvent('e2', 'r2', 'UI Design',
day(4, 9), day(6, 17)));
scheduler.data.addEvent(new SchedulerEvent('e3', 'r3', 'Team Workshop',
day(7, 9), day(9, 17)));
scheduler.zoomToFit();
}, []);
return (
<div style={{ height: '100vh' }}>
<ResourceScheduler ref={ref} onReady={handleReady} />
</div>
);
}