How to move to a specific time while switching from month to day view in the Flutter Calendar?

2 mins read

In the Flutter Event Calendar, you can move to the specific time while switching from MonthView to any views such as DayView by using the initialDisplayDate property of calendar.

STEP 1: In initState(), set the default values for calendar.

final CalendarController _controller = CalendarController();
DateTime _jumpToTime = DateTime.now();

STEP 2: Place the calendar in the body of the Scaffold.

body: Column(
  children: <Widget>[
    Expanded(
      child: SfCalendar(view: CalendarView.month,
        initialDisplayDate: _jumpToTime,
        controller: _controller,
        onTap: calendarTapped,
      ),
    ),
  ],
),

STEP 3: Using the OnTap event, you can move from MonthView to the DayView of selected date with specified time.

void calendarTapped(CalendarTapDetails calendarTapDetails) {
  if (_controller.view == CalendarView.month &&
      calendarTapDetails.targetElement == CalendarElement.calendarCell) {
    _controller.view = CalendarView.day;
  }
}

View sample in GitHub

Flutter Calendar move to date

Did you find this information helpful?

Yes

Comments (0)

How to move to a specific time while switching from month to day view in the Flutter Calendar?

Access denied