Calendar Component

Lets users view, navigate, and select dates.

The calendar module offers readonly and interactive calendar capabilities.

Both types of calendar are structured as data tables; each column representing a day of the week.

Terminology

We use the following terminology when discussing this pattern.

• Single calendar : one calendar month is presented at a time
• Double calendar : two calendar months are presented at a time
• Calendar title : the month and year
• Calendar headers : the days of the week, acting as column headers
• Previous month button : moves calendar back one month
• Next month button : move calendar forward one month
• Date buttons : selects date. Doing so a second time will create a date range
• Date states : date buttons can represent multiple states
  • Start Date
  • End Date
  • Current Date
• Date Range : a range from start date to end date