[syncfusion_flutter_calendar] BUG: TimeSlotViewSettings break pointer in WEB

[bdominguez6]

Bug description

If u have this parameter customizate, the gesture pointer in "CalendarView.month" WEB breaks:

timeSlotViewSettings: TimeSlotViewSettings( timeRulerSize: 100,// todo: mouse bug if this is active.

      ![Captura de pantalla 2024-12-11 a las 10 18 19](https://github.com/user-attachments/assets/26bc4c1d-4137-4660-b665-2fcc88515c9c)

In this screenshot i was clicking in "Colegio", and the focus was in "Camarero" word.

Steps to reproduce

timeSlotViewSettings: TimeSlotViewSettings( timeRulerSize: 100,// todo: mouse bug if this is active.

Code sample

Code sample

Widget _buildCalendarView(CalendarSyncfusionPageVM model) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: kColorWhite,
        borderRadius: BorderRadius.circular(12),
      ),
      child: SfCalendar(
        key: model.calendarKey,
        controller: model.calendarController,
        view: model.calendarController.view ?? CalendarView.month,
        dataSource: model.getCalendarDataSource(),
        initialDisplayDate: widget.selectedDate ?? DateTime.now(),
        initialSelectedDate: widget.selectedDate ?? DateTime.now(),
        //todo: check utility
        // appointmentTextStyle: kRedHatWhiteW600S16,
        onTap: (calendarTapDetails) {
          model.calendarTapped(calendarTapDetails);
        },
        onLongPress: (calendarLongPressDetails) {
          // todo:
        },
        weekNumberStyle: WeekNumberStyle(
          textStyle: kRedHatBlackW600S16,
          backgroundColor: kColorWhite,
        ),
        showCurrentTimeIndicator: false,
        showDatePickerButton: false,
        showWeekNumber: false,
        appointmentTimeTextFormat: 'HH:mm',
        // initialSelectedDate: widget.selectedDate ?? DateTime.now(),
        showNavigationArrow: true,
        showTodayButton: true,
        backgroundColor: kColorWhite,
        allowDragAndDrop: true,
        cellBorderColor: kColorBlack,
        //todo: check utility
        cellEndPadding: 8,
        blackoutDatesTextStyle: kRedHatLightGreyW600S16,

        /// Allow modify duration of appointment in week & day view
        allowAppointmentResize: true,
        todayTextStyle: kRedHatBlackW600S16,
        todayHighlightColor: kColorTransparent,
        viewHeaderHeight: 100,
        viewHeaderStyle: ViewHeaderStyle(
          dayTextStyle: kRedHatBlackW600S16,

        ),
        firstDayOfWeek: 1,
        headerDateFormat: 'MMM yyyy',
        headerHeight: 0,
        headerStyle: CalendarHeaderStyle(
          //todo: [bug] overflowed text
          backgroundColor: kColorWhite,
          textAlign: TextAlign.center,
          textStyle: kRedHatBlackW600S16,
        ),
        selectionDecoration: const BoxDecoration(),
        minDate: DateTime.now(),
        dragAndDropSettings: DragAndDropSettings(
          allowNavigation: false,
          allowScroll: false,
          autoNavigateDelay: Duration(milliseconds: 1000),
          indicatorTimeFormat: 'HH:mm',
          showTimeIndicator: true,
          timeIndicatorStyle: kRedHatBlackW600S16,
        ),

        /// Customization of the time slot view (used in Week and Day view)
        timeSlotViewSettings: TimeSlotViewSettings(
          timeRulerSize: 100,// todo: mouse bug if this is active
          timeInterval: Duration(minutes: 30),
          timeIntervalHeight: 50,
          timeIntervalWidth: 50,
          timelineAppointmentHeight: 50,
          timeFormat: 'HH:mm',
          dayFormat: 'EE',
          dateFormat: 'dd',
          timeTextStyle: kRedHatBlackW600S16,
          allDayPanelColor: kColorWhite,
          startHour: 7,
          endHour: 20,
          minimumAppointmentDuration: const Duration(minutes: 0),
          nonWorkingDays: <int>[DateTime.saturday, DateTime.sunday],

          /// Used in calendarView. day, CalendarView. week
          // numberOfDaysInView: 5,
        ),

        blackoutDates: [],
        viewNavigationMode: ViewNavigationMode.snap,

        /// Use in schedule view (not used)
        scheduleViewSettings: ScheduleViewSettings(
          dayHeaderSettings: DayHeaderSettings(
            dayFormat: 'EE',
            dateTextStyle: kRedHatBlackW600S16,
          ),
          monthHeaderSettings: MonthHeaderSettings(
            height: 50,
            monthFormat: 'MMM',
          ),
        ),

        /// Use in timeline view (not used)
        resourceViewSettings: ResourceViewSettings(
          showAvatar: false,
          displayNameTextStyle: kRedHatBlackW600S16,
          visibleResourceCount: 1,
          size: 0,
        ),
        monthViewSettings: MonthViewSettings(
          appointmentDisplayMode: MonthAppointmentDisplayMode.appointment,
          navigationDirection: MonthNavigationDirection.horizontal,
          numberOfWeeksInView: 4,
          appointmentDisplayCount: 4,
          agendaViewHeight: 200,
          agendaItemHeight: 80,
          dayFormat: 'EE',
          showTrailingAndLeadingDates: false,
          showAgenda: false,
          agendaStyle: AgendaStyle(
            backgroundColor: kColorWhite,
            placeholderTextStyle: kRedHatBlackW600S16,
            appointmentTextStyle: kRedHatWhiteW600S16,
            dayTextStyle: kRedHatBlackW600S16,
            dateTextStyle: kRedHatBlackW600S16,
          ),
          monthCellStyle: MonthCellStyle(
            trailingDatesTextStyle: kRedHatBlackW600S16,
            leadingDatesTextStyle: kRedHatBlackW600S16,
            textStyle: kRedHatBlackW600S16,
            backgroundColor: kColorWhite,
            leadingDatesBackgroundColor: kColorWhite,
            todayBackgroundColor: kColorTransparent,
            trailingDatesBackgroundColor: kColorWhite,
          ),
        ),

        /// Appointment number of the day and add [appointmentBuilder] parameter
        monthCellBuilder: (BuildContext context, MonthCellDetails details) {
          final bool isToday = DateTime.now().day == details.date.day &&
              DateTime.now().month == details.date.month &&
              DateTime.now().year == details.date.year;
          final isSelectedDate = model.selectedDate == details.date;

          return Container(
            decoration: BoxDecoration(
              border: Border.all(color: kColorGreyAppointment, width: 0.5),
              color: kColorWhite,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                /// Number of the day
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 10),
                      decoration: isToday
                          ? BoxDecoration(
                              borderRadius: BorderRadius.circular(30),
                              color: kColorActivityBlue,
                            )
                          : null,
                      child: Center(
                        child: Text(details.date.day.toString(),
                            style: isToday
                                ? kRedHatWhiteW600S16
                                : isSelectedDate
                                    ? kRedHatBlueW500S18
                                    : kRedHatBlackW600S16),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          );
        },

        /// Appointment widget customizations
        appointmentBuilder: (BuildContext context, dynamic calendarAppointmentDetails) {
          final Appointment appointment = calendarAppointmentDetails.appointments.first;

          /// More appointments widget
          if (calendarAppointmentDetails.isMoreAppointmentRegion) {
            return Material(
              color: kColorTransparent,
              child: InkWell(
                onTap: () {
                  model.calendarController.view = CalendarView.schedule;
                },
                splashColor: kColorTransparent,
                focusColor: kColorTransparent,
                highlightColor: kColorTransparent,
                hoverColor: kColorTransparent,
                child: SizedBox(
                  width: calendarAppointmentDetails.bounds.width,
                  height: calendarAppointmentDetails.bounds.height,
                  child: DelayedDisplay(
                    slidingBeginOffset: const Offset(0.0, 0.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Container(
                          height: 10,
                          width: 10,
                          margin: const EdgeInsets.all(1.5),
                          decoration: BoxDecoration(
                            color: kColorActivityBlue,
                            borderRadius: BorderRadius.circular(30),
                          ),
                        ),
                        Container(
                          height: 10,
                          width: 10,
                          margin: const EdgeInsets.all(1.5),
                          decoration: BoxDecoration(
                            color: kColorMainAppOrange,
                            borderRadius: BorderRadius.circular(30),
                          ),
                        ),
                        Container(
                          height: 10,
                          width: 10,
                          margin: const EdgeInsets.all(1.5),
                          decoration: BoxDecoration(
                            color: kColorMainAppRed,
                            borderRadius: BorderRadius.circular(30),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            );
          } else {
            /// Appointment widget
            return Material(
              color: appointment.color ?? kColorTransparent,
              // shadowColor: kColorTransparent,
              // surfaceTintColor: kColorTransparent,
              borderRadius: BorderRadius.circular(12),
              child: InkWell(
                onTap: () {
                  // todo:
                },
                borderRadius: BorderRadius.circular(12),
                child: SizedBox(
                  width: calendarAppointmentDetails.bounds.width,
                  height: calendarAppointmentDetails.bounds.height,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 2),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Flexible(
                          child: Text(
                            appointment.subject,
                            style: kRedHatWhiteW500S16,
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            );
          }
        },
        resourceViewHeaderBuilder: (BuildContext context, ResourceViewHeaderDetails details) {
          return Row(
            children: [
              Expanded(
                child: Text(
                  details.resource.displayName ?? '',
                  style: const TextStyle(fontSize: 15),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          );
        },
        scheduleViewMonthHeaderBuilder: (BuildContext buildContext, ScheduleViewMonthHeaderDetails details) {
          return Row(
            children: [
              Expanded(
                child: Text(
                  details.date.month.toString(),
                  style: const TextStyle(fontSize: 15),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          );
        },
  }

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Stack Traces

Stack Traces

[Add the Stack Traces here]

On which target platforms have you observed this bug?

Web (Android browser)

Flutter Doctor output

Doctor output

[Add your output here]

[bdominguez6]

Additionally, the app's own material is broken as u can see in the screenshot.
I need a parameter to custom it.

[Mugunthan-Ramalingam]

Hi @bdominguez6,

We are able to replicate the reported issue regarding cell overlay position updating issue at our end and have logged bug report for it in our feedback portal. We will fix and include the changes in our Weekly release which is expected to be rolled out on Apr 22, 2025. We will update you here once the release is rolled out and we appreciate your patience until then. You can also track the status of the bug with the feedback below.

Feeback link: https://www.syncfusion.com/feedback/66690

Regards,
Mugunthan.

[Mugunthan-Ramalingam]

Hi @bdominguez6,

We would like to let you know that the reported issue is fixed and rolled out in our weekly patch release on April 22, 2025. So, we kindly request you to upgrade the SfCalendar package to the latest version below.

SfCalendar version: https://pub.dev/packages/syncfusion_flutter_calendar/versions/29.1.39

Root cause: The calendar widget use the timeRulerSize value in the month view which update the cell hover overlay position improperly.

Regards,
Mugunthan.