RadCN
Inputsreadycomponentready

Calendar

A package-backed date grid with native selection state, optional dropdown captions, and explicit alternate-calendar boundaries.

Importimport { Calendar } from 'radcn/calendar'
Preview

Live package example

Render upstream calendar-demo as a single-selection Calendar with dropdown captions, ISO values, grid semantics, hidden form state, and custom styling hooks.

Calendar Demo

Render upstream calendar-demo as a single-selection Calendar with dropdown captions, ISO values, grid semantics, hidden form state, and custom styling hooks.

Preview
SunMonTueWedThuFriSat

calendar-hijri is an intentional divergence

Persian and Hijri rendering is app-owned alternate-calendar work that may compose its own engine with RadCN tokens and hooks.

RadCN does not depend on react-day-picker/persian, next/font, or lucide-react.

import { Calendar } from 'radcn/calendar'

export function CalendarExamples() {
  return (
    <>
      <Calendar
        captionLayout="dropdown"
        defaultMonth="2026-06-01"
        defaultSelected="2026-06-12"
        max="2030-12-31"
        min="2020-01-01"
        name="release_date"
      />

      <p>
        Alternate Persian or Hijri calendar engines remain app-owned recipes
        that can reuse RadCN tokens and hooks.
      </p>
    </>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Calendar } from 'radcn/calendar'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Calendar renders a role="grid" table with day buttons named by full dates.
  • Selection is reflected through data-selected, aria-selected, and a native hidden input when name is provided.
  • captionLayout="dropdown" renders native month and year select controls in the caption area without replacing previous/next navigation.

Customization

  • Use class, style, CSS variables, and data-radcn-calendar* hooks instead of className, classNames, data-slot, cva, or Tailwind utilities.
  • defaultMonth maps to defaultMonth/month ISO props; selected and onSelect map to selected/defaultSelected props, hidden input values, and radcn-calendar-select events.
  • captionLayout maps to package-owned label or dropdown captions with data-radcn-calendar-month-select and data-radcn-calendar-year-select hooks.
  • Button composition stays inside the Calendar day and navigation controls; Date Picker composition remains separate package evidence.

Remix 3 Notes

  • react-day-picker, DayPicker, DayButton, and getDefaultClassNames map to RadCN package-owned calendar markup and browser enhancement.
  • buttonVariants, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, and lucide-react map to package classes or app-owned presentation rather than package dependencies.
  • react-day-picker/persian, next/font/google, Vazirmatn, and RTL chevron behavior are app-owned alternate-calendar recipes, not RadCN package dependencies.
  • Calendar examples document block/sidebar separation: layout demos stay in docs or app composition while the package owns reusable calendar behavior.
  • vendor source remains read-only evidence and is not imported by RadCN.