This component defines the standard visual style for the calendar element.
Usage Guidelines
Every instance of a calendar element should come from this component.
Features
Dependencies
None
Documents
The default calendar style shows the current month’s dates alongside the prior and next months’ dates in a single calendar month view.
The current month is indicated at the top left.
Controls for month-to-month traversal are in the upper right.
Dates within current month is the normal state. It is available for user interaction.
Dates outside current month is used for the prior and next months’ dates that fit within the current single month calendar view.
Hover state indicates that the user’s mouse is located over a selectable date. This can be applied to dates both outside and within the current month.
Selected state indicates the user’s selected date. This can be applied to dates both outside and within the current month.
Disabled state is used when a date is not selectable. Disabled dates also cannot incur a hover state.
Highlight state is used to indicate a range of selected dates.
The six basic states.
Date states in context on a calendar.
A legend can be included optionally if needed to lend more context to one of the states.
Initial version
Calendar