Introducing the New Schedule View in Flutter Event Calendar
Tags: flutter, mobile, android, ios
Published: 2020-07-14 12:20:28

---
title: Introducing the New Schedule View in Flutter Event Calendar
published: true
date: 2020-07-14 10:02:17 UTC
tags: flutter, mobile, android, ios
canonical_url: https://www.syncfusion.com/blogs/post/introducing-the-new-schedule-view-in-flutter-event-calendar.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Introducing-the-New-Schedule-View-in-Flutter-Event-Calendar.jpg
---

The schedule view is a discrete view integrated into our [Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) widget that shows a list of scheduled appointments grouped by week, between minimum and maximum dates. This feature is available in our [2020 Volume 2 release](https://www.syncfusion.com/forums/155798/essential-studio-2020-volume-2-release-v18-2-0-44-is-available-for-download).

Through this feature, you can display a list of appointments along with day, week, and month headers. You can assign unique styles to the available headers. This rich feature set includes customization, globalization, and localization.

The schedule view has two different UIs. They are:

- Mobile: Displays the month, week, and date header.
- Web: Displays the appointments alone.

![Schedule view in web and Mobile](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Schedule-view-web.png)<figcaption>Schedule view in web and Mobile</figcaption>

In this blog post, I will explain the key features of the schedule view in the Calendar widget. If you are new to the Calendar widget, please go through the [Getting Started article](https://dev.to/syncfusion/introducing-the-event-calendar-widget-for-flutter-3mij) in the Calendar documentation before proceeding.

Let’s explore!

## Appointment item height

You can customize the height of an appointment in the schedule view by setting an appropriate value to the **appointmentItemHeight** property from the **ScheduleViewSettings** of the Calendar widget.

Refer to the following code example.

```js
@override
  Widget build(BuildContext context) {
    return Container(
      child: SfCalendar(
        view: CalendarView.schedule,
        scheduleViewSettings: ScheduleViewSettings(
          appointmentItemHeight: 70,
        ),
      ),
    );
  } 
```

![Customized Appointment Height in Schedule View](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Customized-Appointment-Height-in-Schedule-View.png)<figcaption>Customized Appointment Height in Schedule View</figcaption>

## Hide empty weeks

You can hide the weeks that don’t have any appointments in them in the schedule view by setting the value **true** to the **hideEmptyScheduleWeek** property available in the **scheduleViewSettings**.

Refer to the following code example.

```js
@override
  Widget build(BuildContext context) {
    return Container(
      child: SfCalendar(
        view: CalendarView.schedule,
        scheduleViewSettings: ScheduleViewSettings(
          hideEmptyScheduleWeek: true,
        ),
      ),
    );
  }
```

![Hiding Empty Weeks in Schedule View](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Hiding-Empty-Weeks-in-Schedule-View.png)<figcaption>Hiding Empty Weeks in Schedule View</figcaption>

## Customization

To provide a uniform and consistent look, the schedule view allows you to customize all its headers, appointment text style, and date and day formats.

Let’s see them with an appropriate code example!

### Appointment text customization

The appointment text style of the schedule view can be customized by setting the appropriate text style to the **appointmentTextStyle** property available in **scheduleViewSettings**.

Refer the following code example.

```js
@override
  Widget build(BuildContext context) {
    return Container(
      child: SfCalendar(
        view: CalendarView.schedule,
        scheduleViewSettings: ScheduleViewSettings(
            appointmentTextStyle: TextStyle(
                fontSize: 12, fontWeight: FontWeight.w500, color: Colors.lime)),
      ),
    );
  }
```

![Appointment Text Style Customization in Schedule View](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Appointment-Text-Style-Customization-in-Schedule-View.png)<figcaption>Appointment Text Style Customization in Schedule View</figcaption>

### Day header customization

The day header is the one that displays the date and day of the appointments on the left side of the view. This will be displayed only when the date has an appointment on it.

To provide a consistent look and format, you can customize the day header using the properties available in the **dayHeaderSettings** property available in the **scheduleViewSettings**.

The **DayHeaderSettings** class contains the properties that allow you to customize the features. This can be done by setting appropriate values to the **dayFormat** , **width** , **dayTextStyle** , and **dateTextStyle** in **DayHeaderSettings**.

Refer to the following code example.

```js
@override
  Widget build(BuildContext context) {
    return Container(
      child: SfCalendar(
        view: CalendarView.schedule,
        scheduleViewSettings: 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,
                ))),
      ),
    );
  }
```

![Day Header Customization in Schedule View](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Day-Header-Customization-in-Schedule-View.png)<figcaption>Day Header Customization in Schedule View</figcaption>

### Week header customization

The week header is the one that displays the first and last date of the week at the start of a week in the schedule view.

To provide a consistent look and format, you can customize the week header using the properties available in the **weekHeaderSettings** property in the **scheduleViewSettings**. This can be done by setting appropriate values to the **startDateFormat** , **endDateFormat** , **height** , **textAlign** , **backgroundColor** , and **weekTextStyle** of **WeekHeaderSettings**.

Refer to the following code example.

```js
@override
  Widget build(BuildContext context) {
    return Container(
      child: SfCalendar(
        view: CalendarView.schedule,
        scheduleViewSettings: 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,
                ))),
      ),
    );
  }
```

![Week Header Customization in Schedule View](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Week-Header-Customization-in-Schedule-View.png)<figcaption>Week Header Customization in Schedule View</figcaption>

### Month header customization

A month header is the one that displays the month and year at the start of a new month in the schedule view.

To provide a consistent look and feel, you can customize the month header through the properties available in the **monthHeaderSettings** property available in the **scheduleViewSettings**. This can be done by setting appropriate value to the **monthFormat** , **height** , **textAlign** , **backgroundColor** , and **monthTextStyle** of **MonthHeaderSettings**.

Refer to the following code example.

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

![Month Header Customization in Schedule View](https://www.syncfusion.com/blogs/wp-content/uploads/2020/07/Month-Header-Customization-in-Schedule-View.png)<figcaption>Month Header Customization in Schedule View</figcaption>

## Conclusion

In this blog post, we had a quick overview of the key features of the newly introduced schedule view in the [Flutter Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar). This feature is available from the [Essential Studio 2020 Volume 2 release](https://www.syncfusion.com/forums/155798/essential-studio-2020-volume-2-release-v18-2-0-44-is-available-for-download) onwards. Enjoy these user-friendly, custom features and elegantly schedule your appointments.

You can explore other features in the Calendar widget’s [documentation](https://help.syncfusion.com/flutter/calendar/overview), where you can find detailed explanations of each feature with code examples.

Please feel free to try out the samples available in our [GitHub location](https://github.com/SyncfusionExamples/Resource-view), and share your feedback or ask questions 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/home). We are always happy to assist you.

If you liked this article, then we think you would also like the following articles:

- [Blog] [Introducing a Special Time Region in the Flutter Event Calendar](https://dev.to/syncfusion/introducing-a-special-time-region-in-the-flutter-event-calendar-34fk)
- [Blog] [What’s New in 2020 Volume 2: Flutter Charts](https://dev.to/kartik110895/what-s-new-in-2020-volume-2-flutter-charts-1hbm-temp-slug-6192732)
- [Blog] [Announcing Syncfusion Flutter Challenge](https://dev.to/syncfusion/announcing-syncfusion-flutter-challenge-50km)

The post [Introducing the New Schedule View in Flutter Event Calendar](https://www.syncfusion.com/blogs/post/introducing-the-new-schedule-view-in-flutter-event-calendar.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).