Documentation

Learn how to use Colander to build accessible, customizable calendar components.

Introduction

What Colander is, the ideas behind it, and how it compares to other React date pickers.

Install Colander and build a working, styled calendar in a few minutes.

Keyboard interactions, ARIA semantics, and localization built into Colander.

How Colander components fit together — templates, the render prop, and building your own parts.

Style Colander with plain CSS, Tailwind, or any tool — via data attributes and the render prop.

Single, multiple, and range selection — controlled and uncontrolled — plus range previews and drag handles.

Temporal, the temporal prop, value formats, subpath entry points, time zones, and locales.

Manages shared state across calendar views — selection, bounds, locale, and more.

The traditional paged month grid, with multi-month layouts and month-level navigation.

A continuously scrolling window of week rows that spans month boundaries.