Figma Calendar

Figma Calendar Component

The Calendar component enables users to view upcoming tasks and events, select dates, and manage their schedules. It features intuitive, web-friendly controls for navigating through days, months, and years within the calendar interface.

Use the calendar to create a larger section or combine them with existing components; if you want to nest a Calendar inside another component, use Calendar Sheets instead.

Calendar UI Best Practices

• Don't overcustomize default styles. The main purpose of the calendar is to help users quickly and easily view, select, and manage dates. If the calendar is not clear and intuitive, users will struggle to complete their tasks;

• Highlights current dates and selected dates using the component properties;

• Update Calendar size and fit it to various screen sizes and resolutions using variants.

Calendar Anatomy