@progressive-development/pd-calendar

Calendar and datepicker components for date selection and event display.

Features

• Lit 3 & TypeScript – Modern, type-safe web components
• Accessible – WCAG 2.1 compliant, keyboard navigation, ARIA support
• Themeable – CSS Custom Properties for easy customization
• Localized – Built-in i18n support (EN, DE, BE)
• Lightweight – No heavy dependencies, tree-shakeable
• Framework-agnostic – Works with React, Vue, Angular, or vanilla JS
• FullCalendar Integration – Complete wrapper for FullCalendar with dayGrid, timeGrid, and list views
• Dual View System – Switch between calendar grid and list view with custom date range support
• Flexible Datepicker – Single date, date range, and date+time selection with min/max constraints
• Touch & Keyboard Navigation – Swipe gestures, mouse wheel, and full keyboard support (Arrow keys, Home/End)

Installation

npm install @progressive-development/pd-calendar

Quick Start

<script type="module">
  import '@progressive-development/pd-calendar';
</script>

<pd-datepicker label="Select date"></pd-datepicker>

Components

| Component | Description | |-----------|-------------| | <pd-calendar> | Month view calendar with day selection | | <pd-datepicker> | Date picker input with popup calendar | | <pd-fullcalendar> | Full-featured event calendar (FullCalendar wrapper) |

Documentation

📖 Full documentation: pd-components.web.app

License

MIT © PD Progressive Development UG