Shadcn Event Calendar Drag-to-Book

When to use

• Team calendars in month, week, day and agenda views where events are added, edited and dragged
• Room and appointment bookings laid out as one column per resource or as a single day of open slots
• Project and campaign plans drawn as color coded bars spanning several days of a month

When not to use

• Appointments typed into a dialog with title, color, start and duration fields: use the Event Calendar Event Form Dialog example
• Several rooms or staff shown side by side as columns of one day: use the Event Calendar Room Bookings example
• A finished full page scheduling workspace, such as a hotel desk, shift roster or clinic: use the Event Calendar blocks
• A compact booking card where someone picks a day, then a free time slot, and confirms: use the Schedule blocks
• A plain date or date range input in a form, with no hours, events or dragging: use the Calendar component

Agent notes

• bookSlot inserts a New appointment placeholder the moment a drag ends; open your booking form or call your API there instead
• canBook only checks new draws, so moving or resizing an appointment onto another one is never refused
• Client photos load from randomuser.me URLs in buildAppointments; swap them for your own images or drop AvatarImage
• No example passes onEventsChange, so drags, resizes and apiRef edits stay in calendar state and are lost on reload
• New event ids come from a useRef counter that restarts at 0 on every mount, so take ids from your store once events persist

Third-party API docs

• date-fns v4: docs