Why this one?
In most calendar libraries the resource timeline is a paid tier. Here it is free, and complete:
| Resource timeline | Cost |
|---|
| Resource Scheduler | Free, MIT. Drag, resize, conflict rules, slot selection and keyboard support all included |
| FullCalendar | Premium add-on, from $480 per developer |
| MUI X Scheduler | The Event Timeline is Premium |
| DayPilot Lite | Free, but resource hierarchy, keyboard navigation and overlap prevention are Pro only (Pro from $649) |
| react-big-scheduler | Free, MIT, has a resource view; no commits since March 2023 and about 170 open issues and pull requests |
Prices checked October 2026; see the full comparison the step-by-step tutorial, the room booking tutorial, the shift planner tutorial, the clinic appointment board tutorial, the equipment rental tutorial, or the Next.js and Prisma tutorial. It is also younger than they are: rows and columns are virtualized and benchmarked up to 2,500 resources and 50,000 events, but for timelines far beyond that pick a heavier tool.
Features
- 📅 Views: day, week, month, quarter and year. Day view slots of 15, 30 or 60 minutes, with visible hours
- 🖱️ Create, move, resize: mouse, pen or touch, using Pointer Events, so no drag-and-drop library to wire up
- 🚫 Conflict rules:
eventOverlap and isValidDrop, a red footprint before you drop, and the same check available for your server
- 🧩 Your own dialogs:
onSlotSelect hands you the range instead of a hard-coded "New Event"
- ⌨️ Keyboard and screen readers: ARIA grid, keyboard move, resize and create, live announcements
- 🖨️ Prints: toolbar controls dropped, every row and column drawn (virtualization is off on paper), colors kept, landscape ready
- 🎨 Themeable and isolated:
--rs-* CSS variables, dark mode, and styles that never touch the rest of your app
- 🧱 Headless core:
resource-scheduler/headless is the layout, lanes, recurrence, rules and date math as plain functions (no React, no CSS, server-safe), to build your own UI
- 📦 Two ways to install: npm, or copy the source into your project with the shadcn CLI
- 🔷 TypeScript types included; React 18 and 19; Next.js ready
Installation
npm install resource-scheduler
# or
yarn add resource-scheduler
# or
pnpm add resource-scheduler
Or copy the source into your project with the shadcn CLI (Tailwind v4):
npx shadcn@latest add mdobaid311/resource-scheduler/resource-scheduler
Quick Start
import { ResourceScheduler, ViewType } from 'resource-scheduler';
import "resource-scheduler/dist/resource-scheduler.css"
import { useState } from 'react';
function App() {
const [resources, setResources] = useState([
{
id: "1",
name: "John Doe",
role: "Developer",
events: [
{
id: "e1",
startDate: new Date("2025-09-10T10:00:00"),
endDate: new Date("2025-09-10T12:00:00"),
title: "Team Meeting",
color: "#3b82f6",
description: "Weekly sync"
},
],
},
]);
const handleEventCreate = (eventData, resourceId) => {
const newEvent = {
...eventData,
id: `event-${Date.now()}`,
};
setResources(prev =>
prev.map(resource =>
resource.id === resourceId
? { ...resource, events: [...resource.events, newEvent] }
: resource
)
);
};
return (
<div style={{ height: '600px' }}>
<ResourceScheduler
resources={resources}
initialView={ViewType.Week}
onEventCreate={handleEventCreate}
/>
</div>
);
}
Styles
Import the default styles in your main CSS or JS file:
import "resource-scheduler/dist/resource-scheduler.css"
Contributing
We welcome contributions! Please see our Contributing Guide for details.
Development Setup
# Clone the repository
git clone https://github.com/mdobaid311/resource-scheduler.git
cd resource-scheduler/resource-scheduler
# Install dependencies
npm install
# Start development server
npm run dev
# Build the package
npm run build
# Run tests
npm test
License
MIT License - see the LICENSE file for details.
Support
Acknowledgments
Resource Scheduler - Efficiently manage and schedule your resources with this powerful React component.
