Is there a way to have both dayDetectorBuilder without overriding the onDayTap?

[linoqui14]

My very goal is make a calendar (Day) where the passed time slot will have different color indicating that the time is already passed.
The screenshot bellow is the example of that.

I achived that using dayDetectorBuilder but it ovirrieden the onDayTap. I read the documentation and it says you will have your custom PressDetector

The problem is that the dayDetectorBuilder only returns a Date value without time so whenever I click to a time it will just show the Date.

Code

dayDetectorBuilder:({
     required DateTime date,
     required double height,
     required double heightPerMinute,
     required MinuteSlotSize minuteSlotSize,
     required double width,
   }) {
     var now = DateTime.now();
     bool isToday = date.compareWithoutTime(now);
     return Container(
       height:!isToday&&date.isBefore(now)?height: 
       isToday?(DateTime.now().difference(now.withoutTime).inMinutes) * heightPerMinute:0,
       color: BColors.blue.withAlpha(30),
   );
 },

Replicate:

1. Create a DayView() with dayDetectorBuilder
2. Add onDayTap()

If you have much better way to do this, please share it to me and I will try to implement it.
Thank you

[lavigarg-simform]

Hi @linoqui14, thanks for raising this issue!
I understand your use case: you want to show passed-time shading while still allowing users to tap on time slots. Using the latest package version, I tried replicating your issue and found the following issue with onDateTap()-

Root Cause
When you provide a custom dayDetectorBuilder, it completely replaces the package’s internal DefaultPressDetector.

As a result:
The built-in onDateTap callback no longer fires and your custom widget becomes the only touch handler in that area.
So even though the UI renders correctly, tap detection stops working.

Solution: Combine Visual Overlay + Tap Handler
You can solve this by layering both behaviors using a Stack:

IgnorePointer overlay → for non-interactive shading
DefaultPressDetector → for handling taps and converting to time slots

This lets you keep your custom UI while retaining tap functionality.

dayDetectorBuilder: ({
  required DateTime date,
  required double height,
  required double width,
  required double heightPerMinute,
  required MinuteSlotSize minuteSlotSize,
}) {
  final now = DateTime.now();
  final todayStart = DateTime(now.year, now.month, now.day);
  
  final isToday = date.year == now.year &&
      date.month == now.month &&
      date.day == now.day;

  // Calculate shaded height for passed time
  final shadeHeight = date.isBefore(todayStart)
      ? height  // all day passed
      : isToday
          ? (now.difference(todayStart).inMinutes * heightPerMinute).clamp(0.0, height)
          : 0.0;  // future day

  return Stack(
    children: [
      // Non-interactive overlay
      IgnorePointer(
        child: Align(
          alignment: Alignment.topCenter,
          child: Container(
            width: width,
            height: shadeHeight,
            color: Colors.blue.withOpacity(0.12),
          ),
        ),
      ),
      // Interactive tap detector with slot-to-time conversion
      DefaultPressDetector(
        date: date,
        height: height,
        width: width,
        heightPerMinute: heightPerMinute,
        minuteSlotSize: minuteSlotSize,
        startHour: 0,
        onDateTap: (tappedDateTime) {
          print("Tapped: ${tappedDateTime.hour}:${tappedDateTime.minute}");
        },
        onDateLongPress: null,
      ),
    ],
  );
},

Please give this a try and let me know if it resolves the issue. If you need any additional customisation or run into any problems, feel free to reach out!

Thanks!