Easily Reschedule Appointments with Drag-and-Drop and Resizing in Flutter
Tags: flutter, mobile, webdev, dart
Published: 2021-11-01 11:20:59

---
title: Easily Reschedule Appointments with Drag-and-Drop and Resizing in Flutter
published: true
date: 2021-11-01 11:00:14 UTC
tags: flutter, mobile, webdev, dart
canonical_url: https://www.syncfusion.com/blogs/post/easily-reschedule-appointments-with-drag-and-drop-and-resizing-in-flutter.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypj2kohmptb8rkkleaum.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 "Link to download Essential Studio 2021 Volume 3") release, the Syncfusion [Flutter event Calendar ](https://www.syncfusion.com/flutter-widgets/flutter-calendar "Link to Flutter event 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)<figcaption>Rescheduling Appointments by Drag and Drop and Resizing in Flutter Event Calendar</figcaption>

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 "Documentation link to getting started with Flutter event Calendar") 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.

```dart
@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.

```dart
@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)<figcaption>Disabling View Navigation in Flutter Event Calendar</figcaption>

### 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.

```dart
@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.

```dart
@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)<figcaption>Disabling View Auto Scrolling in Flutter Event Calendar</figcaption>

### 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.

```dart
@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.

```dart
@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.

```dart
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.

```dart
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.

```dart
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)<figcaption>Dragging and Dropping Appointments in Flutter Event Calendar</figcaption>

## 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.

```dart
@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.

```dart
@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 resizing. The **AppointmentResizeStartDetails** arguments contain the resizing appointment and associated resource details.

```dart
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.

```dart
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.

```dart
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)<figcaption>Resizing Appointments in Flutter Event Calendar</figcaption>

## Conclusion

Thanks for reading! We have seen how to reschdule appointments using the **drag-and-drop and resizing** functionalities rolled out in the [Flutter event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar "Link to Flutter event 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 "Link to download Essential Studio 2021 Volume 3") 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 "Link to Syncfusion release notes")and [What’s New](https://www.syncfusion.com/products/whatsnew/flutter "Link to Syncfusion What's New") 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 "Link to Flutter event Calendar demo on GitHub")

For existing customers, the newest version of Essential Studio is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out the available features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/home "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [What’s New in Flutter Charts: 2021 Volume 3](https://dev.to/sureshmohan/whats-new-in-flutter-charts-2021-volume-3-45pp-temp-slug-6966661 "Link to What’s New in Flutter Charts: 2021 Volume 3 blog")
- [What’s New in Flutter Slider and Range Slider: 2021 Volume 3](https://dev.to/sureshmohan/whats-new-in-flutter-slider-and-range-slider-2021-volume-3-1mm7-temp-slug-6961373 "Link to What’s New in Flutter Slider and Range Slider: 2021 Volume 3 blog")
- [Easily Export DataGrid to Excel and PDF in Flutter](https://dev.to/syncfusion/easily-export-datagrid-to-excel-and-pdf-in-flutter-216 "Link to Easily Export DataGrid to Excel and PDF in Flutter blog")
- [What’s New in 2021 Volume 3: Flutter Date Range Picker](https://dev.to/karthickramasamy08/what-s-new-in-2021-volume-3-flutter-date-range-picker-3ec9-temp-slug-4975296 "Link to What’s New in 2021 Volume 3: Flutter Date Range Picker blog")