Integrating Flutter Calendar With Events
This article helps you to integrate calendar component in your flutter application. There are different types of calendar widgets in flutter. In this article, we are going to integrate table calendar.
There are many advantages to use table calendar in the application. We can set dynamic events for this calendar. We can also provide locale support in this component. This calendar also comes with beautiful animations. You can also change display format of calendar like week, month or custom date range.
Add required dependency in your pubspec file
Import flutter calendar package in your dart file
Display Flutter Calendar
MyCalendarPage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyCalendarPageState createState() => _MyCalendarPageState();
}
class _MyCalendarPageState extends State<MyCalendarPage> {
CalendarController _calendarController;
@override
void initState() {
// TODO: implement initState
super.initState();
_calendarController = CalendarController();
}
@override
void dispose() {
// TODO: implement dispose
_calendarController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold ( appBar: AppBar( title: Text(widget.title), ),
body: TableCalendar( calendarController: _calendarController, )
);
}
}
Locale Support for Flutter Calendar
We can also display calendar in specific language. This flutter calendar supports locales. It uses default locale if you do not specify any locale.
To support locale, You have to add intl package in your pubspec file and initialize it in your pubspec file.
void main() {
initializeDateFormatting().then((_) => runApp(MyApp()));
}
Now you can set locale in TableCalendar widget. For this you need to combine language code and country code like for french “fr_FR”.
locale: ‘fr_FR’,
)
Display Holidays
You can also add and display holidays in this calendar. For this you need to add holiday data in the form of map to holidays property in TableCalendar widget.
holidays: {
DateTime(2020,9,10) : [‘Holiday1’]
},
)
Display Events
final currentDay = DateTime.now();
_listEvents = {
currentDay.add( Duration(days: 12)): [‘Event 1’, ‘Event 2’],
};
TableCalendar(
events: _listEvents,
)
You can also customize your ui with the help of different properties in TableCalendar widget.
