hi，How to implement drag and drop of monthly view item？

[ShawnWong520]

Use case

hi，How to implement drag and drop of monthly view item？

Proposal

hi，How to implement drag and drop of monthly view item？

[LokeshPalani]

Hi @ShawnWong520,

You can achieve your requirement by setting allowDragAndDrop to true in the SfCalendar. By doing this, you can reschedule an appointment by dragging from one cell to another cell in the SfCalendar. We have shared a user guide documentation link, an online sample link, and a screen recording for your reference below. Please let us know if you have any further needs.

UG Link,

https://help.syncfusion.com/flutter/calendar/drag-drop#allow-drag-and-drop

Sample Browser link,

https://flutter.syncfusion.com/#/event-calendar/drag-and-drop

Regards, Lokesh P.

Calendar_589635.zip

[and2long]

Hi @LokeshPalani, Same question here, I checked the sample browser link that you provided, and Month view is indeed draggable.

However, I installed the sample App on my phone, and Month view cannot be dragged. It seems like this feature is not available on mobile phones? Or am I missing some settings?

[and2long]

Here is my sample code, week view and day view all are draggable, only month view does not works.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(
    const MaterialApp(
      home: ExampleDragAndDrop(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

class ExampleDragAndDrop extends StatefulWidget {
  const ExampleDragAndDrop({super.key});

  @override
  State<ExampleDragAndDrop> createState() => _ExampleDragAndDropState();
}

class _ExampleDragAndDropState extends State<ExampleDragAndDrop> {
  final CalendarController _calendarController = CalendarController();

  final List<Schedule> _items = [
    Schedule.defaultData(),
    Schedule.defaultData(),
    Schedule.defaultData(),
  ];
  @override
  void dispose() {
    super.dispose();
    _calendarController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Wrap(
              spacing: 10,
              children: [
                FilledButton(
                    onPressed: () {
                      _calendarController.view = CalendarView.month;
                    },
                    child: const Text('Month')),
                FilledButton(
                    onPressed: () {
                      _calendarController.view = CalendarView.week;
                    },
                    child: const Text('Week')),
                FilledButton(
                    onPressed: () {
                      _calendarController.view = CalendarView.day;
                    },
                    child: const Text('Day')),
              ],
            ),
            Expanded(
              child: SfCalendar(
                controller: _calendarController,
                view: CalendarView.month,
                dataSource: ScheduleDataSource(_items),
                monthViewSettings: const MonthViewSettings(
                  appointmentDisplayCount: 3,
                  appointmentDisplayMode:
                      MonthAppointmentDisplayMode.appointment,
                ),
                selectionDecoration:
                    const BoxDecoration(color: Colors.transparent),
                allowDragAndDrop: true,
                onDragEnd: _onDragEnd,
              ),
            )
          ],
        ),
      ),
    );
  }

  void _onDragEnd(appointmentDragEndDetails) {
    final dragedItem = appointmentDragEndDetails.appointment as Schedule;
    final originItem =
        _items.firstWhere((element) => element.id == dragedItem.id);
    Duration diff = originItem.endDate.difference(originItem.startDate);
    dragedItem.startDate = appointmentDragEndDetails.droppingTime!;
    dragedItem.endDate = appointmentDragEndDetails.droppingTime!.add(diff);
    setState(() {});
  }
}

class ScheduleDataSource extends CalendarDataSource<Schedule> {
  List<Schedule> source;

  ScheduleDataSource(this.source);

  @override
  List<dynamic> get appointments => source;

  @override
  Object? getId(int index) {
    return source[index].id;
  }

  @override
  DateTime getStartTime(int index) {
    return source[index].startDate;
  }

  @override
  DateTime getEndTime(int index) {
    return source[index].endDate;
  }

  @override
  String getSubject(int index) {
    return source[index].name;
  }

  @override
  Color getColor(int index) {
    return source[index].color;
  }

  @override
  bool isAllDay(int index) {
    return source[index].isAllDay;
  }

  @override
  Schedule? convertAppointmentToObject(
      Schedule? customData, Appointment appointment) {
    return customData;
  }
}

class Schedule {
  int id;
  String name;
  Color color;
  DateTime startDate, endDate;
  bool isAllDay;

  Schedule({
    required this.id,
    required this.name,
    required this.color,
    required this.startDate,
    required this.endDate,
    required this.isAllDay,
  });

  factory Schedule.defaultData() => Schedule(
      id: 0,
      name: 'name',
      color: Colors.blue,
      startDate: DateTime.now(),
      endDate: DateTime.now().subtract(const Duration(hours: 1)),
      isAllDay: false);
}

https://github.com/syncfusion/flutter-widgets/assets/17178272/72082765-7ab4-4b06-aaf9-52948f5c5445

[Yuvaraj-Gajaraj]

Hi,

We have checked the shared code snippet and ensured that appointments drag and drop is working fine in the month view and no issue reproduces at our end. We have shared the test sample which is created with the help of a shared code snippet and screenshot for your reference. So, we kindly request you to reproduce the issue in the shared sample below and revert to us. It will be more helpful to us to provide a solution sooner.

Screenshot:

Sample: i589635.zip

Regards, Yuvaraj.

[ShawnWong520]

HI，I tested it using the code（i589635.zip） you provided. It cannot be dragged in the moon view。

Are you running on an android device? Your above recording screen, it looks like a web program.

Code examples and screen recordings are already provided by and2long.

[PreethikaSelvam]

Hi @ShawnWong520,

As mentioned in our previous update, drag-and-drop operations within the calendar can be achieved by enabling the allowDragAndDrop property of SfCalendar. Currently, drag-and-drop functionality is not supported for the month view on the mobile platform, as specified in our user guide documentation. We have provided a user guide documentation for your reference below.

UG Link:

https://help.syncfusion.com/flutter/calendar/drag-drop#allow-drag-and-drop

Please check and get back to us if you require further assistance.

Regards,

Preethika Selvam.

[ShawnWong520]

Ha ha, it's okay. Hopefully, this feature will be supported in the future.I implemented the monthly view drag and drop by modifying the library myself.

[PreethikaSelvam]

Hi @ShawnWong520,

As per our pervious update currently drag-and-drop functionality is not supported for the month view on the mobile platform. However, we have considered your requirement as a new feature and logged a feature request for it in our feedback portal.

We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature with the feedback below.

FR Link: Support for dragging and dropping month view appointments on the mobile platform

Regards,

Preethika Selvam