# Calendar
The Dia calendar component is an open source calendar UI element.
# Usage
<dia-calendar></dia-calendar>
# Focus Date
If you don't want to set the value, but you want the calendar to be focused on a specific date initially, you can use the focus-date
attribute.
<dia-calendar focus-date="2-22-2022"></dia-calendar>
# Min/Max Dates
You can provide a range of available date using the min-date
and max-date
attributes.
<dia-calendar min-date="3/5/2022" max-date="3/20/2022"></dia-calendar>
# Disabled Dates
In order to disabled multiple dates, you can pass a comma separated list of dates to the disabled-dates
attribute.
<dia-calendar
disabled-dates="5/5/2022,5/8/2022, 5/19/2022, 5/25/2022"
></dia-calendar>
# Week Numbers
When the show-week-numbers
attribute is added to the component, week numbers will appear at the beginning of each week's row indicating the week number in the year.
<dia-calendar show-week-numbers></dia-calendar>
# Disabled Days of the Week
There may be occasion where only weekends need to be available or specific days of the week may not be. This can be achieved by adding a comma separated list of week days (1-7) to the disabled-week-days
attribute.
<dia-calendar disabled-week-days="1,7"></dia-calendar>
# First Day of the Week
Depending on your application or your location, you may want to start the day of the week with a day other than Sunday. You can pass the number of days to off-set the week by (0-6) to the first-day-of-week
attribute to shift the week to your preference.
<dia-calendar first-day-of-week="1"></dia-calendar>
# Accessibility
These components have been built form the ground up with accessibility in mind. A lot fo effort has gone into ensuring that this component works well with keyboards and assistive technologies like screen readers.
# Keyboard Navigation
# Date Picker Dialog
You can navigate the days in the calendar using the ARROW keys and the rest of the controls using the TAB key.
# Screen Readers
This component has been decorated with the appropriate roles
, aria
attributes, and labels to ensure users utilizing screen readers can accurately input or select an appropriate date.
# Attributes / Properties
Attribute | Property | Description | Type | Default Value |
---|---|---|---|---|
value | value | selected value | string | undefined | |
min-date | minDate | the minimum selectable date | string | undefined | |
max-date | maxDate | the maximum selectable date | string | undefined | |
focus-date | focusDate | the initial focus date if no value is set | string | undefined | |
disabled-dates | disabledDates | comma separated list of disabled dates | string | undefined | |
show-week-numbers | showWeekNumbers | show week numbers at the beginning of each week | boolean | false |
disabled-week-days | disabledWeekDays | comma separated list of week days to be disabled (1-7) | string | undefined | |
first-day-of-week | firstDayOfWeek | the day of the week the calendar will start with (0-6) | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined | |
month-label | monthLabel | label used for month input | string | 'Month' |
year-label | yearLabel | label used for year input | string | 'Year' |
clear-label | clearLabel | text for "Clear" button | string | 'Clear' |
today-label | todayLabel | text for "Today" button | string | 'Today' |
# CSS Properties
Name | Description | Default Value |
---|---|---|
--border-color | Default border color | #c5d1da |
--border-radius | Default border radius | 0.25rem |
--disabled-color | Color of disabled days | #acbdca |
--error-color | Color used to communicate error in the component | #b32e2e |
--outline | Default focus outline style | solid 0.0625rem #37444F |
--outline-offset | Outline offset | 0.125rem |
--primary-color | Primary color used in the component | #004884 |
# CSS Parts
Name | Description |
---|---|
input | Controls styles of calendar inputs (month and year) |
button | Controls styles of buttons |
prev-month | Controls styles of previous month button |
next-month | Controls styles of next month button |
week-number | Controls styles of week numbers |
day | Controls styles of day controls in the calendar |
alt-month | Controls styles of days of previous and next month |
day-today | Controls styles of current day |
selected | Controls styles of selected day |
# Events
Name | Description | Type |
---|---|---|
dia-focus | emits the date as short ISO string when calendar date is selected | CustomEvent |
dia-select | emits the date as short ISO string when calendar date is selected | CustomEvent |