Flutter Calendar Libraries Comparison

Alison Wyllie
Jun 26 · 7 min read

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:

Original on the left, Calendar Carousel on the right
  • ✅ 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.

Original on the left, Table Calendar on the right
  • ✅ 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.

Original on the left, Clean Calendar on the right
  • ✅ 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.

Original on left, Calendar Carousel on the right
  • ✅ 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.

Original on the left, Table Calendar on the right
  • ✅ 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

Flutter Calendar

  • Today button and a calendar button that opens up a dialog to select a date
  • Custom day builder to get day level item customization
  • Expandable month view

Calendarro

  • Multiple day selections
  • Custom day builder for fine level customization
  • An advanced example is provided

Flutter Community

Articles and Stories from the Flutter Community

Thanks to Nash

Alison Wyllie

Written by

https://alisonwyllie.com

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade