Guides

Getting Started

Install Colander and start building accessible calendar components.

Installation

npm install @klinking/colander @js-temporal/polyfill

Basic Usage

Colander provides two calendar views that share state via CalendarProvider:

MonthView — Traditional month grid
WeeksView — Continuous scrolling weeks

Quick Example

import type { Temporal } from "@js-temporal/polyfill";
import {
  CalendarProvider,
  MonthView,
  Grid,
  GridHeader,
  GridHeaderCell,
  GridBody,
  WeekTemplate,
  DayCellTemplate,
  DayButton,
} from "@klinking/colander";

export function BasicCalendar({
  onSelect,
}: {
  onSelect?: (value: Temporal.PlainDate | null) => void;
}) {
  return (
    <CalendarProvider format="PlainDate" onValueChange={onSelect}>
      <MonthView>
        <Grid>
          <GridHeader>
            <GridHeaderCell />
          </GridHeader>
          <GridBody>
            <WeekTemplate>
              <DayCellTemplate>
                <DayButton />
              </DayCellTemplate>
            </WeekTemplate>
          </GridBody>
        </Grid>
      </MonthView>
    </CalendarProvider>
  );
}