The calendar component is a web component that displays a calendar with the ability to select a date.

The calendar component is using the dayjs library to handle dates. The best way to use the calendar component if you are using the dayjs library in your project. The component settings are properties, not attributes, so you have to set them in JavaScript.

The calendar component can be used to select a date. The default date is the current date.

<dap-ds-calendar></dap-ds-calendar>

The value property can be used to set the selected date.

const calendar = document.querySelector('dap-ds-calendar')
calendar.value = dayjs().add(1, 'day')

The currentDate property can be used to set the current visible date. Only the month and year are considered.

const calendar = document.querySelector('dap-ds-calendar')
calendar.currentDate = new Date('2022-08-15T22:00:00.000Z')
calendar.value = dayjs('2022-08-13T22:00:00.000Z')

The minDate and maxDate properties can be used to set the minimum and maximum date of the calendar. Only the month and year are considered.

In this example the minDate is set to the previous month and the maxDate is set to the next month, so you can do the paging only between the previous and next month.

const calendar = document.querySelector('dap-ds-calendar')
calendar.minDate = dayjs().add(-1, 'month')
calendar.maxDate = dayjs().add(1, 'month')
calendar.value = dayjs()

The disabledDate property can be used to set a function to determine if the date is disabled. The function should return true if the date is disabled.

In this example the disabledDate function is set to disable the weekends.

const calendar = document.querySelector('dap-ds-calendar')
calendar.disabledDate = (date) => date.day() === 0 || date.day() === 6

The locale property can be used to set the locale of the calendar. The default locale is the current locale of the browser. The available locales are en and hu.

const calendar = document.querySelector('dap-ds-calendar')
calendar.locale = 'hu'
calendar.value = dayjs().add(1, 'day')

import { DapDSCalendar } from 'dap-design-system/dist/dds'

import { DapDSCalendarReact } from 'dap-design-system/dist/react'

No custom events available.

No CSS custom properties available.