[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.