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

The calendar component provides a visual date picker interface with full keyboard navigation support. It's built using the dayjs library for date manipulation and offers comprehensive customization options including date ranges, localization, and custom disabled date functions.

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. By default, it displays the current month and no date is selected.

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

The value property can be used to set the selected date. The calendar will automatically navigate to the month containing 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 currently visible month and year. This is useful for displaying a specific month without selecting a date.

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 restrict the selectable date range. Dates outside this range will be disabled and navigation will be limited to the allowed range.

In this example, the minDate is set to the previous month and the maxDate is set to the next month, so navigation is restricted to a 3-month window.

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 accepts a function that determines if a specific date should be disabled. The function receives a Dayjs object and should return true if the date should be disabled.

In this example, the disabledDate function disables weekends (Saturday and Sunday).

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, affecting month names, weekday names, and date formatting. The component automatically detects the browser's locale if not specified.

Supported locales are en (English) and hu (Hungarian).

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

• ARIA Labels: Navigation buttons and select controls have descriptive labels
• Keyboard Navigation: Full keyboard support for date selection and navigation
• Screen Reader Support: Proper ARIA attributes for grid navigation
• Focus Management: Clear focus indicators and logical tab order
• Disabled State: Proper ARIA attributes for disabled dates

1. Use with dayjs: The component is designed to work with dayjs objects for optimal performance
2. Set reasonable date ranges: Use minDate and maxDate to prevent users from navigating to irrelevant dates
3. Provide clear labels: Use descriptive labels for better accessibility
4. Handle events: Always listen for dds-change events to update your application state
5. Consider locale: Set the appropriate locale for your users' region

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

const calendar = document.querySelector('dap-ds-calendar')
calendar.disabledDate = (date) => {
  const day = date.day()
  return day === 0 || day === 6 // Disable weekends
}

const calendar = document.querySelector('dap-ds-calendar')
document.querySelector('#locale-selector').addEventListener('change', (e) => {
  calendar.locale = e.target.value
})

import { DapDSCalendar } from 'dap-design-system'

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

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSCalendar } from 'dap-design-system/components'

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-calendar::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-calendar::part(base),
.my-custom-dap-ds-calendar::part(calendar-header) {
  /* Shared styles */
}

Example usage:

<dap-ds-calendar class="my-custom-dap-ds-calendar">
  Calendar
</dap-ds-calendar>

.my-custom-dap-ds-calendar::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-calendar
  style="--dds-calendar-display: value; --dds-calendar-isolation: value;">
  Calendar
</dap-ds-calendar>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-calendar {
  --dds-calendar-display: value;
  --dds-calendar-isolation: value;
  --dds-calendar-block-display: value;
}

<dap-ds-calendar class="my-custom-dap-ds-calendar">
  Calendar
</dap-ds-calendar>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-calendar {
  --dds-calendar-display: value;
  --dds-calendar-isolation: value;
}

No custom events available.