Cally Calendar Components for Date Pickers & Ranges

Cally is a JavaScript Web Component library for single-date calendars, date ranges, multiple-date selection, and multi-month calendar views. It uses standard custom elements and works in plain HTML, React, Vue, and Svelte projects.

Cally focuses on the calendar layer of a date picker. Your app or component library handles the input, toggle button, and popup. The package is less than 9KB min/gzip and has one runtime dependency, Atomico.

For React and shadcn/ui projects, compare this Flexible Date & Date Range Picker For Shadcn/ui.

Key Features:

• Single-date, multiple-date, and date-range selection.
• One or more months per calendar page.
• Minimum and maximum dates plus custom disabled-date rules.
• Week numbers and configurable weekday labels.
• Month and year select components for quick calendar navigation.
• Locale-aware labels through Intl.DateTimeFormat and RTL layouts.
• Keyboard and screen reader support within the calendar components.
• CSS parts, day-specific parts, and accent-color custom properties.
• Framework-independent Web Components with TypeScript types.

How to use it:

1. Importing Cally registers its custom elements. Install the package from npm and import it into your JavaScript or TypeScript file, or load the ESM build from unpkg.

# NPM
npm install cally
# JavaScript / TypeScript
import "cally";
# CDN
<script type="module" src="https://unpkg.com/cally"></script>

2. Use <calendar-date> with <calendar-month> for single-date selection. Date values use the YYYY-MM-DD ISO 8601 format.

<calendar-date value="2026-09-08">
  <calendar-month></calendar-month>
</calendar-date>

3. Use <calendar-range> for a date range. The value uses YYYY-MM-DD/YYYY-MM-DD.

<calendar-range value="2026-09-08/2026-09-14">
  <calendar-month></calendar-month>
</calendar-range>

4. Use <calendar-multi> for multiple individual dates. Its value is a space-separated list of ISO dates.

<calendar-multi value="2026-09-08 2026-09-12 2026-09-18">
  <calendar-month></calendar-month>
</calendar-multi>

5. Set months on the parent calendar and offset on each month for a multi-month calendar.

<calendar-range months="2">
  <calendar-month></calendar-month>
  <calendar-month offset="1"></calendar-month>
</calendar-range>

6. Place <calendar-select-month> and <calendar-select-year> inside a date, range, or multi calendar when direct month and year navigation is useful.

<calendar-date min="2020-01-01" max="2030-12-31">
  <calendar-select-month></calendar-select-month>
  <calendar-select-year slot="heading" max-years="20"></calendar-select-year>
  <calendar-month></calendar-month>
</calendar-date>

Cally Component API Reference:

<calendar-date>, <calendar-range>, and <calendar-multi> Values

Shared Properties and Attributes

The following public properties belong to <calendar-date>, <calendar-range>, and <calendar-multi>. The value format differs by component as shown above.

<calendar-range> Specific Property

Events

Cally emits non-bubbling custom events in response to user interaction. Programmatic changes to value do not emit change.

Method

Shared CSS Parts

Shared Slots

<calendar-month>

<calendar-month> renders the grid of days and is designed for use inside <calendar-date>, <calendar-range>, or <calendar-multi>.

CSS Custom Properties

CSS Parts

Slot

<calendar-select-month>

CSS Parts

<calendar-select-year>

CSS Parts

Styling Cally:

Use CSS parts for individual controls and calendar states. <calendar-month> also exposes two custom properties for its accent colors.

calendar-range::part(months) {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
calendar-range::part(button) {
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
}
calendar-month {
  --color-accent: #6d4aff;
  --color-text-on-accent: #fff;
}
calendar-month::part(range-inner) {
  border-radius: 0;
}

Official Guides:

• Cally Theming Guide
• Cally Framework Integration Guide
• Cally Date Picker Composition Guide
• Cally Accessibility Statement

Alternatives & Related Resources:

• Vanilla JavaScript Date & Date Range Picker For The Web
• Lightweight Accessible Date Picker Component – WC Datepicker
• Vanilla JS Date Picker with Range Selection – EssealDatePicker
• Developer-friendly Date Picker In Pure JavaScript – thedatepicker
• ISO 8601 Date Format: UTC, Timestamps & JavaScript

Changelog:

v0.9.2 (02/05/2026)

• Fixed week-number calculations in non-GMT timezones.
• Fixed numbered day CSS parts such as day-1 in non-GMT timezones.