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 to50.
Calendar Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
excludeDate | (value: Date) => boolean | undefined | - | - | Callback to exclude dates from the calendar |
goals | CalendarGoal[] | undefined | - | - | An array used to add rewards markers to certain days on the calendar |
maximumDate | Date | undefined | - | - | Specifies the maximum selectable day by a user |
minimumDate | Date | undefined | - | - | Specifies the minimum selectable day by a user |
onChange | (value: Date) => void | undefined | - | - | Callback fired every time the value changes |
value | Date | undefined | - | - | Selected calendar date |
Calendar Classes
| Class Name | Description |
|---|---|
| abyss-calendar-root | Calendar root element |
| abyss-calendar-header | Calendar header |
| abyss-calendar-month-button | Calendar month-button |
| abyss-calendar-month-label | Calendar month label |
| abyss-calendar-month-chevron | Calendar month chevron arrow |
| abyss-calendar-back-month-button | Calendar back month button |
| abyss-calendar-back-month-icon | Calendar back month icon |
| abyss-calendar-forward-month-button | Calendar forward month button |
| abyss-calendar-forward-month-icon | Calendar forward month icon |
| abyss-calendar-content | Calendar content |
| abyss-calendar-day-of-week | Calendar day of week |
| abyss-calendar-scroll-wheel | Calendar month and year picker scroll wheel |
| abyss-calendar-progress-circle | Calendar progress circle |
| abyss-calendar-dates-wrapper | Calendar dates wrapper |
| abyss-calendar-goal-star | Calendar goal star |
| abyss-calendar-day-label | Calendar day label |
| abyss-calendar-day-label-selected | Calendar selected day label |
| abyss-calendar-day-button | Calendar day button |
| 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.
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 |