Callbacks in Flutter Event Calendar (SfCalendar)

6 Jun 20237 minutes to read

Calendar supports the ViewChangedCallback and CalendarTapCallback to interact with Flutter calendar.

View changed callback

The onViewChanged callback triggers when the current view of calendar changed, that is view swiped to previous /next view, calendar view switched to another calendar view.

  • visibleDates - returns the current view visible dates collection.
@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          onViewChanged: (ViewChangedDetails details) {
            List<DateTime> dates = details.visibleDates;
          },
        ),
      ),
    ),
  );
}

NOTE

  • Initially, the onViewChanged callback would be triggered to load the appointment data on the basis of visible dates.

Calendar tap callback

The onTap callback triggers whenever the calendar tapped.

  • date - returns the selected date.
  • appointments - returns the selected appointments.
  • targetElement - returns the element tapped.
@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          onTap: (CalendarTapDetails details) {
            dynamic appointment = details.appointments;
            DateTime date = details.date!;
            CalendarElement element = details.targetElement;
          },
        ),
      ),
    ),
  );
}

NOTE

  • For recurrence appointment, the tap details will always return as Appointment, even for the custom business object.
  • The onTap and onLongPress callbacks are not applicable for pop-ups like allowedViews and date picker in the calendar header.

Calendar details callback

Return calendar details based on the given offset passed through argument by using the getCalendarDetailsAtOffset method.

  • date - returns the date based on the given offset.
  • appointments - returns the appointments based on the given offset.
  • targetElement - returns the calendar element based on the given offset.
  • resource - returns the resource based on the given offset.
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: MouseRegion(
              onHover: (PointerHoverEvent event) {
                CalendarDetails? details = _calendarController
                    .getCalendarDetailsAtOffset!(event.localPosition);
                if (details!.targetElement == CalendarElement.appointment) {
                  dynamic appointments = details.appointments;
                  final String subject =
                      details.appointments![0].subject.toString();
                  final dynamic startTime = details.appointments![0].startTime;
                  final dynamic endTime = details.appointments![0].endTime;
                }
              },
              child: SfCalendar(
                view: CalendarView.month,
                controller: _calendarController,
                dataSource: _getCalendarDataSource(),
              ))),
    );
  }
}

Long press callback

The onLongPress callback is called, whenever the SfCalendar elements are long pressed on view.

The long-pressed date, appointments, and element details when the long-press action performed on element available in the CalendarLongPressDetails.

  • date - returns the long-pressed date.
  • appointments - returns the long-pressed appointments.
  • targetElement - returns the long-pressed calendar element.
@override
Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Container(
      child: SfCalendar(
        view: CalendarView.week,
        onLongPress: (CalendarLongPressDetails details) {
          DateTime date = details.date!;
          dynamic appointments = details.appointments;
          CalendarElement view = details.targetElement;
        },
      ),
    )));
  }

NOTE

  • For recurrence appointment, the long pressed details will always return as Appointment, even for the custom business object.

See also