Data Displayduskmoonimplemented8 demos

Calendar

Calendar renders date-oriented browsing and selection with month and year modes.

Import@duskmoon-dev/components/calendar

8API sections

26documented props

6behavior scenarios

Key API

valuedefaultValuemodedefaultModefullscreenvalidRange

Usage

When to use

Use it when users need to scan structured content and act on individual records.
Prefer it over ad hoc markup when the content has repeatable fields, hierarchy, or navigation state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Structured records

Designed for repeated or hierarchical content where users scan, compare, and inspect details.

Stateful interactions

Documents the props that control sorting, selection, expansion, pagination, or value changes where available.

Primary API surface

Calendar is most often configured through `value`, `defaultValue`, `mode`, `defaultMode`.

Covered behavior

Renders controlled value with fullscreen and custom classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Sep 2026

Basic usage

authored

Import the component stylesheet and Calendar from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Calendar } from "@duskmoon-dev/components/calendar";

export function Example() {
  return (<Calendar
  value="enabled"
  defaultValue="enabled"
>
  DuskMoon Calendar
</Calendar>);
}

Preview

Sep 2026

Renders controlled value with fullscreen and custom classes

test-backed

Calendar scenario from the component test coverage: renders controlled value with fullscreen and custom classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Calendar } from "@duskmoon-dev/components/calendar";

export function CalendarRendersControlledValueWithDemo() {
  return (<Calendar
  // Renders controlled value with fullscreen and custom classes
  value="enabled"
  defaultValue="enabled"
>
  DuskMoon Calendar
</Calendar>);
}

Preview

Sep 2026

Supports uncontrolled selection callbacks

test-backed

Calendar scenario from the component test coverage: supports uncontrolled selection callbacks.

Source

import "@duskmoon-dev/components/styles.css";
import { Calendar } from "@duskmoon-dev/components/calendar";

export function CalendarSupportsUncontrolledSelectionCallbacksDemo() {
  return (<Calendar
  // Supports uncontrolled selection callbacks
  value="enabled"
  defaultValue="enabled"
>
  DuskMoon Calendar
</Calendar>);
}

Preview

Sep 2026

Renders date cell content and full cell overrides

test-backed

Calendar scenario from the component test coverage: renders date cell content and full cell overrides.

Source

import "@duskmoon-dev/components/styles.css";
import { Calendar } from "@duskmoon-dev/components/calendar";

export function CalendarRendersDateCellContentDemo() {
  return (<Calendar
  // Renders date cell content and full cell overrides
  value="enabled"
  defaultValue="enabled"
>
  DuskMoon Calendar
</Calendar>);
}

Preview

Sep 2026

Supports month mode and month cell render

test-backed

Calendar scenario from the component test coverage: supports month mode and month cell render.

Source

import "@duskmoon-dev/components/styles.css";
import { Calendar } from "@duskmoon-dev/components/calendar";

export function CalendarSupportsMonthModeAndDemo() {
  return (<Calendar
  // Supports month mode and month cell render
  value="enabled"
  defaultValue="enabled"
>
  DuskMoon Calendar
</Calendar>);
}

Preview

Sep 2026

Emits panel changes for navigation and mode changes

test-backed

Calendar scenario from the component test coverage: emits panel changes for navigation and mode changes.

Source

import "@duskmoon-dev/components/styles.css";
import { Calendar } from "@duskmoon-dev/components/calendar";

export function CalendarEmitsPanelChangesForDemo() {
  return (<Calendar
  // Emits panel changes for navigation and mode changes
  value="enabled"
  defaultValue="enabled"
>
  DuskMoon Calendar
</Calendar>);
}

Preview

Sep 2026

Blocks disabled and out-of-range dates

test-backed

Calendar scenario from the component test coverage: blocks disabled and out-of-range dates.

Source

import "@duskmoon-dev/components/styles.css";
import { Calendar } from "@duskmoon-dev/components/calendar";

export function CalendarBlocksDisabledAndOutDemo() {
  return (<Calendar
  // Blocks disabled and out-of-range dates
  value="enabled"
  defaultValue="enabled"
>
  DuskMoon Calendar
</Calendar>);
}

Preview

Sunshine Theme

Sep 2026

Moonlight Theme

Sep 2026

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Calendar
  value="enabled"
  defaultValue="enabled"
>
  DuskMoon Calendar
</Calendar>
</div>

<div data-theme="moonlight">
  <Calendar
  value="enabled"
  defaultValue="enabled"
>
  DuskMoon Calendar
</Calendar>
</div>

API

The API reference below lists every parsed exported type or interface for Calendar. Start with `value`, `defaultValue`, `mode`, `defaultMode` for common usage.

Types: packages/components/src/components/calendar/Calendar.types.tsScenarios: packages/components/src/components/calendar/Calendar.test.tsx

CalendarPropsinterface extends Omit< ComponentProps<"div">, "defaultValue" | "onChange" | "onSelect" >

Prop	Type	Required	Description
`value`	`CalendarValue`	No	value configures Calendar.
`defaultValue`	`CalendarValue`	No	defaultValue configures Calendar.
`mode`	`CalendarMode`	No	mode configures Calendar.
`defaultMode`	`CalendarMode`	No	defaultMode configures Calendar.
`fullscreen`	`boolean`	No	fullscreen configures Calendar.
`validRange`	`[CalendarValue, CalendarValue]`	No	validRange configures Calendar.
`disabledDate`	`(date: string) => boolean`	No	disabledDate configures Calendar.
`dateCellRender`	`(date: string) => ReactNode`	No	dateCellRender configures Calendar.
`dateFullCellRender`	`(date: string) => ReactNode`	No	dateFullCellRender configures Calendar.
`monthCellRender`	`(date: string) => ReactNode`	No	monthCellRender configures Calendar.
`monthFullCellRender`	`(date: string) => ReactNode`	No	monthFullCellRender configures Calendar.
`cellRender`	`(current: string, info: CalendarInfo) => ReactNode`	No	cellRender configures Calendar.
`fullCellRender`	`(current: string, info: CalendarInfo) => ReactNode`	No	fullCellRender configures Calendar.
`headerRender`	`(props: CalendarHeaderRenderProps) => ReactNode`	No	headerRender configures Calendar.
`onChange`	`(date: string) => void`	No	onChange configures Calendar.
`onSelect`	`(date: string, selectInfo: CalendarSelectInfo) => void`	No	onSelect configures Calendar.
`onPanelChange`	`(date: string, mode: CalendarMode) => void`	No	onPanelChange configures Calendar.

CalendarInfointerface

Prop	Type	Required	Description
`originNode`	`ReactNode`	Yes	originNode configures Calendar.
`today`	`string`	Yes	today configures Calendar.
`range`	`"start" \| "end"`	No	range configures Calendar.
`type`	`CalendarMode`	Yes	type configures Calendar.

CalendarSelectInfointerface

Prop	Type	Required	Description
`source`	`CalendarSelectSource`	Yes	source configures Calendar.

CalendarHeaderRenderPropsinterface

Prop	Type	Required	Description
`value`	`string`	Yes	value configures Calendar.
`type`	`CalendarMode`	Yes	type configures Calendar.
`onChange`	`(value: CalendarValue) => void`	Yes	onChange configures Calendar.
`onTypeChange`	`(type: CalendarMode) => void`	Yes	onTypeChange configures Calendar.

CalendarModetype

"month" | "year"

CalendarValuetype

string | Date

CalendarSelectSourcetype

"date" | "month" | "year" | "customize"

CalendarComponenttype

ForwardRefExoticComponent< CalendarProps & RefAttributes<HTMLDivElement> >