How to switch between views in the Flutter SfCalendar?
In Flutter Event Calendar, you can navigate between the calendar views using the view property of Calendar and in this article, switching between event calendar view has been achieved using the allowedViews property of the calendar.
STEP 1: Inside the state initialize the default values.
final CalendarController _controller = CalendarController();
Color? _headerColor, _viewHeaderColor, _calendarColor;
STEP 2: Place the event calendar to the body of the Scaffold widget.
body: SfCalendar(
view: CalendarView.week,
allowedViews: [
CalendarView.day,
CalendarView.week,
CalendarView.workWeek,
CalendarView.month,
CalendarView.timelineDay,
CalendarView.timelineWeek,
CalendarView.timelineWorkWeek
],
viewHeaderStyle:
ViewHeaderStyle(backgroundColor: viewHeaderColor),
backgroundColor: calendarColor,
controller: _controller,
initialDisplayDate: DateTime.now(),
dataSource: getCalendarDataSource(),
onTap: calendarTapped,
monthViewSettings: MonthViewSettings(
navigationDirection: MonthNavigationDirection.vertical),
),
addPostFrameCallback will be called after the widget build() is completed.
STEP 3: Using the OnTap event, you will get the targetElement (get details about the tapped element). By this, you can move to the calendar view using selected date of the calendar.
void calendarTapped(CalendarTapDetails calendarTapDetails) { if (_controller.view == CalendarView.month && calendarTapDetails.targetElement == CalendarElement.calendarCell) { _controller.view = CalendarView.day; } else if ((_controller.view == CalendarView.week || _controller.view == CalendarView.workWeek) && calendarTapDetails.targetElement == CalendarElement.viewHeader) { _controller.view = CalendarView.day; }}
|
Conclusion
I hope you enjoyed learning about how to switch between views in the Flutter SfCalendar.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Hi Maria,
Thank you for contacting Syncfusion support.
Regarding Query: is there a way to create a custom view and add it to the list of available views?
By using the view property of CalendarController, you can move to the required views. We have prepared the simple sample for showing the list of calendar views in a PopupMenuItem and moved to the required views using onSelected callback of the PopupMenuButton. Please find the sample from the following link.
Also, we have KB documentation for the same. Please find the documentation from the same.
KB link: https://www.syncfusion.com/kb/12141/how-to-do-programmatic-navigation-using-flutter-calendar
Regarding Query: I want to build a horizontal view for the week. Can you please use the timeline day, week, workweek and month views, it display the days in horizontal axis. Please find the documentation link for the same.
Link: https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarView.html
We hope that this helps you. Please let us know if you need further assistance.
Regards, Indumathi R
Hi Maria,
Thank you for the update.
We didn’t understand your requirement clearly. Can you please share more details about your requirement clearly or if possible please share an illustration image of your requirement clearly? It would be helpful for us to analyze and provide you with a solution at the earliest.
Regards, Indumathi R
Hi Maria,
Thank you for the update.
We are unable to access the shared location of the image. If possible, can you please share the image in the ZIP folder, it would be helpful for us to analyze and provide you with a solution at the earliest.
Regards, Indumathi R
Thank you for the helpful information. But I wish to see the implementation of syncfusion calendar with API or Firebase based events.
Hi Syncfusion team, is there a way to create a custom view and add it to the list of available views? I want to build a horizontal view for the week.