Drag-and-drop scheduling with shadcn/ui and React Big Calendar

Build production-ready scheduling experiences in Next.js with theme-aware components, accessible dialogs, and resizable events. This demo shows how quickly you can prototype meetings, shifts, and reminders with a modern calendar interface.

Drag and drop + resizingWeek, day, month, and agenda viewsLight/dark theme toggleShadcn/ui + Next.js App Router

Add a meeting, workshop, or reminder to the demo.

December 07 – 13
Team offsite
12:00 AM
1:00 AM
2:00 AM
3:00 AM
4:00 AM
5:00 AM
6:00 AM
7:00 AM
8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM
6:00 PM
7:00 PM
8:00 PM
9:00 PM
10:00 PM
11:00 PM
9:30 AM – 10:30 AM
Product design sync
1:00 PM – 2:00 PM
Customer onboarding
11:00 AM – 1:00 PM
Deep work block
3:00 PM – 4:30 PM
Retro & planning

Get the code

Grab the repo and, if this helps you ship faster, please drop a star or a quick <3.

Get the code