How to add custom header and view header in the Flutter Calendar?

4 mins read

In the Flutter Event Calendar, you can customize the header and view header and it can be achieved by hiding headers and placing Container, Row, and Column widgets of the flutter.

STEP 1: Set the `HeaderHeight` and `ViewHeaderHeight` properties to `0` to hide the default headers. Please find the following image for the calendar without headers.

@override
Widget build(BuildContext context) {
  Expanded(
    child: SfCalendar(
      view: CalendarView.week,
      headerHeight: 0,
      viewHeaderHeight: 0,
    ),
  );
}

Header customization in Flutter Calendar

STEP 2: Add Container widget as a children for the header customization.

Container(
  color: Color(0xFF381460),
  width: width,
  height: 40,
  child: Text(_headerText!,
      textAlign: TextAlign.center,
      style: TextStyle(fontSize: 25, color: Colors.white)),
),

STEP 3: Add another Row widget as children for the `view header` customization of day.

Row(
  children: <Widget>[
    Container(
      color: Color(0xFFa278b5),
      width: cellWidth,
      child: Text(''),
    ),
    Container(
        color: Color(0xFFa278b5),
        width: cellWidth,
        child: Text(_viewHeaderText!, textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white))),
    Container(
      color: Color(0xFFa278b5),
      width: cellWidth,
      child: Text(_viewHeaderText1!, textAlign: TextAlign.center, style: TextStyle(color: Colors.white)),
    ),
    Container(
      color: Color(0xFFa278b5),
      width: cellWidth,
      child: Text(_viewHeaderText2!, textAlign: TextAlign.center, style: TextStyle(color: Colors.white)),
    ),
    Container(
      color: Color(0xFFa278b5),
      width: cellWidth,
      child: Text(_viewHeaderText3!, textAlign: TextAlign.center, style: TextStyle(color: Colors.white)),
    ),
    Container(
      color: Color(0xFFa278b5),
      width: cellWidth,
      child: Text(_viewHeaderText4!, textAlign: TextAlign.center, style: TextStyle(color: Colors.white)),
    ),
    Container(
      color: Color(0xFFa278b5),
      width: cellWidth,
      child: Text(_viewHeaderText5!, textAlign: TextAlign.center,style: TextStyle(color: Colors.white)),
    ),
    Container(
      color: Color(0xFFa278b5),
      width: cellWidth,
      child: Text(_viewHeaderText6!, textAlign: TextAlign.center,style: TextStyle(color: Colors.white)),
    ),
  ],
),

STEP 4: Add Row widget as children for the view header customization of date.

Row(
  children: <Widget>[
    Container(
      color: Color(0xFFf6c3e5),
      width: cellWidth,
      height: 30,
      child: Text(""),
    ),
    Container(
      color: Color(0xFFf6c3e5),
      width: cellWidth,
      height: 30,
      child: Text(
        _dateText!,
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 25),
      ),
    ),
    Container(
      color: Color(0xFFf6c3e5),
      width: cellWidth,
      height: 30,
      child: Text(
        _dateText1!,
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 25),
      ),
    ),
    Container(
      color: Color(0xFFf6c3e5),
      width: cellWidth,
      height: 30,
      child: Text(
        _dateText2!,
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 25),
      ),
    ),
    Container(
      color: Color(0xFFf6c3e5),
      width: cellWidth,
      height: 30,
      child: Text(
        _dateText3!,
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 25),
      ),
    ),
    Container(
      color: Color(0xFFf6c3e5),
      width: cellWidth,
      height: 30,
      child: Text(
        _dateText4!,
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 25),
      ),
    ),
    Container(
      color: Color(0xFFf6c3e5),
      width: cellWidth,
      height: 30,
      child: Text(_dateText5!,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 25)),
    ),
    Container(
      color: Color(0xFFf6c3e5),
      width: cellWidth,
      height: 30,
      child: Text(_dateText6!,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 25)),
    ),
  ],
),

STEP 5: Then, add Expanded widget as children and place the calendar inside the Widget. Using the `OnViewChanged` event get the visible dates and using this you can assign the date values to the headers and view headers.

Expanded(
    child: SfCalendar(
      headerHeight: 0,
      viewHeaderHeight: 0,
      controller: _controller,
      view: CalendarView.week,
      onViewChanged: (ViewChangedDetails viewChangedDetails) {
        if (_controller.view == CalendarView.week) {
          _headerText = DateFormat('MMMM yyyy')
              .format(viewChangedDetails
              .visibleDates[viewChangedDetails.visibleDates.length ~/ 2])
              .toString();
          _viewHeaderText = DateFormat('EEE')
              .format(viewChangedDetails.visibleDates[0])
              .toString();
          _viewHeaderText1 = DateFormat('EEE')
              .format(viewChangedDetails.visibleDates[1])
              .toString();
          _viewHeaderText2 = DateFormat('EEE')
              .format(viewChangedDetails.visibleDates[2])
              .toString();
          _viewHeaderText3 = DateFormat('EEE')
              .format(viewChangedDetails.visibleDates[3])
              .toString();
          _viewHeaderText4 = DateFormat('EEE')
              .format(viewChangedDetails.visibleDates[4])
              .toString();
          _viewHeaderText5 = DateFormat('EEE')
              .format(viewChangedDetails.visibleDates[5])
              .toString();
          _viewHeaderText6 = DateFormat('EEE')
              .format(viewChangedDetails.visibleDates[6])
              .toString();
          _dateText = DateFormat('dd')
              .format(viewChangedDetails.visibleDates[0])
              .toString();
          _dateText1 = DateFormat('dd')
              .format(viewChangedDetails.visibleDates[1])
              .toString();
          _dateText2 = DateFormat('dd')
              .format(viewChangedDetails.visibleDates[2])
              .toString();
          _dateText3 = DateFormat('dd')
              .format(viewChangedDetails.visibleDates[3])
              .toString();
          _dateText4 = DateFormat('dd')
              .format(viewChangedDetails.visibleDates[4])
              .toString();
          _dateText5 = DateFormat('dd')
              .format(viewChangedDetails.visibleDates[5])
              .toString();
          _dateText6 = DateFormat('dd')
              .format(viewChangedDetails.visibleDates[6])
              .toString();
        }
        if (viewChangedDetails.visibleDates[viewChangedDetails.visibleDates.length~/2].day % 2 == 0) {
          icon1 = Icon(
            Icons.wb_cloudy,
            color: Colors.grey,
          );
          icon2 = Icon(
            Icons.wb_sunny,
            color: Colors.amber,
          );
          icon3 = Icon(
            Icons.wb_incandescent,
            color: Color(0xFF0ba0000),
          );
          icon4 = Icon(
            Icons.wb_auto,
            color: Colors.orange,
          );
          icon5 = Icon(Icons.wb_iridescent, color: Color(0xFF0253e35));
          icon6 = Icon(
            Icons.wb_sunny,
            color: Colors.amber,
          );
          icon7 = Icon(
            Icons.wb_incandescent,
            color: Color(0xFF0ba0000),
          );
        } else if (viewChangedDetails.visibleDates[viewChangedDetails.visibleDates.length~/2].day % 5 == 0) {
          icon1 = Icon(
            Icons.wb_sunny,
            color: Colors.amber,
          );
          icon2 = Icon(
            Icons.wb_cloudy,
            color: Colors.grey,
          );
          icon3 = Icon(
            Icons.wb_sunny,
            color: Colors.amber,
          );
          icon4 = Icon(Icons.wb_iridescent, color: Color(0xFF0253e35));
          icon5 = Icon(
            Icons.wb_incandescent,
            color: Color(0xFF0ba0000),
          );
          icon6 = Icon(
            Icons.wb_auto,
            color: Colors.orange,
          );
          icon7 = Icon(
            Icons.wb_cloudy,
            color: Colors.grey,
          );
        } else if (viewChangedDetails.visibleDates[viewChangedDetails.visibleDates.length~/2].day % 4 == 0) {
          icon1 = Icon(
            Icons.wb_cloudy,
            color: Colors.grey,
          );
          icon2 = Icon(Icons.wb_incandescent);
          icon3 = Icon(
            Icons.wb_auto,
            color: Colors.orange,
          );
          icon4 = Icon(Icons.wb_iridescent, color: Color(0xFF0253e35));
          icon5 = Icon(
            Icons.wb_sunny,
            color: Colors.yellow,
          );
          icon6 = Icon(
            Icons.wb_cloudy,
            color: Colors.grey,
          );
          icon7 = Icon(
            Icons.wb_sunny,
            color: Colors.yellow,
          );
        } else if (viewChangedDetails.visibleDates[viewChangedDetails.visibleDates.length~/2].day % 3 == 0) {
          icon1 = Icon(
            Icons.wb_sunny,
            color: Colors.yellow,
          );
          icon2 = Icon(Icons.wb_iridescent, color: Color(0xFF0253e35));
          icon3 = Icon(
            Icons.wb_incandescent,
            color: Color(0xFF0ba0000),
          );
          icon4 = Icon(
            Icons.wb_sunny,
            color: Colors.amber,
          );
          icon5 = Icon(
            Icons.wb_auto,
            color: Colors.orange,
          );
          icon6 = Icon(
            Icons.wb_auto,
            color: Colors.orange,
          );
          icon7 = Icon(
            Icons.wb_cloudy,
            color: Colors.grey,
          );
        } else {
          icon1 = Icon(
            Icons.wb_sunny,
            color: Colors.amber,
          );
          icon2 = Icon(
            Icons.wb_iridescent,
            color: Color(0xFF0253e35),
          );
          icon3 = Icon(
            Icons.wb_sunny,
            color: Colors.amber,
          );
          icon4 = Icon(
            Icons.wb_cloudy,
            color: Colors.grey,
          );
          icon5 = Icon(Icons.wb_iridescent, color: Color(0xFF0253e35));
          icon6 = Icon(
            Icons.wb_incandescent,
            color: Color(0xFF0ba0000),
          );
          icon7 = Icon(
            Icons.wb_auto,
            color: Colors.orange,
          );
        }
        SchedulerBinding.instance!.addPostFrameCallback((duration) {
          setState(() {});
        });
      },
    )
),

Note:

addPostFrameCallback will be called after the widget build() is completed.

View sample in GitHub

Flutter calendar custom headers

Conclusion

I hope you enjoyed learning about how to add custom header and view header in the Flutter Calendar.

You can refer to our Flutter Calendar feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

How to add custom header and view header in the Flutter Calendar?

Access denied