Articles in this section
Category / Section

How to view schedule in the Flutter Calendar

2 mins read

In the Flutter Event Calendar, you can create schedule view by using `view` property of the calendar, by setting the calendar view mode as `schedule` you can create schedule view for the Flutter calendar.

Step 1:

Place the calendar inside the body of the Scaffold widget. Please find the entire code snippet.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
void main() => runApp(ScheduleView());
class ScheduleView extends StatefulWidget {
  ScheduleViewState createState() => ScheduleViewState();
class ScheduleViewState extends State<ScheduleView> {
  void initState() {
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: SfCalendar(
            view: CalendarView.schedule,
            dataSource: _getDataSource(),
  _DataSource _getDataSource() {
    final List<Appointment> appointments = <Appointment>[];
      startTime: 4)),
      endTime: 5)),
      subject: 'Meeting',
      startTime: -2, hours: 4)),
      endTime: -2, hours: 5)),
      subject: 'Development Meeting   New York, U.S.A',
      color: Color(0xFFf527318),
      startTime: -2, hours: 3)),
      endTime: -2, hours: 4)),
      subject: 'Project Plan Meeting   Kuala Lumpur, Malaysia',
      color: Color(0xFFfb21f66),
      startTime: -2, hours: 2)),
      endTime: -2, hours: 3)),
      subject: 'Support - Web Meeting   Dubai, UAE',
      color: Color(0xFFf3282b8),
      startTime: -2, hours: 1)),
      endTime: -2, hours: 2)),
      subject: 'Project Release Meeting   Istanbul, Turkey',
      color: Color(0xFFf2a7886),
        startTime: Duration(hours: 4, days: -1)),
        endTime: Duration(hours: 5, days: -1)),
        subject: 'Release Meeting',
        color: Colors.lightBlueAccent,
        isAllDay: true));
      startTime: Duration(hours: 2, days: -4)),
      endTime: Duration(hours: 4, days: -4)),
      subject: 'Performance check',
      color: Colors.amber,
      startTime: Duration(hours: 11, days: -2)),
      endTime: Duration(hours: 12, days: -2)),
      subject: 'Customer Meeting   Tokyo, Japan',
      color: Color(0xFFffb8d62),
      startTime: Duration(hours: 6, days: 2)),
      endTime: Duration(hours: 7, days: 2)),
      subject: 'Retrospective',
      color: Colors.purple,
    return _DataSource(appointments);
class _DataSource extends CalendarDataSource {
  _DataSource(List<Appointment> source) {
    appointments = source;


By using the hideEmptyScheduleWeek  you can hide the weeks that do not have an appointments.

Reference blog:

View sample in GitHub





Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied