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

table_calendar: ^2.2.3
 
 

Import flutter calendar package in your dart file

import ‘package:table_calendar/table_calendar.dart’;
 
 

Display Flutter Calendar

class MyCalendarPage extends StatefulWidget {
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.

import ‘package:intl/date_symbol_data_local.dart’;

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”.

TableCalendar(
    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.

TableCalendar (
    holidays: {
        DateTime(2020,9,10) : [‘Holiday1’]
    },
)
 
 

Display Events

Map<DateTime, List> _listEvents;
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.

 
 
 
 

Leave a Reply