INSPIRATION

Calendar UI design best practices & Datepicker inspiration

Calendars and date pickers use cases, anatomy, and samples. States, ranges, timelines, and managing event patterns are now studied and explained. Enjoy, steal, and remake with this Figma calendar template.
November 2022 · 4 mins read

by Roman Kamushken

How to design a calendar

Today's publication includes all the best samples of calendars, planners, event managers, and other datepicker variations. Either it's aimed to get you into the states and use cases of calendars UI design and inspire you to design better data picker.
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 #

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

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:
Calendar templates for Figma
Calendar base components
Check out our Figma resources preloaded with calendars to save your time on design

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:
Calendar UI design inspiration – React datepicker
React datepicker
Red styled React calendar
Calendar UI design inspiration – iOS datepicker
iOS datepicker
Dark theme calendar template
Calendar UI design inspiration – Web datepicker
Web datepicker
Ranged calendar with paired bottom buttons
Calendar UI design inspiration – Double datapicker
Double datapicker
Material X desktop calendar with range
Calendar UI design inspiration – iOS datepicker
iOS datepicker
Pink range with grey background looks good, isn't it? :)
Calendar UI design inspiration – Range datepicker
Range datepicker
Double calendar for web app
Calendar UI design inspiration – React datepicker
React datepicker
Blue smooth theme for desktop calendar
Calendar UI design inspiration – Mobile datepicker
Mobile datepicker
Calendar for mobile version
Calendar UI design inspiration – Rounded datepicker
Rounded datepicker
Styled calendar with day states start & end rounded
Calendar UI design inspiration – Webapp datepicker
Webapp datepicker
React calendar styled with Green tokens
Calendar UI design inspiration – Dark theme datepicker
Dark theme datepicker
Nightmode sample for calendar
Calendar UI design inspiration – Themed datepicker
Themed datepicker
Double calendar with custom UI theme
Calendar UI design inspiration – Android datepicker
Android datepicker
Active dates & green range
Calendar UI design inspiration – Range datepicker
Range datepicker
Calendar included in S8 design system
Calendar UI design inspiration – iOS datepicker
iOS datepicker
Reading progress UX with ranged calendar
Calendar UI design inspiration – Dark mode datepicker
Dark mode datepicker
Exclusively in Appka UI kit
Calendar UI design inspiration – Green datepicker
Green datepicker
React-driven double calendar with period presets
Calendar UI design inspiration – Mobile datepicker
Mobile datepicker
Double cards containers with dates
Calendar UI design inspiration – Desktop datepicker
Desktop datepicker
Colored desktop calendar by XelaUI
Calendar UI design inspiration – Dark blue datepicker
Dark blue datepicker
Themed in the dark, range is highlighted
Calendar UI design inspiration – React datepicker
React datepicker
Grey calendar in React
Calendar UI design inspiration – Blue datepicker
Blue datepicker
Rounded themed single calendar
Calendar UI design inspiration – Range datepicker
Range datepicker
iOS date template with range
Calendar UI design inspiration – Round datepicker
Round datepicker
Calendar with blue range selected
Calendar UI design inspiration – iOS dark datepicker
iOS dark datepicker
Dark theme screen with blue range picked
Calendar UI design inspiration – Orange range
Orange range
Themed web app calendar with active day

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.
Date picker UI design inspiration – Weekly schedule
Weekly schedule
Stretched vertically to show full day
Date picker UI design inspiration – Mobile calendar
Mobile calendar
With events as small colored blocks
Date picker UI design inspiration – Mobile calendar
Mobile calendar
Calendar with events for today
Date picker UI design inspiration – Mobile schedule
Mobile schedule
Colored tasks on a timeline
Date picker UI design inspiration – iOS calendar
iOS calendar
Contains upcoming events with details

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.
Calendar & date picker UI design inspiration mobile desktop
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.
Calendar & date picker UI design inspiration mobile desktop

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:
Calendar template for Figma – iOS datepicker
Calendar template for Figma – Web app picker
Calendar template for Figma – Calendar years view
Calendar template for Figma – Dark date pickers
Calendar template for Figma – iOS datepicker
Calendar template for Figma – Dark date picker
Calendar template for Figma – Time & date material pickers
Calendar template for Figma – Android date picker
Calendar template for Figma – iOS calendar with range
Calendar template for Figma – Dark date picker
Calendar template for Figma – Horizontal date pickers
Calendar template for Figma – Web app date picker
Calendar template for Figma – Dark date picker
Calendar template for Figma – Desktop date picker
Calendar template for Figma – Dark time picker
Calendar template for Figma – Android date picker
Calendar template for Figma – Material month picker
Calendar template for Figma – Dark iOS calendar
Calendar template for Figma – Conceptual slider date pickers
Calendar template for Figma – Web app calendar
Calendar template for Figma – Time picker
Calendar template for Figma – Material dark pickers
Calendar template for Figma – Slider date picker
Calendar template for Figma – Date picker with detials
Calendar template for Figma – Date picker slots
Calendar template for Figma – Dark iOS picker with colors
Calendar template for Figma – Time range material picker
Calendar template for Figma – Dark iOS calendar
Calendar template for Figma – Rolling date picker
Calendar template for Figma – Web app calendar
Calendar template for Figma – Web mobile range picker
Calendar template for Figma – Intraday calendar events
Calendar template for Figma – Dark & light date pickers
Calendar template for Figma – Styled time picker
Calendar template for Figma – Dark rounded time picker
Calendar template for Figma – Web calendar
Calendar template for Figma – Dark & light mobile pickers
Calendar template for Figma – Outline calendar themed
Calendar template for Figma – Dark iOS calendar
Calendar template for Figma – iOS calendar with events
Calendar template for Figma – Dark & white iOS range

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.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications

More to ☕ read

Show more ⬇︎