Calendar Component

A calendar shows the days, weeks, and months of a given year.

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