Calendar

Calendar lets users select a date.

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.

Calendar comes in 2 sizes - small and regular.

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

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.

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