5
Calendar UI design – Date picker best practices & inspiration
source link: https://setproduct.com/blog/calendar-ui-design?ref=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
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:
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:
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.
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:
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 base components
Check out our Figma resources preloaded with calendars to save your time on design
Calendar with tasks
Designed for Panda Design System
Calendar with stretched events
Designed for Rome UI kit
Calendar on the tablet
Designed for iOS UI kit
Calendar with events
Designed for Panda Design System
Calendar dark theme
Designed for Material Design 3
Calendar on mobile
Designed for iOS UI kit
Calendar small blocks
Designed for iOS UI kit
Calendar on mobile
Designed for Rome UI kit
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:
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:
React datepicker
Red styled React calendar
iOS datepicker
Dark theme calendar template
Web datepicker
Ranged calendar with paired bottom buttons
Double datapicker
Material X desktop calendar with range
iOS datepicker
Pink range with grey background looks good, isn't it? :)
Range datepicker
Double calendar for web app
React datepicker
Blue smooth theme for desktop calendar
Mobile datepicker
Calendar for mobile version
Rounded datepicker
Styled calendar with day states start & end rounded
Webapp datepicker
React calendar styled with Green tokens
Dark theme datepicker
Nightmode sample for calendar
Themed datepicker
Double calendar with custom UI theme
Android datepicker
Active dates & green range
Range datepicker
Calendar included in S8 design system
iOS datepicker
Reading progress UX with ranged calendar
Dark mode datepicker
Exclusively in Appka UI kit
Green datepicker
React-driven double calendar with period presets
Mobile datepicker
Double cards containers with dates
Desktop datepicker
Colored desktop calendar by XelaUI
Dark blue datepicker
Themed in the dark, range is highlighted
React datepicker
Grey calendar in React
Blue datepicker
Rounded themed single calendar
Range datepicker
iOS date template with range
Round datepicker
Calendar with blue range selected
iOS dark datepicker
Dark theme screen with blue range picked
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.
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.
Weekly schedule
Stretched vertically to show full day
Mobile calendar
With events as small colored blocks
Mobile calendar
Calendar with events for today
Mobile schedule
Colored tasks on a timeline
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.
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.
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:
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.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications
Your e-mail
More to ☕ read
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK