--- title: "Introducing the Event Calendar Widget for Flutter" published_at: "2020-01-14T12:00:06+00:00" modified_at: "2025-03-20T11:37:05+00:00" url: "https://www.syncfusion.com/blogs/post/introducing-the-calendar-widget-for-flutter" excerpt: "We are pleased to introduce our new widget, the Event Calendar, for the Flutter platform. The beta version of the Syncfusion Flutter Event Calendar package is available in pub.dev. The Syncfusion Flutter Event Calendar widget was developed natively in Dart..." taxonomy_category: - "Desktop" - "Flutter" taxonomy_post_tag: - "Calendar" - "Flutter" - "New Controls" - "New Features" --- # Introducing the Event Calendar Widget for Flutter [Nijamudeen](https://www.syncfusion.com/blogs/author/nijamudeensulaiman) ![Introducing Calendar Widget in Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Introducing-Calendar-Widget-in-Flutter.jpg) We are pleased to introduce our new widget, the Event Calendar, for the Flutter platform. The beta version of the [Syncfusion Flutter Event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) package is available in [pub.dev](https://pub.dev/packages/syncfusion_flutter_calendar) . The Syncfusion Flutter Event Calendar widget was developed natively in [Dart](https://dart.dev/) and has seven types of built-in configurable view modes that provide basic functionalities for scheduling, managing, and representing appointments efficiently. The Event Calendar widget exposes a clean and convenient user interface for custom working days and hours, and calendar operations such as date navigation and selection.![Calendar widget for Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Calendar-widget-for-Flutter.png) Let’s now briefly see the features of the Event Calendar, and then I’ll walk you through the steps to add one to your application. The Syncfusion Flutter Event Calendar has a rich set of features: - Multiple calendar view modes - Appointments - Recurring appointments - Time zones - Flexible working days - Customizable first day of the week - Customizable start and end hours - Month agenda view - Appearance customization ## Multiple calendar view modes A wide range of built-in view modes is available: day, week, workweek, month, timeline day, timeline week, and timeline work week. This allows you to conveniently customize every view with unique and view-specific options.![Multiple calendar view modes - Calendar Widget for Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Multiple-calendar-view-modes-Calendar-Widget-for-Flutter.png) ## Appointments Appointments contain information on events scheduled at specified times. In addition to the default appointments, users can use their own collections to connect a business entity to an appointment by mapping their fields, such as start time, end time, subject, notes, and recurrence.![Appointments in Calendar widget for Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Appointments-in-Calendar-widget-for-Flutter.png) ## Recurring appointments Easily configure recurring events that occur on a daily, weekly, monthly, or yearly basis with optimized recurrence options. You can also skip or change an occurrence of a recurring appointment.![Recurring appointments in Calendar widget for Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Recurring-appointments-in-Calendar-widget-for-Flutter.jpg) ## Time zones Regardless of the time zone in your device, Event Calendar supports setting a different time zone for the control itself, as well as events individually. ## Flexible working days Customize the working days in a work week as needed, so that the remaining days will be hidden from the view and you have a more focused view of your schedules.![Flexible working days in Calendar widget for Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Flexible-working-days-in-Calendar-widget-for-Flutter.jpg) ## First day of the week Customize the first day of the week as per the default locale, which defaults to Sunday. You can also start a week with your desired day.![First day of the week in Calendar widget for Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/First-day-of-the-week-in-Calendar-widget-for-Flutter.jpg) ## Custom start and end hours Display the calendar timeslot views with specific time durations by hiding the unwanted hours to have a more focused view of your schedules. ## Month agenda view Display appointments in a list below the month view by clicking a day.![Month agenda view in Calendar widget for Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Month-agenda-view-in-Calendar-widget-for-Flutter.jpg) ## Appearance customization All the listed features are flexible. Customize their appearance and format to provide a uniform and consistent look across your app.![Appearance customization in Calendar widget for Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Appearance-customization-in-Calendar-widget-for-Flutter.jpg) ## Add a Flutter Event Calendar to your app This section explains how to create a simple application with appointments to demonstrate the usage of the Event Calendar widget. ### Add dependency Add the Syncfusion Flutter Calendar dependency in your pub sec file. ``` dependencies: syncfusion_flutter_calendar: ^17.4.40-beta ``` ### Get packages Run the following commands to get the required packages. ``` $ flutter pub get ``` ### Import package Import the following package into your Dart code. ``` import 'package:syncfusion_flutter_calendar/calendar.dart'; ``` ## Add an event calendar to the widget tree After importing the package, initialize SfCalendar as a child of any widget, such as a container widget. ``` @override Widget build(BuildContext context) { return Scaffold( body: Container( child: SfCalendar(), )); } ``` ### Change different calendar views The Event Calendar widget provides seven different types of views to display dates. The views can be assigned to the widget constructor by using the [view](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfSchedule.XForms.SfSchedule.html#Syncfusion_SfSchedule_XForms_SfSchedule_ScheduleView) property. By default, the widget is assigned to the day view. The current date will be displayed initially for all the calendar views. ``` @override Widget build(BuildContext context) { return Scaffold( body: SfCalendar( view: CalendarView.month, )); } ``` ### Add flexible working days and working hours The default values for [StartHour](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfSchedule.XForms.WorkWeekViewSettings.html#Syncfusion_SfSchedule_XForms_WorkWeekViewSettings_StartHour) and [EndHour](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfSchedule.XForms.WorkWeekViewSettings.html#Syncfusion_SfSchedule_XForms_WorkWeekViewSettings_EndHour) are 0 and 24 to show all the time slots in time slot views. You can set the **startHour** and ** endHour** properties in ** timeSlotViewSettings** to show only the required time duration to the end users. You can set the ** startHour** and ** endHour** in time duration to show the required time duration in minutes. You can also customize the nonworking days of a week by using the **nonWorkingDays** property in ** timeSlotViewSettings** to show only the required days for the end users. ``` @override Widget build(BuildContext context) { return Scaffold( body: SfCalendar( view: CalendarView.workweek, timeSlotViewSettings: TimeSlotViewSettings( startHour: 9, endHour: 16, nonWorkingDays: [DateTime.friday, DateTime.saturday]), )); } ``` ### Change the first day of week The Event Calendar widget will be rendered with Sunday as the first day of the week, but you can customize it to any day by using the [firstDayOfWeek](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfSchedule.XForms.SfSchedule.html#Syncfusion_SfSchedule_XForms_SfSchedule_FirstDayOfWeek) property. ``` @override Widget build(BuildContext context) { return Scaffold( body: SfCalendar( view: CalendarView.week, firstDayOfWeek: 1, )); } ``` ### Add month agenda view The Event Calendar month view displays a divided agenda view that is used to show the selected date’s appointments below the month. You can show the agenda view by setting the **showAgenda** property to true in ** monthViewSettings**. ``` @override Widget build(BuildContext context) { return Scaffold( body: SfCalendar( view: CalendarView.month, monthViewSettings: MonthViewSettings(showAgenda: true), )); } ``` ### Add data source The Event Calendar widget has the built-in capability to handle appointment arrangements internally based on appointment collections. You need to assign the created collection to the [DataSource](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfSchedule.XForms.SfSchedule.html#Syncfusion_SfSchedule_XForms_SfSchedule_DataSource) property. You can also map custom appointment data to our Event Calendar. ``` @override Widget build(BuildContext context) { return Scaffold( body: SfCalendar( view: CalendarView.month, dataSource: MeetingDataSource(_getDataSource()), monthViewSettings: MonthViewSettings( appointmentDisplayMode: MonthAppointmentDisplayMode.appointment), )); } List _getDataSource() { meetings = []; final DateTime today = DateTime.now(); final DateTime startTime = DateTime(today.year, today.month, today.day, 9, 0, 0); final DateTime endTime = startTime.add(const Duration(hours: 2)); meetings.add( Meeting('Conference', startTime, endTime, const Color(0xFF0F8644), false)); return meetings; } } class MeetingDataSource extends CalendarDataSource { MeetingDataSource(this.source); List source; @override List get appointments => source; @override DateTime getStartTime(int index) { return source[index].from; } @override DateTime getEndTime(int index) { return source[index].to; } @override String getSubject(int index) { return source[index].eventName; } @override Color getColor(int index) { return source[index].background; } @override bool isAllDay(int index) { return source[index].isAllDay; } } class Meeting { Meeting(this.eventName, this.from, this.to, this.background, this.isAllDay); String eventName; DateTime from; DateTime to; Color background; bool isAllDay; } ``` ## What’s next The Event Calendar widget is now available as a preview, and we have planned a lot of improvements for our future releases. The following are some of the features you can expect in the Flutter Event Calendar in the upcoming releases: - Localization - Accessibility - RTL - Schedule view (agenda) - Calendar theme - Programmatic navigation - Minimum and maximum dates - Blackout dates - Special regions - Resources - Drag and drop - Reminders ## Conclusion In this blog post, we walked through our new [Syncfusion Flutter Event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) and its features. Try this control and share your feedback in the comments section. You can see a Syncfusion Flutter app with many examples in this [GitHub location](https://github.com/syncfusion/flutter-examples) . Additionally, take a look at our demo app in [Google Play Store](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en) and [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341) . If you want an in-depth learning experience on how to create a complete Flutter app, be sure to read [Flutter Succinctly by Ed Freitas](https://www.syncfusion.com/ebooks/flutter-succinctly) . It’s part of [Syncfusion’s library of free technical ebooks](https://www.syncfusion.com/ebooks) . Also, if you need a new widget for the Flutter framework, please let us know in the comments section. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/flutter) . We are always happy to assist you!