Flutter SfCalendar Tutorial Example

In this article, we are going to integrate sync fusion flutter sfcalendar in flutter applications. You can also check out flutter calendar related articles.

This flutter sfcalendar widget has nine built-in configurable views such as day, week, workweek, month, schedule, timeline day, timeline week, timeline workweek and timeline month. This views are used to schedule appointments or events in calendar widget.

This calendar widget provides appointments property. This property contains info about events with scheduled times. You can also get start time, end time, subject, notes of specific event from appointments property. We can also use recurring appointments which are repeated on daily, weekly, monthly or yearly basis.

We can also set specific timezone for our calendar UI. SfCalendar widget has many properties to customize UI. We can change background color of calendar widget. We can also change date and time format of scheduled events. We can also set minimum and maximum date in our calendar UI.

We can also customize workdays in calendar widget. So remaining days in week are hidden from UI. We can also change first day of week from sunday to any other day. We can also disable specific dates in calendar UI. So users can not select that dates to schedule events.

We can also hide previous and next month UI in our calendar widget. We can also display specific hours in day UI by setting start hours and end hours. We can also see events on monthly basis by setting month view. We can also localize all static text in calendar UI. We can also set Right-to-left direction for calendar UI for some languages.


Add required dependency in your pubspec.yaml file

syncfusion_flutter_calendar: ^19.2.59

Add Flutter SfCalendar Widget

import ‘package:flutter/cupertino.dart’;
import ‘package:flutter/material.dart’;
import ‘package:syncfusion_flutter_calendar/calendar.dart’;

class SfCalenderScreen extends StatefulWidget {
_SfCalenderScreenState createState() => _SfCalenderScreenState();

class _SfCalenderScreenState extends State<SfCalenderScreen> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter SFCalender’),),
body: SfCalendar(
view: CalendarView.month,
dataSource: MeetingDataSource(getMeetingData()),
monthViewSettings: MonthViewSettings(
appointmentDisplayMode: MonthAppointmentDisplayMode.appointment),


Add Meeting Data

List<Meeting> getMeetingData() {
final List<Meeting> listMeetings = <Meeting>[];
final DateTime startDateTime1 = DateTime(2021, 9, 7, 11, 0, 0);
final DateTime endDateTime1 = startDateTime1.add(Duration(hours: 2));
listMeetings.add(Meeting(“Meeting 1”, startDateTime1, endDateTime1, Colors.orangeAccent, false));
final DateTime startDateTime2 = DateTime(2021, 9, 8, 12, 0, 0);
final DateTime endDateTime2 = startDateTime1.add(Duration(hours: 3));
listMeetings.add(Meeting(“Meeting 2”, startDateTime2, endDateTime2, Colors.tealAccent, false));
return listMeetings;

class MeetingDataSource extends CalendarDataSource {
MeetingDataSource(List<Meeting> listMeetings){
appointments = listMeetings;

DateTime getStartTime(int position) {
return appointments[position].fromDateTime;

DateTime getEndTime(int position) {
return appointments[position].toDateTime;

String getSubject(int position) {
return appointments[position].strEventName;

Color getColor(int position) {
return appointments[position].bgColor;

bool isAllDay(int position) {
return appointments[position].isAllDay;

class Meeting {
Meeting(this.strEventName, this.fromDateTime, this.toDateTime, this.bgColor, this.isAllDay);

String strEventName;
DateTime fromDateTime;
DateTime toDateTime;
Color bgColor;
bool isAllDay;

flutter sfcalendar

One thought on “Flutter SfCalendar Tutorial Example

Leave a Reply