Flutter Event Calendar Schedule View (SfCalendar)

18 Nov 201811 minutes to read

The schedule view of SfCalendar shows a list of scheduled appointments grouped by week, between min and max dates, by default displaying the appointments from the current date. If the dataSource property of SfCalendar is null then the schedule view will display the month, week, and date headers alone in the view.

The schedule view displays two different UIs for mobile and web. For mobile, it will display the month header, week header, and date header, but for the web, it will display the appointments alone in the view.

Schedule view in Flutter event calendar

NOTE

  • If the web view width is less than 767, the calendar will render the mobile schedule UI for the web.

Appointment item height

You can customize the height of an appointment in a schedule view by using the appointmentItemHeight property of ScheduleViewSettings.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfCalendar(
          view: CalendarView.schedule,
          scheduleViewSettings: const ScheduleViewSettings(
            appointmentItemHeight: 70,
          ),
        ),
      ),
    );
  }
}

Schedule view appointment height customization

Hide empty weeks

You can hide the weeks that do not have an appointment on it in schedule view, by using the hideEmptyScheduleWeek property of ScheduleViewSettings.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfCalendar(
          view: CalendarView.schedule,
          scheduleViewSettings: const ScheduleViewSettings(
            hideEmptyScheduleWeek: true,
          ),
        ),
      ),
    );
  }
}

Schedule view hide empty agenda weeks

Appointment text customization

The appointment text style of schedule view can be customized by using the appointmentTextStyle property of ScheduleViewSettings.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfCalendar(
          view: CalendarView.schedule,
          scheduleViewSettings: const ScheduleViewSettings(
              appointmentTextStyle: TextStyle(
                  fontSize: 12, fontWeight: FontWeight.w500, color: Colors.lime)),
        ),
      ),
    );
  }
}

Schedule view appointment customization

Day header customization

The day header can be customized by using the dayHeaderSettings property of ScheduleViewSettings.

The DayHeaderSettings contains the properties to customize the day format, width, day text style, and date text style of the day header by using the dayFormat, width, dayTextStyle, and dateTextStyle of DayHeaderSettings.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfCalendar(
          view: CalendarView.schedule,
          scheduleViewSettings: const ScheduleViewSettings(
              dayHeaderSettings: DayHeaderSettings(
                  dayFormat: 'EEEE',
                  width: 70,
                  dayTextStyle: TextStyle(
                    fontSize: 10,
                    fontWeight: FontWeight.w300,
                    color: Colors.red,
                  ),
                  dateTextStyle: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w300,
                    color: Colors.red,
                  ))),
        ),
      ),
    );
  }

Schedule view day header customization

Week header customization

The week header can be customized by using the weekHeaderSettings property of ScheduleViewSettings.

The WeekHeaderSettings contains the properties to customize the start and end date format, height, Text alignment, background color, and week text style of the week header by using the startDateFormat, endDateFormat, height, textAlign, backgroundColor, and weekTextStyle of WeekHeaderSettings.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfCalendar(
          view: CalendarView.schedule,
          scheduleViewSettings: const ScheduleViewSettings(
              weekHeaderSettings: WeekHeaderSettings(
                  startDateFormat: 'dd MMM ',
                  endDateFormat: 'dd MMM, yy',
                  height: 50,
                  textAlign: TextAlign.center,
                  backgroundColor: Colors.red,
                  weekTextStyle: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w400,
                    fontSize: 15,
                  ))),
        ),
      ),
    );
  }

Schedule view week header customization

Month header customization

The month header can be customized by using the monthHeaderSettings property of ScheduleViewSettings.

The MonthHeaderSettings contains the properties to customize the month format, height, text alignment, background color, and month text style of the month header by using the monthFormat, height, textAlign, backgroundColor, and monthTextStyle of MonthHeaderSettings.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

void main() {
  runApp(const CalendarApp());
}

class CalendarApp extends StatelessWidget {
  const CalendarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfCalendar(
          view: CalendarView.schedule,
          scheduleViewSettings: const ScheduleViewSettings(
              monthHeaderSettings: MonthHeaderSettings(
                  monthFormat: 'MMMM, yyyy',
                  height: 100,
                  textAlign: TextAlign.left,
                  backgroundColor: Colors.green,
                  monthTextStyle: TextStyle(
                    color: Colors.red,
                    fontSize: 25,
                    fontWeight: FontWeight.w400))),
        ),
      ),
    );
  }

Schedule view month header customization

See also