# 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