Customized Calendar in Flutter

Hitesh Verma
Jun 28 · 10 min read
Image for post
Image for post
Photo by Maddi Bazzocco on Unsplash

Hey, have you ever wanted a date-picker in your app but not in a dialog box? And you tried all the dart packages out there but cannot change their UIs as per your requirements? I had struck on these problems too! And came out with a solution to build a custom calendar and want to share it with you all :-)

Image for post
Image for post
What I have built using this custom approach

So, let’s begin our journey! First, create a new flutter project or use an existing one.

Ok, first of all, let’s figure out what data is required? So, the calendar is all about dates, Right? We have to calculate days of a month in a year and on which weekdays they occur. That’s pretty much all of the calculations we required. Along with this, we might want to show unfilled weekdays at the start and end of the month’s calendar with the dates of previous and next month respectively.

Here I have created a model class for each day to contain all this information.

Create a class where all our calendar-related methods will reside.

This class contains a list of days for each month in order. I have used 28 days for February, but don’t worry it will be handled in later stages. Also, it contains a method for checking whether a year is a leap or not, which is a universal known formula for checking :-)

For some, weeks may start from SUNDAY and for others from MONDAY.

Taking care of both, I created an enum for the same.

Now the complex calculations begin! Complex or not you can decide at the end :-)

Here is a method that will calculate all the days of a month in a year with their occurrence in weekdays, place them in sequence as to display in the month’s calendar, and returns the list of sequence.

In this class, there is a list called calendar which will return us all the days of the month in a sequence and it is of type Calendar which is a model class we have created as our first step.

Well, that’s it! We got all the days in a sequence. Now we are done, right? Yeah, but every month won’t start from Monday or Sunday and ends with Sunday or Saturday. NEVER! We need to fill those missing spots at the start and at the end with previous and next month days respectively.

Here is the calculation to fill missing spots at the start with the previous month’s days. Place these lines of code, right before the closing of the getMonthCalendar method.

That was hell a lot of conditions and calculations. But I did my best on putting comments to the code to make it understandable. You may be wondering how the leftDays are calculated, but honestly, I did it in a copy with a pen and got the pattern right and now don’t have an explanation for that. But I assure you that it was simple and everyone can easily figure out this pattern (and even better than it), just give it a try!

Now moving to the other part of the calculation and the last one, to fill the missing spots at the end with the days of next month. Place these lines of code, right before the closing of the getMonthCalendar method.

Now just return this list of our calendar else all our hard work will go to vain. Place these lines of code, right before the closing of the getMonthCalendar method.

That was all our calculation part! Now let’s do some UI stuff :-)

Set the variables and do some initState job.

Add the calendar body to display dates of the month and toggle buttons to move to the next and previous months.

Add methods to change the current date-time while navigating to the next or previous month.

Navigating through next/previous month using a button can be tiresome if we want to jump through many months and years.

We need 2 views on selecting a month and a year. Now, our calendar will have 3 views dates’ view, months’ view, and years’ view. Creating the enum for the same.

Also, we need to store the current view to display and it will change whenever the user selects the different views. So, creating a class variable in _MyAppState class with default view as dates view.

We will switch from dates view to months view by clicking on the header of dates view. The onTap function of the dates’ view header is already configured above.

Image for post
Image for post
Months View

Create a widget for displaying the list of months. A user can select from these months.

Users can navigate through the years by tapping the header of months’ view. The onTap function of months view header is already configured above.

Create the years’ views widget.

Image for post
Image for post
Years View

The toggle buttons has two sets of functionalities.

i. Toggling to next or previous month in dates view

ii. Displaying previous or next sets of years in years view.

These functionalities are already configured in onTap function of the toggle button above.

Now we have to place the condition for displaying the views according to the current view’s value. This will be done where we have simply given _datesView as the child for the container in the build method.

Updated build method.

That’s all! Now you have a custom calendar that can be molded to any extent as per your requirements :-)

Get the full source code from this link.

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Sign up for Best Stories

By Dev Genius

The best stories sent monthly to your email. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Hitesh Verma

Written by

Flutter Developer | New technology enthusiast

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Hitesh Verma

Written by

Flutter Developer | New technology enthusiast

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store