Syncfusion Feedback

React Scheduler - Drag and Drop

Drag and Drop Appointments in React Scheduler

Try Our Live Demo

Trusted by the world's leading companies

Appointment moving in React Scheduler

Reschedule appointments across time slots

Appointment dragging changes an appointment’s date or time directly on the calendar. Use it when scheduled work needs frequent timing adjustments.

Resource reassignment in React Scheduler

Reassign appointments between resources

Resource reassignment lets users move appointments across between people, rooms, or equipment. Use it when managing multi-resource schedules where tasks or meetings need to be reallocated quickly.

Preventing invalid schedules in React Scheduler

Preventing invalid schedules

Drag validation applies custom rules that control where appointments can be dropped during drag-and-drop actions. This prevents scheduling conflicts by restricting invalid drop locations. Use it when scheduling rules must be enforced before appointments are moved.

External drag and drop in React Scheduler

Convert unscheduled items to appointments

External drag and drop allows items from outside the Scheduler to be dragged into the calendar as appointments. This creates scheduled events from external data without manual entry. Use it when tasks, work items, or records need to be assigned to specific time slots.

Touch-friendly drag interactions in React Scheduler

Reschedule appointments on touch devices

Touch-based drag and drop lets users reschedule appointments on smartphones and tablets. This enables scheduling on the go without requiring a desktop or pointing device. Use it when users need to manage appointments directly from mobile or tablet devices in the field.

Multiple appointment dragging in React Scheduler

Drag multiple appointments together

Multi-appointment drag allows multiple selected appointments to be moved together in a single action. This updates related events while preserving their relative schedule. Use it when rescheduling groups of appointments that must maintain their original time sequence.

Frequently Asked Questions

Yes. React Scheduler shows a visual placeholder at the target position during dragging, displaying the updated start and end times so users can confirm the new slot before releasing.

Yes. Drag and drop is supported in Day, Week, Work Week, Month, and all Timeline views. Agenda, Month-Agenda, and Year views do not support drag interactions because appointments in those views are rendered as list items rather than positioned time blocks.

Yes. Touch enabled drag and drop is supported on mobile and tablet devices. Long press and drag gestures enable scheduling on any device while maintaining a consistent user experience.

Drag validation is handled in the dragStop event, where the target appointment, time slot, and resource can be checked. If any validation rule fails, the drop can be canceled programmatically to prevent the move.

Yes. External drag sources allow items from task lists, grids, and other interface elements to be dragged into the Scheduler to create appointments. This streamlines scheduling workflows and reduces manual data entry.

Yes. Multiple appointments can be selected and moved together in a single drag action. All selected appointments shift by the same time offset, preserving the intervals between them. This is useful for rescheduling a sequence of related events as a unit.

Resources

Learn more about the React Scheduler

Explore demos, KB articles, and documentation to get the most out of our React Scheduler.

Documentation

Explore guides, APIs, and quick-start tips

Example demos

See live use cases in action

Community forum

Ask, share, and connect with peers

Knowledge base articles

Find solutions and best practices fast

Contact support

Get expert help when needed

Feature requests and bug reports

Track issues and suggest improvements

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Read Our Customer Stories

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.

Up arrow icon