Flutter Event Calendar Headers (SfCalendar)

18 Nov 20187 minutes to read

You can learn about the header and view header height, date format, and appearance support of SfCalendar.

You can customize the header of the Flutter Event Calendar using the headerStyle and headerHeight properties.

Customize header height in Flutter Event Calendar

You can customize the height for the header using the headerHeight property in Flutter Event Calendar.

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.week,
          headerHeight: 100,
        ),
      ),
    );
  }
}

Customize header height in Flutter Event Calendar

Header appearance

You can style the header using the calendarHeaderStyle in Flutter Event Calendar. You can change the background color, textStyle, and text alignment using the properties such as backgroundColor, textStyle, and textAlign of header using the headerStyle property in Flutter Event Calendar.

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.week,
          headerStyle: const CalendarHeaderStyle(
              textAlign: TextAlign.center,
              backgroundColor: Color(0xFF7fcd91),
              textStyle: TextStyle(
                  fontSize: 25,
                  fontStyle: FontStyle.normal,
                  letterSpacing: 5,
                  color: Color(0xFFffeaea),
                  fontWeight: FontWeight.w500)),
        ),
      ),
    );
  }
}

Header appearance

Header date format

You can customize the header date format by using the headerDateFormat property of the SfCalendar. The headerDateFormat can be specified with a pattern string.

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(
        appBar: AppBar(title: const Text('Calendar')),
        body: SfCalendar(
          view: CalendarView.month,
          monthViewSettings: const MonthViewSettings(numberOfWeeksInView: 3),
          headerDateFormat: 'MMM,yyy',
        ),
      ),
    );
  }
}

headerDateFormat

View header

You can customize the view header of the Flutter Event Calendar using the viewHeaderStyle and viewHeaderHeight properties.

Customize view header height in Flutter Event Calendar

You can customize the height for view header in Flutter Event Calendar using the viewHeaderHeight property.

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.week,
          viewHeaderHeight: 100,
        ),
      ),
    );
  }
}

Customize view header height in Flutter Event Calendar

View header appearance

You can style the header using the viewHeaderStyle properties in the Flutter Event Calendar. You can change the background color, dayTextStyle, and dateTextStyle using properties such as backgroundColor, dayTextStyle and dateTextStyle of view header using the viewHeaderStyle property in Flutter Event Calendar.

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.week,
          viewHeaderStyle: const ViewHeaderStyle(
              backgroundColor: Colors.grey,
              dayTextStyle: TextStyle(
                  fontSize: 18,
                  color: Color(0xFFffeaea),
                  fontWeight: FontWeight.w500),
              dateTextStyle: TextStyle(
                  fontSize: 22,
                  color: Color(0xFFffeaea),
                  letterSpacing: 2,
                  fontWeight: FontWeight.w500)),
        ),
      ),
    );
  }
}

View header appearance

NOTE

  • The dateTextStyle property is not applicable for view header in month view of the Flutter Event Calendar.

See also