RRenDSv0.13.0
GitHubGet started

Composite

Calendar Requires JS

Monthly grid for picking a date. Locale-aware first day of week, full keyboard navigation, plus optional range and multi-select modes.

About

Overview

The standalone calendar grid. Use it inline in a page (event scheduling, availability picker, booking flow), or wire it up to a trigger via Date Picker when the calendar should appear in a popover. For start + end pairs, see Date Range Picker.

Live

Demo

May 2026
MTWTFSS 27282930 123 456 7 8910 11121314 151617 18192021 222324 25262728 293031 1234 
<ren-calendar value="2026-05-07" locale="en-US"></ren-calendar>

Reference

API

AttributeTypeDefaultNotes
value "YYYY-MM-DD" today Currently selected date.
min / max "YYYY-MM-DD" — Restrict the selectable range.
locale BCP-47 string "en" Affects month / weekday names and the first day of the week.
mode "single" | "range" | "multi" "single" Selection mode.
disabled-dates string[] [] Array of YYYY-MM-DD strings to disable individually.

Inclusive by default

Accessibility

  • Implements the WAI-ARIA Date Picker dialog pattern. The grid is a role="grid"; each day is a role="gridcell".
  • Arrow keys move day-by-day, Page Up / Page Down move by month, Shift+Page Up/Page Down by year, Home / End jump to the start / end of the week.
  • Each day cell carries an aria-label with the full date so screen readers announce "Thursday, May 7, 2026" rather than just "7".
  • The currently selected day uses aria-selected="true"; disabled days use aria-disabled="true".