--- title: "Easily Reschedule Appointments with Drag-and-Drop and Resizing in Flutter" published_at: "2021-11-01T11:00:14+00:00" modified_at: "2026-01-09T08:28:34+00:00" url: "https://www.syncfusion.com/blogs/post/easily-reschedule-appointments-with-drag-and-drop-and-resizing-in-flutter" excerpt: "In the business object model, we frequently reschedule appointments based on the availability of time and resources. From the 2021 Volume 3 release, the Syncfusion Flutter event Calendar allows users to reschedule the appointments by dragging and dropping them to..." taxonomy_category: - "Flutter" - "Mobile" - "UI" - "Web" - "What's new" taxonomy_post_tag: - "Android" - "Calendar" - "Flutter" - "Mobile App Development" - "UI" - "Web Development" --- # Easily Reschedule Appointments with Drag-and-Drop and Resizing in Flutter [Nijamudeen](https://www.syncfusion.com/blogs/author/nijamudeensulaiman) ![Easily Reschedule Appointments with Drag-and-Drop and Resizing in Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Easily-Reschedule-Appointments-with-Drag-and-Drop-and-Resizing-in-Flutter.png) In the business object model, we frequently reschedule appointments based on the availability of time and resources. From the [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download) release, the Syncfusion [Flutter event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) allows users to reschedule the appointments by dragging and dropping them to different time slots and resizing them. ![Rescheduling Appointments by Drag and Drop and Resizing in Flutter Event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Rescheduling-Appointments-by-Drag-and-Drop-and-Resizing-in-Flutter-Event-Calendar.gif) Rescheduling Appointments by Drag and Drop and Resizing in Flutter Event Calendar In this blog, we will learn how to reschedule the appointments with the drag-and-drop and resize operations in the Flutter event Calendar widget. **Note:** If you are new to the Calendar widget, please go through our [getting started](https://help.syncfusion.com/flutter/calendar/getting-started) guide in the documentation before proceeding. Let’s explore! ## Appointment drag and drop Now, you can reschedule appointments by simply dragging them into different date-times slots in the Flutter Calendar view. To achieve this, set the **allowDragAndDrop** property to ** true** in the calendar. Refer to the following code example. ``` @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( child: SfCalendar( view: CalendarView.week, dataSource: _getCalendarDataSource(), allowDragAndDrop: true ), ), ), ); } ``` ### Disabling navigation You can restrict the navigation to the next or previous view when the appointment reaches the start or end point of the current view of the Calendar. To do so, set the **allowNavigation** property to false in the ** DragDropSettings**. Refer to the following code example. ``` @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( child: SfCalendar( view: CalendarView.week, dataSource: _getCalendarDataSource(), allowDragAndDrop: true, dragAndDropSettings: DragAndDropSettings( allowNavigation: false), ), ), ), ); } ``` ![Disabling View Navigation in Flutter Event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Disabling-View-Navigation-in-Flutter-Event-Calendar.gif) Disabling View Navigation in Flutter Event Calendar ### Handling navigation delay You can easily customize the navigation delay time while dragging the appointment to the next or previous view. Set the duration in the **autoNavigationDelay** property of ** DragDropSettings**. Refer to the following code example. Here, we have set the delay time to one second. ``` @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( child: SfCalendar( view: CalendarView.week, dataSource: _getCalendarDataSource(), allowDragAndDrop: true, dragAndDropSettings: DragAndDropSettings( autoNavigateDelay: Duration(seconds: 1)), ), ), ), ); } ``` ### Disable view scrolling Restrict the timeslot views’ auto scroll when an appointment reaches the start or end point of the viewport. Set the **allowScroll** property to ** false** in the ** DragDropSettings**. Refer to the following code example. ``` @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( child: SfCalendar( view: CalendarView.week, dataSource: _getCalendarDataSource(), allowDragAndDrop: true, dragAndDropSettings: DragAndDropSettings( allowScroll: false), ), ), ), ); } ``` ![Disabling View Auto Scrolling in Flutter Event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Disabling-View-Auto-Scrolling-in-Flutter-Event-Calendar.gif) Disabling View Auto Scrolling in Flutter Event Calendar ### Show dragging time indicator The time indicator displays the current dragging time on the time ruler view of timeslot views when dragging appointments. To do so, set the **showTimeIndicator** property to ** true** in the ** DragDropSettings**. Also, you can customize the time indicator text style by setting a text style to the **timeIndicatorStyle**. Customize the format by setting a format to the ** indicatorTimeFormat**of the ** DragDropSettings**. Refer to the following code example. ``` @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( child: SfCalendar( view: CalendarView.week, dataSource: _getCalendarDataSource(), allowDragAndDrop: true, dragAndDropSettings: DragAndDropSettings( indicatorTimeFormat: 'hh:mm', showTimeIndicator: true, timeIndicatorStyle: TextStyle(backgroundColor: Colors.red)), ), ), ), ); } ``` ### Callbacks There are three callbacks available to get the drag-and-drop details while performing drag-and-drop operations: - onDragStart - onDragUpdate - onDragEnd Refer to the following code example. ``` @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( child: SfCalendar( view: CalendarView.week, dataSource: _getCalendarDataSource(), allowDragAndDrop: true, onDragStart: dragStart, onDragUpdate: dragUpdate, onDragEnd: dragEnd, ), ), ), ); } ``` #### onDragStart This callback is called whenever an appointment starts to be dragged in the Flutter event Calendar. It provides the details of the appointment. The **AppointmentStartDetails** arguments contain the dragging appointment and associated resource details. ``` void dragStart(AppointmentDragStartDetails appointmentDragStartDetails) { final dynamic appointment = appointmentDragStartDetails.appointment; final CalendarResource? resource = appointmentDragStartDetails.resource; } ``` #### onDragUpdate This callback is called whenever an appointment is in a dragging state. It provides the dragging position and time of the appointment. The **AppointmentDragUpdateDetails** arguments contain the dragging appointment, dragging time, dragging offset, source resource, and target resource details. ``` void dragUpdate(AppointmentDragUpdateDetails appointmentDragUpdateDetails) { final dynamic appointment = appointmentDragUpdateDetails.appointment; final DateTime? draggingTime = appointmentDragUpdateDetails.draggingTime; final Offset? draggingOffset = appointmentDragUpdateDetails.draggingPosition; final CalendarResource? resource = appointmentDragUpdateDetails.sourceResource; final CalendarResource? targetResource = appointmentDragUpdateDetails.targetResource; } ``` #### onDragEnd This callback is called when the appointment being dragged is dropped. It will provide the dropped time and resource details. The **AppointmentDragEndDetails** arguments contain the dropped appointment, dropping time, source, and target resource details. ``` void dragEnd(AppointmentDragEndDetails appointmentDragEndDetails) { final dynamic appointment = appointmentDragEndDetails.appointment!; finla CalendarResource? sourceResource = appointmentDragEndDetails.sourceResource; final CalendarResource? targetResource = appointmentDragEndDetails.targetResource; final DateTime? draggingTime = appointmentDragEndDetails.droppingTime; } ``` ![Dragging and Dropping Appointments in Flutter Event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Dragging-and-Dropping-Appointments-in-Flutter-Event-Calendar-1.gif) Dragging and Dropping Appointments in Flutter Event Calendar ## Appointment resizing Now, you can easily reschedule the appointments’ start and end times by simply resizing the appointment to the different time slots of the Fluter Calendar view in desktop platforms. Set the **allowAppointmentResize** property to **true** in the Calendar. Refer to the following code example. ``` @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( child: SfCalendar( view: CalendarView.week, dataSource: _getCalendarDataSource(), allowAppointmentResize: true ), ), ), ); } ``` **Note:** The appointment resizing feature is not applicable for mobile platforms. ### Callbacks There are three callbacks to get appointment details while performing resizing operations: - onAppointmentResizeStart - onAppointmentResizeUpdate - onAppointmentResizeEnd Refer to the following code example. ``` @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container( child: SfCalendar( view: CalendarView.week, dataSource: _getCalendarDataSource(), allowAppointmentResize: true, onAppointmentResizeStart: resizeStart, onAppointmentResizeUpdate: resizeUpdate, onAppointmentResizeEnd: resizeEnd, ), ), ), ); } ``` #### onAppointmentResizeStart This callback is called whenever the appointment starts to resize in the Flutter event Calendar. It will provide the details of the appointment being resized. The **AppointmentResizeStartDetails** arguments contain the resizing appointment and associated resource details. ``` void resizeStart(AppointmentResizeStartDetails appointmentResizeStartDetails) { dynamic appointment=appointmentResizeStartDetails.appointment; CalendarResource? resource = appointmentResizeStartDetails.resource; } ``` #### onAppointmentResizeUpdate This callback is called whenever an appointment is in resizing state. It will provide the resizing position and time of the appointment. The **AppointmentResizeUpdateDetails** arguments contain the resizing appointment, resizing time, resizing offset, and resource details. ``` void resizeUpdate(AppointmentResizeUpdateDetails appointmentResizeUpdateDetails) { dynamic appointment = appointmentResizeUpdateDetails.appointment; DateTime? resizingTime = appointmentResizeUpdateDetails.resizingTime; Offset? resizingOffset = appointmentResizeUpdateDetails.resizingOffset; CalendarResource? resourceDetails = appointmentResizeUpdateDetails.resource; } ``` #### onAppointmentResizeEnd This callback is called when we finish resizing an appointment. It provides the updated time and resource details. The **AppointmentResizeEndDetails** arguments contain the resized appointment, start time, end time, and resource details. ``` void resizeEnd(AppointmentResizeEndDetails appointmentResizeEndDetails) { dynamic appointment = appointmentResizeEndDetails.appointment; DateTime? startTime = appointmentResizeEndDetails.startTime; DateTime? endTime = appointmentResizeEndDetails.endTime; CalendarResource? resourceDetails = appointmentResizeEndDetails.resource; } ``` ![Resizing Appointments in Flutter Event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Resizing-Appointments-in-Flutter-Event-Calendar.gif) Resizing Appointments in Flutter Event Calendar ## Conclusion Thanks for reading! We have seen how to reschedule appointments using the**drag-and-drop and resizing** functionalities rolled out in the [Flutter event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) in the [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download) release. Info on these features is also available in our [release notes](https://help.syncfusion.com/flutter/release-notes/v19.3.0.43?type=all) and [What’s New](https://www.syncfusion.com/products/whatsnew/flutter) pages. Try these features out and reschedule appointments in your Flutter app with ease! Also, feel free to try out the Flutter Calendar examples available in our [GitHub repository.](https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/calendar/shift_scheduler.dart) For existing customers, the newest version of Essential Studio® is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out the available features. You can also contact us through our [support forums](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/home) . We are always happy to assist you! ## Related blogs - [What’s New in Flutter Charts: 2021 Volume 3](https://www.syncfusion.com/blogs/post/whats-new-in-flutter-charts-2021-volume-3.aspx) - [What’s New in Flutter Slider and Range Slider: 2021 Volume 3](https://www.syncfusion.com/blogs/post/whats-new-in-flutter-slider-and-range-slider-2021-volume-3.aspx) - [Easily Export DataGrid to Excel and PDF in Flutter](https://www.syncfusion.com/blogs/post/easily-export-datagrid-to-excel-and-pdf-in-flutter.aspx) - [What’s New in 2021 Volume 3: Flutter Date Range Picker](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-3-flutter-date-range-picker.aspx)