Month View Drag and Drop Null Check Error

[nitroplr]

There is a bug with the calendar where if you have 4 appointments loaded into a single day in the CalendarView.month and try to move the bottom appointment you get a null error. I believe it has something to do with an error of displaying 4 events in a single day. In the example below Appointment 0 appears twice when it should only appear once, and the second appointment 0 causes a null error when trying to drag it. As soon as there are only 3 events in the day, it works correctly. There is a minimal reproducible Flutter sample available here: https://github.com/nitroplr/sf_dragstart_bug . Here also is a video showing how to replicate the bug in Flutter web.

https://user-images.githubusercontent.com/48568777/229259856-5c898741-883e-4c83-8202-f9fcbc59b2ae.mov

Here is the code:

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey _globalKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      appBar: AppBar(),
      body: SfCalendar(
        dataSource: _getCalendarDataSource(),
        view: CalendarView.month,
        showDatePickerButton: true,
        monthViewSettings:
            const MonthViewSettings(dayFormat: 'EEE', appointmentDisplayMode: MonthAppointmentDisplayMode.appointment),
        allowDragAndDrop: true,
        appointmentBuilder: (context, calAptDetails) {
          final Appointment day = calAptDetails.appointments.first;
          return Text(
            day.subject,
            textAlign: TextAlign.center,
          );
        },
      ),
    );
  }

  AppointmentDataSource _getCalendarDataSource() {
    List<Appointment> appointments = <Appointment>[];
    for (int i = 0; i < 4; i++) {
      appointments.add(Appointment(
          startTime: DateTime.now(),
          endTime: DateTime.fromMillisecondsSinceEpoch(DateTime.now().millisecondsSinceEpoch + 3600000),
          subject: 'Appointment $i'));
    }

    return AppointmentDataSource(appointments);
  }
}

class AppointmentDataSource extends CalendarDataSource {
  AppointmentDataSource(List<Appointment> source) {
    appointments = source;
  }
}

[nitroplr]

This is only a problem when using the appointmentBuilder. It happens when using the code here also: https://www.syncfusion.com/kb/12191/how-to-customize-the-appointments-using-custom-builder-in-the-flutter-calendar .

[nitroplr]

I got it to work by adding this code to the start of my appointment builder.

if (calAptDetails.isMoreAppointmentRegion) {
                  return SizedBox(
                    width: calAptDetails.bounds.width,
                    height: calAptDetails.bounds.height,
                    child: Text('+More'),
                  );
                }

[nitroplr]

This did not actually fix it, it just made it look better. The app still crashes and in fact the drag and drop example in https://github.com/syncfusion/flutter-examples will crash if you attempt to drag and drop the 3 dots after adding 4 or more Appointments to a single day in the CalendarView.month.

[MuniappanSubramanian]

We have included the mentioned issue fix “Month View Drag and Drop Null Check Error” in our latest Weekly Nuget release package version 21.1.38. Kindly update to the latest version for resolving this issue. Also please find the changelog for the same.

Latest version: https://pub.dev/packages/syncfusion_flutter_calendar/versions

We hope that this helps you. Please let us know if you need further assistance.