[syncfusion_flutter_calendar][web] Cannot drag and drop vertically in Resource View + Timeline Month view

[pulo0]

Bug description

I encounted a possible bug, that unables in resource view + timelineMonth view using drag and drop functionality vertically, causing in a worst case scenario duplication of dragged appointment. Only possible directions to drag and drop are diagonally and horizontally as shown in video below.

Also vertical drag and drop only works at first (you cannot drag any appointment yet), but after that it goes to the state shown in the video

Steps to reproduce

1. Use Resource View
2. Use SfCalendar with allowDragAndDrop to true and with timelineMonth view

Code sample

Code sample

SfCalendar(
        showDatePickerButton: true,
        allowAppointmentResize: true,
        allowDragAndDrop: true,
        view: widget.allowedViews.second,
        allowedViews: widget.allowedViews,
        timeSlotViewSettings: const TimeSlotViewSettings(timeFormat: 'HH:mm'),
        resourceViewSettings: ResourceViewSettings(
          displayNameTextStyle: Theme.of(context).textTheme.labelSmall,
          visibleResourceCount: isLargeSize ? -1 
        ),
        controller: _controller,
        dataSource: ResourceDataSource(
          widget.appointments.toList(),
          widget.resources.toList(),
        ),
      ),

Screenshots or Video

Screenshots / Video demonstration

sfcalendar_timelinemonth_drag.mp4

Stack Traces

Stack Traces

[Add the Stack Traces here]

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.27.4, on Microsoft Windows [Version 10.0.26100.6584], locale en-US)
    • Flutter version 3.27.4 on channel stable at C:\Users\barte\fvm\versions\3.27.4
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d8a9f9a52e (8 months ago), 2025-01-31 16:07:18 -0500
    • Engine revision 82bd5b7209
    • Dart version 3.6.2
    • DevTools version 2.40.3

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\barte\AppData\Local\Android\sdk
    • Platform android-35, build-tools 34.0.0
    • Java binary at: C:\Users\barte\AppData\Local\Programs\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.10.5)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.10.35122.118
    • Windows 10 SDK version 10.0.22621.0

[✓] Android Studio (version 2024.2)
    • Android Studio at C:\Users\barte\AppData\Local\Programs\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314)

[✓] VS Code (version 1.102.3)
    • VS Code at C:\Users\barte\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.114.0

[✓] Connected device (2 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.26100.6584]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 140.0.7339.128

[✓] Network resources
    • All expected network resources are available.

[BPraveenBalu]

Hi @pulo0,

We tried to replicate the reported issue at our end. We tried the following ways to reproduce the issue:

• Checked with the latest calendar version 31.1.20.
• Checked on Web, and Windows platforms.
• Checked by adding 10 resources and 10 appointments in Resource view with Timeline Month view.
• Checked with both horizontal and vertical scroll for calendar and perform drag and drop the appointments.

Unfortunately, we are not able to reproduce the reported issue. Additionally, we have attached the sample along with a demo for your reference. If you are still experiencing the issue, we kindly request you to try to replicate the reported issue in the below attached test sample and revert us so that it will help us assist you in a better way.

Sample: github_2438.zip

Regards,
Praveen Balu.

[pulo0]

Hi @BPraveenBalu,

Thank you for the detailed sample of the fully working copy of drag and drop functionality. After delving into my case. comparing the result to the working sample, I found the cause of the issue:

• Using model Appointment directly instead of converting it to custom object (like it was in the sample - model Meeting) in data source causes the issue at hand
• Trying the same setup but with the sample's conversion from Appointment -> Meeting (or any custom object name) resolves the issue of being unable to drag and drop vertically

If this behavior is unintended, then it might be considered a bug. Otherwise, thank you for the clarification — I’ll go ahead and close the issue.

Regards,
Bartosz Skrzypek.