Calendar

An accessible date picker built entirely from Pindoba components. A Choice segmented control switches between Day / Month / Year views; a navigation row shows the current period (“July 2024”) with prev/next Buttons; and the day grid is a real WAI-ARIA grid (role="grid" with roving-tabindex day cells styled as Buttons). All date math — month layout, week start, range selection, and keyboard navigation — runs through @internationalized/date, so locales, time zones, and leap years are handled correctly. The surface (background, border, radius, shadow, padding) delegates to Panel, so the same design tokens and variants apply here.

By default the calendar sizes to its content; set fullWidth to stretch it to the container.

Selection state lives in a single pure reducer. On Svelte it’s held in a rune; on Astro it’s driven by a small boot script that re-renders the grid on each change — no third-party calendar library is involved.

Keyboard

The grid follows the standard date-picker pattern: arrow keys move the focused day (±1 day / ±1 week), Home/End jump to the week edges, PageUp/PageDown step a month (hold Shift for a year), and Enter/Space select. In the months and years views the arrows move by month/year and PageUp/PageDown step a year/decade.

Default

AstroReactSvelteVue

PreviewCode

DayMonthYear

August 2026

S	M	T	W	T	F	S

DayMonthYear

August 2026

S	M	T	W	T	F	S

import { Calendar } from "../Calendar";
import { stack } from "@pindoba/styled-system/patterns";

export default function DefaultDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      <Calendar />
    </div>
  );
}

Day Month Year

August 2026

S	M	T	W	T	F	S

DayMonthYear

August 2026

S	M	T	W	T	F	S

<script setup lang="ts">
import { Calendar } from "@pindoba/vue-calendar";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <Calendar />
  </div>
</template>

Range

Set range to true to let users pick a start and end date. While selecting, hovering a cell previews the range.

AstroReactSvelteVue

PreviewCode

DayMonthYear

August 2026

S	M	T	W	T	F	S

---
import Calendar from "../calendar.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <Calendar id="astro-demo-calendar-range" showReset range />
</div>

DayMonthYear

August 2026

S	M	T	W	T	F	S

import { Calendar } from "../Calendar";
import { stack } from "@pindoba/styled-system/patterns";

export default function RangeDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      <Calendar showReset range />
    </div>
  );
}

Day Month Year

August 2026

S	M	T	W	T	F	S

<script lang="ts">
  import Calendar from "../calendar.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md" })}>
  <Calendar showReset range />
</div>

DayMonthYear

August 2026

S	M	T	W	T	F	S

<script setup lang="ts">
import { Calendar } from "@pindoba/vue-calendar";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <Calendar showReset range />
  </div>
</template>

Range selection works at the leaf view’s granularity, and the leaf needs the coarser views for navigation context — so in range mode views is expanded to be downward-closed: a month range gets the years view, a day range gets months + years. (Single-select keeps standalone ['months']/['years'] pickers.)

Month range

A ['months', 'years'] picker with range selects a month range — pick a start and end month, using the years view to move between years. The committed value is inclusive of the whole end month (March–July commits 2026-03-01 … 2026-07-31).

AstroReactSvelteVue

PreviewCode

MonthYear

2026

---
import Calendar from "../calendar.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <Calendar
    id="astro-demo-calendar-month-range"
    views={["months", "years"]}
    range
    showReset
  />
</div>

MonthYear

2026

import { Calendar } from "../Calendar";
import { stack } from "@pindoba/styled-system/patterns";

export default function MonthRangeDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      <Calendar views={["months", "years"]} range showReset />
    </div>
  );
}

MonthYear

2026

<script setup lang="ts">
import { Calendar } from "@pindoba/vue-calendar";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <Calendar :views="['months', 'years']" range showReset />
  </div>
</template>

Year range

A standalone ['years'] picker with range selects a year range, inclusive of the whole end year (2024–2027 commits 2024-01-01 … 2027-12-31).

AstroReactSvelteVue

PreviewCode

2020 – 2029

---
import Calendar from "../calendar.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <Calendar
    id="astro-demo-calendar-year-range"
    views={["years"]}
    range
    showReset
  />
</div>

2020 – 2029

import { Calendar } from "../Calendar";
import { stack } from "@pindoba/styled-system/patterns";

export default function YearRangeDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      <Calendar views={["years"]} range showReset />
    </div>
  );
}

2020 – 2029

<script lang="ts">
  import Calendar from "../calendar.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md" })}>
  <Calendar views={["years"]} range showReset />
</div>

2020 – 2029

<script setup lang="ts">
import { Calendar } from "@pindoba/vue-calendar";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <Calendar :views="['years']" range showReset />
  </div>
</template>

Multiple months

Set numberOfMonths (1–3) to render several month grids side by side. Keyboard navigation and range selection span the whole window; only the first month carries prev/next.

AstroReactSvelteVue

PreviewCode

DayMonthYear

August 2026

S	M	T	W	T	F	S

September 2026

S	M	T	W	T	F	S

---
import Calendar from "../calendar.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <Calendar id="astro-demo-calendar-multi-month" range numberOfMonths={2} />
</div>

DayMonthYear

August 2026

S	M	T	W	T	F	S

September 2026

S	M	T	W	T	F	S

import { Calendar } from "../Calendar";
import { stack } from "@pindoba/styled-system/patterns";

export default function MultiMonthDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      <Calendar range numberOfMonths={2} />
    </div>
  );
}

Day Month Year

August 2026

S	M	T	W	T	F	S

September 2026

S	M	T	W	T	F	S

<script lang="ts">
  import Calendar from "../calendar.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md" })}>
  <Calendar range numberOfMonths={2} />
</div>

DayMonthYear

August 2026

S	M	T	W	T	F	S

September 2026

S	M	T	W	T	F	S

<script setup lang="ts">
import { Calendar } from "@pindoba/vue-calendar";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <Calendar range :numberOfMonths="2" />
  </div>
</template>

Restricted views

Pass views to choose which views are available. The lowest-granularity entry is the leaf view — clicking a cell at the leaf emits a selection (first-of-clicked-month for a months leaf). In a non-leaf view, clicking a cell drills down toward the leaf.

Month + year picker

AstroReactSvelteVue

PreviewCode

MonthYear

2026

---
import Calendar from "../calendar.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <Calendar
    id="astro-demo-calendar-month-year"
    showReset
    views={["months", "years"]}
  />
</div>

MonthYear

2026

import { Calendar } from "../Calendar";
import { stack } from "@pindoba/styled-system/patterns";

export default function MonthAndYearDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      <Calendar showReset views={["months", "years"]} />
    </div>
  );
}

MonthYear

2026

<script setup lang="ts">
import { Calendar } from "@pindoba/vue-calendar";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <Calendar showReset :views="['months', 'years']" />
  </div>
</template>

Standalone month picker

A single-view views={['months']} (or ['years']) renders a true month-only (or year-only) picker — no day grid, no view tabs — selecting at that granularity.

AstroReactSvelteVue

PreviewCode

2026

---
import Calendar from "../calendar.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <Calendar
    id="astro-demo-calendar-month-picker"
    views={["months"]}
    showReset
  />
</div>

2026

import { Calendar } from "../Calendar";
import { stack } from "@pindoba/styled-system/patterns";

export default function MonthPickerDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      <Calendar views={["months"]} showReset />
    </div>
  );
}

2026

<script lang="ts">
  import Calendar from "../calendar.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md" })}>
  <Calendar views={["months"]} showReset />
</div>

2026

<script setup lang="ts">
import { Calendar } from "@pindoba/vue-calendar";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <Calendar :views="['months']" showReset />
  </div>
</template>

Disabled dates & highlights

Beyond the minValue/maxValue window, you can disable dates and tint them with semantic color. Both use one matching vocabulary — a DateMatcher — so you learn it once:

type DateMatcher =
  | Date                        // one date
  | Date[]                      // specific dates
  | { from: Date; to?: Date }   // an inclusive span (omit `to` for open-ended)
  | { dayOfWeek: number[] }     // weekdays, 0 = Sunday
  | ((date: Date) => boolean);  // a predicate (Svelte only — can't serialize)

Pass one matcher or an array (matches if any matches). The month(year, month) and year(year) helpers (exported from the package) return whole-period span matchers — month(2026, 7) matches all of July.

Matching is granularity-aware: in a day picker a matcher hits days, in a month-only picker it hits whole months, in a year-only picker whole years (a date inside July matches the July cell). { dayOfWeek } only applies to day cells. In a full day calendar the month/year views are pure navigation, governed by minValue/maxValue alone.

Disabling — disabled={matcher}. OR-combined with the minValue/maxValue bounds. Keyboard navigation skips disabled cells — arrow keys land on the next available date, and the cursor never rests on (nor does Enter commit) a disabled date.

Highlighting — highlights is a list of { match, feedback, emphasis?, label? } rules. match is a DateMatcher; feedback is a semantic palette (neutral/primary/success/warning/danger); emphasis is:

subtle (default) recolors just the text — quietly communicate (“this is a holiday”, weekends).
strong adds a tinted surface chip — draw attention.

The first matching rule wins, and an optional label is appended to the cell’s aria-label. Highlights stay visually distinct from the selected state (solid fill) and today (accent ring) — a selected day always keeps its selection styling.

Astro note: predicate (function) matchers can’t be serialized, so on Astro they only apply to the server render, not to client-side navigation. Use the declarative forms (dates, spans, { dayOfWeek }, month()/year()) on Astro; the function form is available on Svelte.

AstroReactSvelteVue

PreviewCode

DayMonthYear

December 2026

S	M	T	W	T	F	S

---
import Calendar from "../calendar.astro";
import { stack } from "@pindoba/styled-system/patterns";

// Anchor on December so the seasonal highlights are visible on mount.
const december = new Date(2026, 11, 1);
---

<div class={stack({ gap: "md" })}>
  <Calendar
    id="astro-demo-calendar-holidays"
    initialDate={december}
    disabled={[new Date(2026, 11, 28), new Date(2026, 11, 29)]}
    highlights={[
      {
        match: new Date(2026, 11, 25),
        feedback: "danger",
        emphasis: "strong",
        label: "Christmas Day",
      },
      {
        match: [new Date(2026, 11, 24), new Date(2026, 11, 31)],
        feedback: "warning",
        emphasis: "subtle",
        label: "Holiday",
      },
      { match: { dayOfWeek: [0, 6] }, feedback: "neutral", emphasis: "subtle" },
    ]}
  />
</div>

DayMonthYear

December 2026

S	M	T	W	T	F	S

import { Calendar } from "../Calendar";
import { stack } from "@pindoba/styled-system/patterns";

// Anchor on December so the seasonal highlights are visible on mount.
const december = new Date(2026, 11, 1);

export default function HolidaysDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      <Calendar
        initialDate={december}
        disabled={[new Date(2026, 11, 28), new Date(2026, 11, 29)]}
        highlights={[
          {
            match: new Date(2026, 11, 25),
            feedback: "danger",
            emphasis: "strong",
            label: "Christmas Day",
          },
          {
            match: [new Date(2026, 11, 24), new Date(2026, 11, 31)],
            feedback: "warning",
            emphasis: "subtle",
            label: "Holiday",
          },
          {
            match: { dayOfWeek: [0, 6] },
            feedback: "neutral",
            emphasis: "subtle",
          },
        ]}
      />
    </div>
  );
}

Day Month Year

December 2026

S	M	T	W	T	F	S

<script lang="ts">
  import Calendar from "../calendar.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  // Anchor on December so the seasonal highlights are visible on mount.
  const december = new Date(2026, 11, 1);
</script>

<div class={stack({ gap: "md" })}>
  <Calendar
    initialDate={december}
    disabled={[new Date(2026, 11, 28), new Date(2026, 11, 29)]}
    highlights={[
      {
        match: new Date(2026, 11, 25),
        feedback: "danger",
        emphasis: "strong",
        label: "Christmas Day",
      },
      {
        match: [new Date(2026, 11, 24), new Date(2026, 11, 31)],
        feedback: "warning",
        emphasis: "subtle",
        label: "Holiday",
      },
      { match: { dayOfWeek: [0, 6] }, feedback: "neutral", emphasis: "subtle" },
    ]}
  />
</div>

DayMonthYear

December 2026

S	M	T	W	T	F	S

<script setup lang="ts">
import { Calendar } from "@pindoba/vue-calendar";
import { stack } from "@pindoba/styled-system/patterns";

// Anchor on December so the seasonal highlights are visible on mount.
const december = new Date(2026, 11, 1);
const disabled = [new Date(2026, 11, 28), new Date(2026, 11, 29)];
const highlights = [
  {
    match: new Date(2026, 11, 25),
    feedback: "danger" as const,
    emphasis: "strong" as const,
    label: "Christmas Day",
  },
  {
    match: [new Date(2026, 11, 24), new Date(2026, 11, 31)],
    feedback: "warning" as const,
    emphasis: "subtle" as const,
    label: "Holiday",
  },
  {
    match: { dayOfWeek: [0, 6] },
    feedback: "neutral" as const,
    emphasis: "subtle" as const,
  },
];
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <Calendar
      :initialDate="december"
      :disabled="disabled"
      :highlights="highlights"
    />
  </div>
</template>

Month & year pickers

In a month-only (views={['months']}) or year-only (views={['years']}) picker, the same disabled/highlights matchers hit whole months or years — reach for the month(2026, 7) / year(2025) helpers, or pass any date inside the period. The prev/next chevrons also disable automatically once minValue/maxValue (or fully-disabled matchers) leave no selectable period in that direction.

AstroReactSvelteVue

PreviewCode

2026

---
import Calendar from "../calendar.astro";
import { month } from "@pindoba/core-calendar";
import { stack } from "@pindoba/styled-system/patterns";

// A standalone month picker (months is the leaf). Matchers apply at month
// granularity — the `month()` helper makes "highlight a whole month" explicit.
// min/max bound the window: months before April read as disabled (earliest
// selectable month), and the year nav disables once there's no selectable
// month left either way.
const april = new Date(2026, 3, 1);
---

<div class={stack({ gap: "md" })}>
  <Calendar
    id="astro-demo-calendar-month-picker-rules"
    views={["months"]}
    initialDate={april}
    minValue={april}
    maxValue={new Date(2026, 11, 31)}
    highlights={[
      {
        match: [month(2026, 6), month(2026, 7), month(2026, 8)],
        feedback: "warning",
        emphasis: "subtle",
        label: "Summer",
      },
      {
        match: month(2026, 12),
        feedback: "success",
        emphasis: "strong",
        label: "Launch",
      },
    ]}
  />
</div>

2026

import { Calendar } from "../Calendar";
import { month } from "@pindoba/core-calendar";
import { stack } from "@pindoba/styled-system/patterns";

// A standalone month picker (months is the leaf). Matchers apply at month
// granularity — the `month()` helper makes "disable/highlight a whole month"
// explicit. min/max bound the window: months before April read as disabled
// (earliest selectable month), and the year nav disables once there's no
// selectable month left either way.
const april = new Date(2026, 3, 1);

export default function MonthPickerRulesDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      <Calendar
        views={["months"]}
        initialDate={april}
        minValue={april}
        maxValue={new Date(2026, 11, 31)}
        highlights={[
          {
            match: [month(2026, 6), month(2026, 7), month(2026, 8)],
            feedback: "warning",
            emphasis: "subtle",
            label: "Summer",
          },
          {
            match: month(2026, 12),
            feedback: "success",
            emphasis: "strong",
            label: "Launch",
          },
        ]}
      />
    </div>
  );
}

2026

<script lang="ts">
  import Calendar from "../calendar.svelte";
  import { month } from "@pindoba/core-calendar";
  import { stack } from "@pindoba/styled-system/patterns";

  // A standalone month picker (months is the leaf). Matchers apply at month
  // granularity — the `month()` helper makes "disable/highlight a whole month"
  // explicit. min/max bound the window: months before April read as disabled
  // (earliest selectable month), and the year nav disables once there's no
  // selectable month left either way.
  const april = new Date(2026, 3, 1);
</script>

<div class={stack({ gap: "md" })}>
  <Calendar
    views={["months"]}
    initialDate={april}
    minValue={april}
    maxValue={new Date(2026, 11, 31)}
    highlights={[
      {
        match: [month(2026, 6), month(2026, 7), month(2026, 8)],
        feedback: "warning",
        emphasis: "subtle",
        label: "Summer",
      },
      {
        match: month(2026, 12),
        feedback: "success",
        emphasis: "strong",
        label: "Launch",
      },
    ]}
  />
</div>

2026

<script setup lang="ts">
import { Calendar } from "@pindoba/vue-calendar";
import { month } from "@pindoba/core-calendar";
import { stack } from "@pindoba/styled-system/patterns";

// A standalone month picker (months is the leaf). Matchers apply at month
// granularity — the `month()` helper makes "disable/highlight a whole month"
// explicit. min/max bound the window: months before April read as disabled
// (earliest selectable month), and the year nav disables once there's no
// selectable month left either way.
const april = new Date(2026, 3, 1);
const maxValue = new Date(2026, 11, 31);
const highlights = [
  {
    match: [month(2026, 6), month(2026, 7), month(2026, 8)],
    feedback: "warning" as const,
    emphasis: "subtle" as const,
    label: "Summer",
  },
  {
    match: month(2026, 12),
    feedback: "success" as const,
    emphasis: "strong" as const,
    label: "Launch",
  },
];
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <Calendar
      :views="['months']"
      :initialDate="april"
      :minValue="april"
      :maxValue="maxValue"
      :highlights="highlights"
    />
  </div>
</template>

#Keyboard

#Default

#Range

#Month range

#Year range

#Multiple months

#Restricted views

#Month + year picker

#Standalone month picker

#Disabled dates & highlights

#Month & year pickers

Keyboard

Default

Range

Month range

Year range

Multiple months

Restricted views

Month + year picker

Standalone month picker

Disabled dates & highlights

Month & year pickers