Resource Scheduler

A free, MIT-licensed React scheduler with a resource timeline.
Drag, resize, stop double booking, and drive it from the keyboard.
_{Also called a resource calendar or booking calendar. Used for room booking, shift rosters, equipment rental and field dispatch.}

Docs and live demos · Install · npx shadcn@latest add mdobaid311/resource-scheduler/resource-scheduler · Roadmap

Watch the 40-second tour

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

• 📚 Documentation
• 🐛 Bug Reports
• 💡 Feature Requests
• 💬 Discussions

Acknowledgments

• Built with React
• Styled with Tailwind CSS
• UI components from shadcn/ui
• Date utilities from date-fns

---

Resource Scheduler - Efficiently manage and schedule your resources with this powerful React component.