Calendar

Calendar lets users select a date.

Usage
Code

Calendar lets users select a date. The dates are arranged in a grid visually for familiarity and easy scanning. A calendar is always visible upfront on screen when used i.e. a date can be selected directly unlike a date picker where a date can be selected only after interacting with a trigger.

Sizes

Calendar comes in 2 sizes - small and regular.

States

A time entity in calendar (date, month, year) can come in different states -

States of a date in calendar

Structure



Structure of calendar
PropertyValue(s)
Size
  • 248x212 px (Small)
  • 324x316 px (Regular)

  • Configurations



    PropertyValue(s)Default value
    View
  • Month
  • Year
  • Decade
  • Month
    Size
  • Small
  • Regular
  • Regular

    Usage

    Calendar vs. Date picker

    Date picker is nothing but a calendar inside a popover and hence a trigger is always required to open it e.g. an input box. On the other hand, calendar is used as an inline component to show a view without additional triggers.

    Calendar is used inline Calendar is used inline

    Date with an event

    Specific date can be highlighted to show that there is an event on that particular day.