Flutter Calendar Libraries Comparison

Published in

Flutter Community

7 min readJun 26, 2019

All software developers know that dates are the trickiest thing. And calendars are no exception (see this brilliant XKCD for some calendar facts).

This post will compare several Flutter calendar libraries and will test them using a few real calendar designs.

As a disclaimer: A lot of these libraries are still under active development and may change after the time of writing. Also, just because a library cannot perform all of the challenge calendar’s requirements does not make it a weaker library. Every calendar has different needs!

The full source code for the calendars can be found here!

What we will be trying to build:

The designs we’ll be building (one and two)

We have two calendars that we will be trying to recreate, they come from talented designers at Dribbble (one and two).

For each of these apps, we will be trying out several Flutter calendar libraries and see which does the best job. I looked for both new and stable libraries and tried as many as I could for this challenge.

Libraries in this post: Calendar Carousel, Table Calendar, Clean Calendar, Calendarro, Flutter Calendar, and Calendar Widget.

Calendar #1

For this calendar by Vladimir Gubanov we are looking for the following features:

Visible (but grey) dates from the previous and next months
A custom header that allows you to change the month
Single selected date highlighting
Custom day titles (Mo, Tu, We, Th, Fr, Sa, Su)
Monday as the first day of the week

Let’s give it a shot!

Calendar Carousel

This library is being actively developed and can be found here. Here’s how it did making the first Calendar:

✅ Visible (but grey) dates from the previous and next months
✅ A custom header that allows you to change the month: Carousel lets you remove its standard header and you can set the date to change the month yourself.
🆗 Single selected date highlighting: The edges aren’t as round as the design but we’ll call this passing!
🆗 Custom day titles (Mo, Tu, We, Th, Fr, Sa, Su): We were able to get to M but couldn’t get to Mo
✅ Monday as the first day of the week

Table Calendar

Table Calendar is found here and provides lots of support for events and features an expandable calendar.

✅ Visible (but grey) dates from the previous and next months
✅ A custom header that allows you to change the month
✅ Single selected date highlighting: I used the selectedDayBuilder to make this match the design
✅ Custom day titles (Mo, Tu, We, Th, Fr, Sa, Su): Using their daysOfWeekStyle we were able to change to the desired label
✅ Monday as the first day of the week: Came out of the box

Clean Calendar

Found here, Clean Calendar is a simple calendar library that supports events.

✅ Visible (but grey) dates from the previous and next months
❌ A custom header that allows you to change month: I could only remove the arrows to stop you from moving between months
🆗 Single selected date highlighting: There was only the option to color the selected day, no other styling options were presented
❌ Custom day titles (Mo, Tu, We, Th, Fr, Sa, Su): There was no way to change the day titles at all, not their content or style
❌ Monday as the first day of the week: Not supported as far as I can tell
❌ The calendar also faces issues when placed inside a scrolling view

This calendar library wasn’t very flexible in terms of styling so I won’t be using it in the other calendar challenge.

Other Calendars Attempted:

I tried to build this calendar using a few other libraries, but for various reasons, I couldn’t get very close to the design and didn’t continue building. I also tried:

Calendarro: I was able to choose my own day titles but I would have had to build each day widget myself if I wanted to add styling. This wasn’t straightforward so I moved on. It could be promising if you really want to customize your days.
Flutter Calendar: This library is centered on the calendar being expandable. I could not find a way to turn off the expandable feature. Additionally, to style any of the days you must build each day widget using a builder, again too tedious and already too far from the sample.
Calendar Widget: Very little styling options (only allowed to change the color of selected items) and the highlighting API wasn’t very straightforward.

Calendar #2

The second app by Alexandr Ivchenko has the following features:

Event markers
Custom day titles (SUN, MON, TUE, WED, THU, FRI, SAT) with Sunday as first day of week
Visible (but grey) dates from the previous and next months
Selected date highlighting and styling
No header OR the option to customize header

In the last challenge we tested 6 libraries. Only three of them had the level of styling and customization we needed, and only 2 of those passed their challenges. So for the following calendar we will be testing only Calendar Carousel and Table Calendar.

Calendar Carousel

Calendar Carousel performed really well here and nearly exactly matched the design.

✅ Event markers
🆗 Custom day titles (SUN, MON, TUE, WED, THU, FRI, SAT) with Sunday as first day of week: We were able to get very close to the design, all that was different was the all caps style.
✅ Visible (but grey) dates from the previous and next months
✅ Selected date highlighting and styling
✅ No header OR the option to customize header

Table Calendar

Table Calendar was able to achieve the all caps day labels, but still had issues with the nested scrolling.

✅ Event markers
✅ Custom day titles (SUN, MON, TUE, WED, THU, FRI, SAT) with Sunday as first day of week
✅ Visible (but grey) dates from the previous and next months
✅ Selected date highlighting and styling
✅ No header OR the option to customize header

Conclusion

There are lots of calendar options out there for Flutter, and I imagine more will be created as Flutter grows. We eliminated several libraries early on, but they can still provide value.

It was such a close call between Calendar Carousel and Table Calendar that I think we have to call it a draw!

To see how I made these calendars check out the Github repo here!

I also must mention that these challenges did not let every feature of these libraries shine! Many of these libraries have lots of extra features we did not get to see, here are some more details about them:

Calendar Carousel

Scroll between months
Custom icons for “marked days” that can stack on top of each other
Circular, rectangular, or no borders for the days

Table Calendar

Support for lists of events and lists of holidays
Support for switching calendar from week view to two week view to month view (and swiping up and down moves between the three states)
Scroll between months. But seems to have issues when placed inside a scrolling view (most likely uses a GridView)

Clean Calendar

Supports range selection (although I never could get it to work well and did not see a way to visualize the range being selected)
Support for events
Has a dayBuilder so you can customize each day in the month