Studio
Studio/Kits
New kit
Canonical inventory
Visualization · application

Date-range calendar

visualization.date-range-calendar

Date-range calendar: A graphical encoding that makes patterns, change, or quantities easier to understand.

date-range calendarthe chartthe visual data display
States4
Touch targetDisplay
Evidence4
Introduced by1 kits
Visual specimen

Same contract. Every kit voice.

Date-range calendar
MTWTFSS
MAVAN renderingdefault
Translation table

What code calls it.

Webfigure with accessible dataThis component is composed from multiple web primitives.pattern
ARIAimg or figure with data alternativeNo single ARIA role represents the complete component.pattern
SwiftUICustom View compositionSwiftUI has no single direct equivalent; compose and name the behavior explicitly.approximation
AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation
Anatomy

Every part, named.

  1. 1Plot or drawing area
  2. 2Encoded marks
  3. 3Scale or categories
  4. 4Labels or legend
  5. 5Accessible data alternative
Often confused with

Similar shape. Different contract.

Sparklinevisualization.sparkline

Shares a visual family, but has a different role, state model, or interaction contract.

Mini bar chartvisualization.mini-bars

Shares a visual family, but has a different role, state model, or interaction contract.

Bar chartvisualization.bar-chart

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Date-range calendar component (visualization.date-range-calendar). Date-range calendar: A graphical encoding that makes patterns, change, or quantities easier to understand. Support these states: default, loading, empty, error. Use semantic design tokens rather than raw visual values. Preserve a minimum appropriatepx touch target where interactive. Provide and verify: implementation, state-matrix, responsive, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.
Studio contract

What must be proven.

Required states

default · loading · empty · error

Required evidence

implementation · state-matrix · responsive · reduced-motion

Source union

cabana