Figma Calendar Sheet

How to Use Figma Calendar Sheet

The Calendar Sheet displays dates, months, and years in a standalone view, allowing users to select across different time ranges in a compact view. Though calendar sheets can operate as independent elements, they can be integrated as building blocks within more complex components such as Date Picker and Calendar Blocks. For example:

Combining a calendar sheet with an Input component creates a complete Date Picker component. You can also nest the sheet inside cards to add contextual date navigation to your UI.

Calendar Sheet Anatomy

A key benefit of using the Calendar Sheet component is that it comes with built-in Figma variants for day, month, and year selection so that you can prototype full calendar navigation right out of the box.