Calendar UI design best practices & Datepicker inspiration

How to design a calendar

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.

Calendar or date picker?

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.

Anatomy of base elements

Calendar base components
Check out our Figma resources preloaded with calendars to save your time on design

For a date picker, a Day item is an essential particle to initiate the interaction; situated as seven items placed in a row to represent one full week. There are several states for the Day as a base element: Active, Inactive, Today (highlighted), Range Start, and Range End (when the user picked a period).

At the same time, for a Calendar, the base item is a colored rectangle, representing the user's event and situated on a marked plot. Such a block may contain a label, or an icon and the width may vary.

Below you could see variations of calendars with the events placed:

Date picker with range

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:

Structure of the calendar

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.

Mobile & desktop usage

Calendar

Desktop screen accommodates more information, than other devices, thus we're tended to appear a whole month with the details for each day. It's conventional to implement vertical, or horizontal scrollbars, when the grid overflow is experienced in cases you're utilizing a calendar as a single row, or column.

On mobiles there is no other way, except to re-organize calendar content vertically as a column. Compound 7 days into a row, utilizing full mobile width, to keep each day accessible to tap. You can keep the calendar functional by minimizing blocks with tasks into small circular colored dots, to give at least minimum information.

Datepicker

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.

More calendar & date picker UI design inspiration

Apart from default date picker and calendar use cases, all the category related to date & time user patterns, concludes a lot more components, variations, and combinations.

Take a look of those more templates to inspire you and assist to not miss any detail in calendar design process:

Use this Figma template

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.