Datepicker UI design templates

Figma UI design resource with 56 calendars & date pickers extracted from a certain of our popular UI kits. You will find all the best samples of calendars, planners, event managers, and other datepicker templates.

How to design a calendar

This Figma UI design resource 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 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.

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