Calendar
<ahi-calendar> | AhiCalendar
Calendar allows users to select a date and allows you to set a minimum and a maximum allowed date. Please note that the date must be passed in ISO-8601 format.
<ahi-calendar></ahi-calendar>
Examples
Setting selected date
<ahi-calendar value="2022-05-13"></ahi-calendar>
Focus event
<div class="ahi-column calendar-focus">
<output></output>
<ahi-calendar value="2022-05-13"></ahi-calendar>
</div>
<script>
const example = document.querySelector(".calendar-focus");
const calendar = example.querySelector("ahi-calendar");
const output = example.querySelector("output");
calendar.addEventListener("ahi-calendar-date-focus", e => {
const formatted = e.detail.date.toLocaleDateString("en", { year: "numeric", month: "long", day: "numeric" });
output.innerText = `Focused day: ${formatted}`;
})
</script>
Disabling days
<ahi-calendar class="calendar-disable-days" value="2022-05-13"></ahi-calendar>
<script>
const calendar = document.querySelector(".calendar-disable-days")
calendar.isDateDisabled = function isWeekend(date) {
return date.getDay() === 0 || date.getDay() === 6
}
</script>
Min & max
<ahi-calendar value="2021-02-14" min="2021-02-08" max="2021-02-21"></ahi-calendar>
Highlighting days
<ahi-calendar class="calendar-highlight-days" value="2022-01-12"></ahi-calendar>
<script>
const calendar = document.querySelector(".calendar-highlight-days")
// as an example, highlight every sixth day
calendar.isDateHighlighted = date => {
return date.getDate() % 6 === 0 ? "fully booked" : false
}
</script>
Keyboard support
Month/year buttons
Space, Enter: Changes the month and/or year displayed.
Calendar grid
Space, Enter: Selects a date.Arrow up: Moves focus to the same day of the previous week.Arrow down: Moves focus to the same day of the next week.Arrow right: Moves focus to the next day.Arrow left: Moves focus to the previous day.Home: Moves focus to the first day (e.g Monday) of the current week.End: Moves focus to the last day (e.g. Sunday) of the current week.-
Page Up: Changes the grid of dates to the previous month and sets focus on the same day of the same week. -
Shift + Page Up: Changes the grid of dates to the previous year and sets focus on the same day of the same week. -
Page Down: Changes the grid of dates to the next month and sets focus on the same day of the same week. -
Shift + Page Down: Changes the grid of dates to the next year and sets focus on the same day of the same week.
Best practices
Calendars should:
- Be used when the user needs to select a single date or a date range (using two calendars).
Calendars should not:
- Be used for entering a date of birth. Use the memorable date component instead
- Be used to choose a date that is over 10 years in the future or past. Use a date picker instead
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/calendar/calendar.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/calendar/calendar.js';Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
value
|
The selected date on the calendar. Must be in IS0–8601 format: YYYY-MM-DD. |
string
|
''
|
|
firstDayOfWeek
first-day-of-week
|
Which day is considered the first day of the week. 0 for Sunday, 1 for
Monday, etc. Default is Monday.
|
DaysOfWeek
|
- | |
min
|
Minimum date allowed to be picked. Must be in IS0–8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property. |
string | undefined
|
- | |
max
|
Maximum date allowed to be picked. Must be in IS0–8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property. |
string | undefined
|
- | |
expand
|
Controls whether the calendar expands to fill the width of its container. |
boolean
|
false
|
|
isDateDisabled
|
Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends. |
DatePredicate
|
isDateDisabled
|
|
isDateHighlighted
|
Controls which days are highlighted with a small indicator. Returning a “falsy” value will not show an indicator. Returning a “truthy” value will show the indicator, but without an accessible label. Returning a string will show the indicator, and use the string as accessible label. It is recommended to return a string rather than a truthy value whenever possible. |
(date: Date) => string | boolean
|
isDateHighlighted
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Events
| Name | Description | Event Detail |
|---|---|---|
ahi-change |
Emitted when a date is selected and the value changes. | - |
ahi-calendar-date-focus |
Emitted when the calendar’s focused date changes. | - |
Learn more about events.
Methods
| Name | Description | Arguments |
|---|---|---|
focus() |
Programmatically move focus to the calendar. |
options: FocusOptions & { target: 'day' | 'month' }
|
Learn more about methods.
Custom Properties
| Name | Description | Default |
|---|---|---|
--box-shadow |
The box shadow of the calendar. | var(–ahi-shadow-popover) |
--radius |
The border radius of the calendar. | var(–ahi-border-radius-small) |
Learn more about customizing CSS custom properties.
Dependencies
This component automatically imports the following dependencies.
<ahi-button><ahi-icon><ahi-spinner>