Flutter Event Calendar Callbacks (SfCalendar)

18 Nov 20188 minutes to read

The Flutter Event Calendar supports the ViewChangedCallback and CalendarTapCallback to handle user interaction.

View changed callback

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

  • visibleDates - returns the current view visible dates collection.
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @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 Flutter Event Calendar is tapped.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @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 header of the Flutter Event Calendar.

Flutter Event Calendar details callback

Return details of the Flutter Event Calendar based on the given offset passed through an 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 Flutter Event Calendar element based on the given offset.
  • resource - returns the resource based on the given offset.
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatefulWidget {
  const CalendarApp({super.key});

  @override
  State<CalendarApp> createState() => _CalendarAppState();
}

class _CalendarAppState extends State<CalendarApp> {
  final CalendarController _calendarController = CalendarController();

  @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 element in the Flutter Event Calendar.
  • resource - returns the long-pressed resource in the Flutter Event Calendar.
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @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