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 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.
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:
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.
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.
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.
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.
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.
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.
Display the calendar timeslot views with specific time durations by hiding the unwanted hours to have a more focused view of your schedules.
Display appointments in a list below the month view by clicking a day.
All the listed features are flexible. Customize their appearance and format to provide a uniform and consistent look across your app.
This section explains how to create a simple application with appointments to demonstrate the usage of the Event Calendar widget.
Add the Syncfusion Flutter Calendar dependency in your pub sec file.
dependencies: syncfusion_flutter_calendar: ^17.4.40-beta
Run the following commands to get the required packages.
$ flutter pub get
Import the following package into your Dart code.
import 'package:syncfusion_flutter_calendar/calendar.dart';
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(),
));
}
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 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,
));
}
The default values for StartHour and 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: <int>[DateTime.friday, DateTime.saturday]),
));
}
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 property.
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfCalendar(
view: CalendarView.week,
firstDayOfWeek: 1,
));
}
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),
));
}
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 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<Meeting> _getDataSource() {
meetings = <Meeting>[];
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<Meeting> source;
@override
List<dynamic> 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;
}
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:
In this blog post, we walked through our new Syncfusion Flutter Event 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. Additionally, take a look at our demo app in Google Play Store and App Store.
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. It’s part of Syncfusion’s library of free technical 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, Direct-Trac, or feedback portal. We are always happy to assist you!