How to remove the onTap border cell effect using SfCalendar

Question

I have a calendar with appointments, and I want on onTap to select only appointments and not ba able to select the cell.

I have done something like that :

SfCalendar(
  //...
  selectionDecoration: BoxDecoration(
    color: Colors.transparent,
    border: Border.all(
      color: Theme.of(context).colorScheme.primary,
      width: 2),
    borderRadius:
      const BorderRadius.all(Radius.circular(4)),
    shape: BoxShape.rectangle,
  ),
  controller: _calendarController,
  onTap: (details) {
    if (details.targetElement !=
        CalendarElement.appointment) {
      _calendarController.selectedDate = null;
      return;
    }

    // My selection code here
  },

But It seems overly complicated.

Does there is a simpler way ?

Thank you so much for you're time

score 0 · Answer 1 · answered Aug 18 '23 at 17:28

try this way -

SfCalendar(
  // ...
  selectionDecoration: BoxDecoration(
    color: Colors.transparent,
    border: Border.all(
      color: Theme.of(context).colorScheme.primary,
      width: 2,
    ),
    borderRadius: const BorderRadius.all(Radius.circular(4)),
    shape: BoxShape.rectangle,
  ),
  controller: _calendarController,
  onLongPress: (details) {
    if (details.targetElement == CalendarElement.appointment) {
      // Your selection code here
    }
  },
)

By using onLongPress, you ensure that only the appointments can be selected when a long press is detected, which might provide a smoother user experience.

How to remove the onTap border cell effect using SfCalendar

1 Answers1