Calendar
Search the component library

Calendar

v1.0.0-beta.1
Download UI Kit v2.1.0

This component defines the standard visual style for the calendar element.

Download UI Kit v2.1.0

Usage Guidelines

Every instance of a calendar element should come from this component.

Features

  • Defines all date state styles (hover, selected, highlighted range, disabled)
  • Optional legend

Dependencies

None

Documents

Calendar

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.

Date States

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.

Legend (optional)

A legend can be included optionally if needed to lend more context to one of the states.

Redlines

Calendar

Spacing20px padding
1px space between dates
Month Label & ControlsBasic Title
Pitch (#231F20)
Chevron left/right icons
Days of the WeekLarge Label Text
Pitch (#231F20)
Border1px thick border
Hairline Gray (#D0D0D0)

Date States

Sizing40px width
35px height
Dates within the current monthLarge Label Text; Pitch (#231F20)
Background fill; Dirty Ice (#F8F8F8)
Dates outside the current monthLarge Label Text; Pitch (#231F20)
Background fill; White (#FFFFFF)
Hover StateLarge Label Text; White (#FFFFFF)
Background fill; Sea (#0C5D99)
Selected StateLarge Label Text; White (#FFFFFF)
Background fill; Basic Blue (#107ACA)
Disabled StateLarge Label Text; Boring (#A6A8AB)
Background fill; Brightly Lit (#E6E6E6)
Highlighted StateLarge Label Text; Pitch (#231F20)
Background fill; Sky Blue (#D9EEFF)

Legend (optional)

Sizing50px high container
20px horizontal padding
22px square Legend Swatch
10px padding between Swatch and Label text
TextBasic Label Text; Gray No. 1 (#565656)

Changelog

1.0.0-beta.1

Initial version