Calendar
Search the component library

Calendar

v2.0.0

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

  • Defines all date state styles (hover, selected, highlighted range, disabled)
  • White and blue variants
  • Secondary indicator style for use cases like an assignment calendar

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)

Sizing
  • 280px width
Background Color
Month Label
Controls
  • chevron-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 Week
Container (Optional)
  • 1px solid Concrete border
  • 16px space above, 20px space on all other sides

Date States (White)

Basic Date
Hovered
  • Circle 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
Current
  • 38px square outline
  • 1px solid Concrete border
Selected
Disabled
  • Font color is Concrete
  • No hover effect
Secondary Indicator
  • 32px diameter circular outline
  • 1px solid Concrete border

Calendar (Ink Blue)

Sizing and spacing
  • Matches the white variation
Font colors
Container (Optional)

Date States (Ink Blue)

Sizing and spacing
  • Same as white variation
Dates
Dates (hover)
  • Same as white
Current
Current (hover)
  • Same as white
Selected (no hover)
Disabled (no hover)
Secondary Indicator
Secondary Indicator (hover)

Changelog

2.0.0

  • CHANGED: Visual style to match rebrand

1.0.0-beta.1

Initial version