Category / Section
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,
),
);
}
|
|
|
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.
|
|
|
