Calendar UI design best practices & Datepicker inspiration

Frankly, we designed a ton of calendars. Mostly each of our Figma design systems contain components for date picking, time management, event tracking, etc. Without pre-designed calendars, a commercial UI kit is not complete, because there are many user scenarios in dashboards, and travel apps, where a time and date input is required. The buyer wants to have calendars on hand to produce app screens faster.

So, we examined them all and compiled a comprehensive 56 calendars template for Figma, as not to miss any date picker tiny detail. Especially, when you are stuck on your design task or tired of googling everywhere for calendar design inspiration.

Table of contents:

1. Calendar or date picker? #
2. Anatomy of base elements #
3. Date picker with range #
4. Structure of the calendar #
5. Mobile & desktop usage #
6. Calendar UI inspiration #

Let's get acquainted on how to differentiate those two components depending on purposes; because generally both of them are associated with date & time UX flows, but the use cases and goals are different.

Date picker is a component to allow users to select a specific date, or a range of dates by picking the interval on the numbered grid, which is a month by default.

While calendar is a complex template based on Gantt chart, aimed to let users manage their timeline of tasks, events, or other plans.

Selecting a range is actual in the only case when a date picker component is implemented, because by default a calendar in it's substance represents a range as the whole picture of what is going on with user's events, plans, meetings, etc.

The purpose of a date picker range is to input the necessary amount of days within a single action. Depending on the in-app use case, this data-in may relate only to Start / End days (e.g. flight tickets purchase), or a whole amount of days inside the selection (e.g. travel patterns, booking).

To let users pick the range properly, mainly for desktop apps, you should divide the picker, and place the current month together with previous. It helps the user to select a range with the gap between months (e.g. Google Analytics reveals even a triple date picker).

Check out all the ranges we've extracted out of our Figma design systems:

As mentioned above, the idea of visualizing events on a monthly calendar is based on a modified Gantt chart. This technique fits ideally to represent and scale various blocks' width onto the timeline, giving the informative whole view.

Each block on a grid corresponds with tasks, plans, reminders, meetups, and other kinds of events. The colors of these rectangles may vary. It depends on event categories, preset by the user in advance (e.g. Work, Family, Friends, etc.). Some blocks may cross several days, representing the duration of this particular event. The starting and ending points of it, as a rule, sticked to a timeline. Thus it's obvious – the wider the block, the more time this event requires.

The calendar timeline is a plot made of cells, laid behind event rectangles to easily differentiate what block relates to a concrete day. By default, a calendar is shown as a monthly grid, however, it could be a week, a year, or even an intraday timeline.

On desktop screens, a merged double data picker (or even triple) should be positioned horizontally, as all the users are familiar with this placement. Moreover, it's a benefit to have various presets with the most popular intervals when you're permitted to apply a custom range. They could be: Last 7 days, Last 30 days, Quarter, Half of a year, etc. Thus you're enhancing a date picker UX.

Mobile date picker appears within additional pop-ups (backdrops), or dialogs, where it's easy to pick a specific day, but to change month/year it's required to go deeper. Yes, you can swap months consequently using the left-right chevrons, but you can't step back for e.g 5 years ago until a year picker popped up in a new window.

Before you probably go further to read the next post at our blog, Duplicate this calendar UI design resource, where you will find calendars & date pickers represented in this post. A lot of samples, everything is editable, yours free for any purpose.