Move, resize, create
Pointer-based drag and drop for mouse, pen and touch. No drag-and-drop library to wire up, and no clash with one you already use.
A resource timeline for React that you own
Rows are people, rooms or machines; columns are time. Drag, resize, stop double booking, and drive it from the keyboard. Free and MIT, with nothing held back for a paid tier.
This is the real component, running live. Drag across empty days to create an event, drag an event to move it, grab an edge to resize it. Try dropping one on top of another: it turns red and is refused.
Install
Section titled “Install”npm install resource-schedulernpx shadcn@latest add mdobaid311/resource-scheduler/resource-schedulerWhat you get
Section titled “What you get”Conflict rules
Forbid overlaps or write your own rule. Rejected places show in red before you drop, for drag, resize and create alike.
Your own dialogs
onSlotSelect hands you the range; you open your own form. Day view slots of 15, 30 or 60 minutes, with visible hours.
Keyboard and screen readers
An ARIA grid with named cells, keyboard move, resize and create, and live announcements. Checked with axe in CI.
Themeable, and isolated
Design tokens are CSS variables and every rule is scoped, so importing it never restyles your app.
Copy the source
Prefer to own the code? The shadcn CLI copies it into your project and adds the styles to your Tailwind CSS.