# 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.

# 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`

← Date Picker