Category / Section
How to customize the month cells of the Flutter Calendar
1 min read
In the Flutter Event Calendar, you can customize the month cell using the monthCellBuilder property of the SfCalendar.
STEP 1: Use the required widget for the month cell customization. In this sample we are using Icon widget for customization.
Widget monthCellBuilder(BuildContext context, MonthCellDetails details) {
return Column(children: [
Container(child: Text(details.date.day.toString()),),
Container(child: IconButton(icon: Icon(Icons.date_range),),)
],);
}
STEP 2: Assign the Icon widget to the monthCellBuilder property of the Flutter event calendar.
child: SfCalendar( view: CalendarView.month, monthCellBuilder: monthCellBuilder, ),
STEP 3: Please find the entire code snippet for the same.
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
void main() => runApp(MonthCellBuilder());
class MonthCellBuilder extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: SfCalendar(
view: CalendarView.month,
monthCellBuilder: monthCellBuilder,
),
)));
}
Widget monthCellBuilder(BuildContext context, MonthCellDetails details) {
return Column(
children: [
Container(
child: Text(details.date.day.toString()),
),
Container(
child: IconButton(
icon: Icon(Icons.date_range),
),
)
],
);
}
}
|
|
| |||
|
|
| |||
