syncfusion / flutter-widgets

Syncfusion Flutter widgets libraries include high quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base.
1.6k stars 787 forks source link

Sfcalendar - problem on calendarview.day and calendarview.week #2139

Open manuecal opened 1 month ago

manuecal commented 1 month ago

Bug description

When i create an event on 2 days startTime is for example new DateTime(2024,11,1,10,0) endTime is new DateTime(2024,11,4,17,0). It's displayed as it's an all day event. I want to split this in order to see this event on the day column with the exact hour.

Steps to reproduce

Add apointments on 3 days All appointments will be displayed as an allday event

Code sample

Code sample appointment.add(_Meeting( _subjectCollection[random.nextInt(7)], startDate, startDate.add(Duration(days: random.nextInt(3))), _colorCollection[random.nextInt(9)], false, ) ```dart [Add your code here] ```

Screenshots or Video

Screenshots / Video demonstration [Upload media here]

Stack Traces

Stack Traces none ```dart [Add the Stack Traces here] ```

On which target platforms have you observed this bug?

Android, iOS, Web, Web (Android browser), Web (iOS browser), Windows

Flutter Doctor output

Doctor output [√] Flutter (Channel stable, 3.24.3, on Microsoft Windows [version 10.0.22631.4317], locale fr-FR) • Flutter version 3.24.3 on channel stable at C:\Cirrus\app\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 2663184aa7 (5 weeks ago), 2024-09-11 16:27:48 -0500 • Engine revision 36335019a8 • Dart version 3.5.3 • DevTools version 2.37.3 [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 35.0.0) • Android SDK at C:\Users\mcallieres\AppData\Local\Android\sdk • Platform android-35, build-tools 35.0.0 • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java • Java version OpenJDK Runtime Environment (build 21.0.3+-12282718-b509.11) • All Android licenses accepted. [√] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [X] Visual Studio - develop Windows apps X Visual Studio not installed; this is necessary to develop Windows apps. Download at https://visualstudio.microsoft.com/downloads/. Please install the "Desktop development with C++" workload, including all of its default components [√] Android Studio (version 2024.2) • Android Studio at C:\Program Files\Android\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 21.0.3+-12282718-b509.11) [√] IntelliJ IDEA Ultimate Edition (version 2024.2) • IntelliJ at C:\Users\mcallieres\AppData\Local\Programs\IntelliJ IDEA Ultimate 2024.2.3 • Flutter plugin version 82.0.3 • Dart plugin version 242.22855.32 [√] VS Code, 64-bit edition (version 1.93.1) • VS Code at C:\Program Files\Microsoft VS Code • Flutter extension can be installed from: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter [√] Connected device (3 available) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [version 10.0.22631.4317] • Chrome (web) • chrome • web-javascript • Google Chrome 129.0.6668.103 • Edge (web) • edge • web-javascript • Microsoft Edge 130.0.2849.46 [√] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```console [Add your output here] ```
PreethikaSelvam commented 1 month ago

Hi @manuecal,

Currently, we do not have direct support for your requirement. However, we have prepared a workaround solution to handle multi-day events and display them as separate appointments with specific start and end times instead of as all-day events by modifying the appointment data creation logics. We have created a multi-day event from October 21 to October 24, 2024, where a loop iterates through each day, generating individual appointments. On the first day (October 21), the appointment starts at 10:00 AM, while on the last day (October 24), it ends at 5:00 PM. For the intervening days (October 22 and 23), the appointments are set to run from midnight (00:00 AM) to 11:59 PM, effectively treating them as full-day events while maintaining the desired time structure for the overall multi-day appointment. We have shared a code snippet and a sample for your reference. You can modify the sample based on your needs.

Code snippet:

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SfCalendar(
          view: CalendarView.month,
          allowedViews: const [
            CalendarView.day,
            CalendarView.week,
          ],
          dataSource: _getCalendarDataSource(),
        ),
      ),
    );
  }

  _AppointmentDataSource _getCalendarDataSource() {
    List<Appointment> appointments = <Appointment>[];

    DateTime startTime = DateTime(2024, 10, 21, 10, 0);
    DateTime endTime = DateTime(2024, 10, 24, 17, 0);

    // Add appointments for each day
    for (int i = 0; i < 4; i++) {
      DateTime appointmentDate = startTime.add(Duration(days: i));

      // For the first day, set the start time to the original start time
      DateTime currentStartTime = (i == 0)
          ? startTime
          : DateTime(appointmentDate.year, appointmentDate.month,
              appointmentDate.day, 0, 0);

      // For the last day, set the end time to the original end time
      DateTime currentEndTime = (i == 3)
          ? endTime
          : DateTime(appointmentDate.year, appointmentDate.month,
              appointmentDate.day, 23, 59);

      appointments.add(Appointment(
        startTime: currentStartTime,
        endTime: currentEndTime,
        subject: 'Multi-Day Event',
        color: Colors.blue,
        startTimeZone: '',
        endTimeZone: '',
      ));
    }

    return _AppointmentDataSource(appointments);
  }
}

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

Output: GH2139-ezgif com-video-to-gif-converter

Please let us know if you need any further assistance.

Regards, Preethika Selvam. gh2139.zip