Calendar
Search the component library

Calendar

v2.0.0

This component defines the standard visual style for a calendar. Use this component for every instance of a calendar element (such as date states and color variants).

Calendar

The default calendar style shows the current month's dates.

The current month is indicated at the top left.

Controls for month-to-month traversal are in the upper right.

Date states

Dates

It's a normal state, available for user interaction.

Disabled

Use to indicate unselectable date, cannot incur a hover state.

Current

Indicates current date.

Hover

Indicates the user's mouse is located over a selectable date.

Selected

Indicates user's selected date.

Secondary indicator (optional)

Used in Console to indicate available assignments.

White version - five basic states and calendar example.

Ink blue version - five basic states and calendar example.

Redlines

Calendar (White)

Sizing280px width
Background colorWhite
Month labelUI Heading - Section - Small, Charcoal
8px horizontal padding
40px height
8px margin below
Controlschevron-back-18 and chevron-next-18 icons
Medium Gray by default, Charcoal on hover, Alto when disabled
Each icon centered in a 40px square
8px margin below
Days of the weekUI Text - Small, Medium Gray
Each day letter centered in a 40px square
Container (optional)1px solid Concrete border
16px space above, 20px space on all other sides

Date states (White)

Basic dateUI Text - Basic in Charcoal
Centered in 40px squares
HoveredCircle diameter is 32px
Moonlight background color
Applies to the current date or a date with secondary indicator as well
Does not apply to a selected or disabled date
Current38px square outline
1px solid Concrete border
SelectedFont becomes White UI Text - Bold
Background circle becomes Medium Gray
No hover effect
DisabledFont color is Concrete
No hover effect
Secondary indicator32px diameter circular outline
1px solid Concrete border

Calendar (Ink Blue)

Sizing and spacingMatches the white variation
Font colorsAll fonts and icons are White by default
Concrete is the hover color for the controls
Digital Pearson Blue is the disabled color
Container (optional)1px solid Ink Blue border

Date states (Ink Blue)

Sizing and spacingSame as white variation
DatesWhite font color
Dates (hover)Same as white
Current1px solid Concrete border
Current (hover)Same as white
Selected (no hover)Font is Charcoal UI Text - Bold
Circle color is White
Disabled (no hover)Digital Pearson Blue font color
Secondary indicatorWhite text
Circle border is 1px solid Concrete
Secondary indicator (hover)Charcoal text
Circle color is Moonlight

Changelog

2.0.0

  • CHANGED: Visual style to match rebrand

1.0.0-beta.1

Initial version