() => {
  const [value, setValue] = useState(new Date());
  return (
    <Calendar
      value={value}
      onChange={setValue}
      minimumDate={new Date(2023, 7, 10)}
      maximumDate={new Date(2025, 6, 28)}
      goals={[
        { date: new Date(2023, 9, 23), state: 'progress', percentage: 23 },
        { date: new Date(2023, 9, 24), state: 'progress', percentage: 100 },
        { date: new Date(2023, 9, 25), state: 'complete' },
      ]}
    />
  )
}

useState

Using the useState hook gets values from the component state.

Minimum and Maximum Date

Use the minimumDate and maximumDate props to set the min and max dates in the Calendar. The default values will be a 1 year range from the prop value.

Excluded Dates

To exclude dates use the excludeDate prop. Set a function that receives date as an argument and returns true if date should be disabled. For example, to disable weekends, check if the day is 0 or 6.

Goals

Use the goals prop to add rewards to certain days on the calendar.

The goals prop must be an array of 'Goal' objects. A goal object has three properties

• date: The date the reward will be. Must be a date instance.
• state: The current state of the reward. Valid values are 'progress' and 'complete'.
• percentage: If the state of the goal is 'progress', you can add the completed percentage. Defaults to 50.

Calendar Props

Prop Name	Type	Default	Description
excludeDate	Function	-	Callback fired to exclude dates from the calendar
goals	Array	-	An array used to add rewards markers to certain days on the calendar
maximumDate	Date	-	Specifies the maximum selectable day by a user
minimumDate	Date	-	Specifies the minimum selectable day by a user
onChange	Function	-	Callback fired every time the value changes
value	Date	-	Selected calendar date

Calendar Classes

Class Name	Description	States
abyss-calendar-back-month-button	Calendar back month button
abyss-calendar-back-month-icon	Calendar back month icon	disabled
abyss-calendar-content	Calendar content
abyss-calendar-dates-wrapper	Calendar dates wrapper
abyss-calendar-day-button	Calendar day button
abyss-calendar-day-label	Calendar day label	disabled, selected
abyss-calendar-day-of-week	Calendar day of week
abyss-calendar-forward-month-button	Calendar forward month button
abyss-calendar-forward-month-icon	Calendar forward month icon	disabled
abyss-calendar-goal-star	Calendar goal star
abyss-calendar-header	Calendar header
abyss-calendar-month-button	Calendar month-button
abyss-calendar-month-chevron	Calendar month chevron arrow
abyss-calendar-month-label	Calendar month label
abyss-calendar-progress-circle	Calendar progress circle
abyss-calendar-root	Calendar root element
abyss-calendar-selection-circle	Calendar selection circle
abyss-calendar-today-circle	Calendar today circle

Calendar Translations

Translation Key	Value
selected	Selected
Calendar.prevMonth	Previous Month
Calendar.nextMonth	Next Month
Calendar.year	Year
Calendar.today	Today
Calendar.inProgress	In Progress

Dynamic Type

Calendar scales to 3XL. Star icon does not grow.

The date picker component in Abyss library is currently not accessible to users relying on screen readers and therefore it is hidden from screen reader users. Please use the date input method as an alternative to the date picker.

Search tokens

Calendar Tokens

Token Name	Value
calendar.color.surface.container	#FFFFFF
calendar.color.surface.date.enabled.selected	#002677
calendar.color.surface.date.goal-reached.default	#F5B700
calendar.color.surface.date.goal-reached.selected	#002677
calendar.color.surface.date.sweep.track	#007000
calendar.color.surface.date.sweep.container	#F3F3F3
calendar.color.text.week-days	#4B4D4F
calendar.color.text.heading	#002677
calendar.color.text.date.enabled.default	#002677
calendar.color.text.date.enabled.selected	#FFFFFF
calendar.color.text.date.disabled	#929496
calendar.color.icon.header.rest	#002677
calendar.color.icon.header.disabled	#929496
calendar.color.icon.date.goal-reached	#FFFFFF
calendar.color.border.date.goal-reached	#D2800F
calendar.color.border.date.today.enabled	#002677
calendar.color.border.date.today.disabled	#929496
calendar.border-radius.all.date	500
calendar.border-width.all.date.today	2
calendar.border-width.all.date.goal-reached	1
calendar.sizing.all.icon.header	24
calendar.sizing.all.icon.date	40
calendar.spacing.gap.horizontal.header	16
calendar.spacing.gap.horizontal.nav-buttons	4
calendar.spacing.padding.horizontal.container	16
calendar.spacing.padding.vertical.week	4
calendar.spacing.padding.vertical.week-days	4
calendar.spacing.padding.vertical.header	16
calendar.spacing.padding.bottom.container	8