Calendar

A keyboard- and screen-reader-accessible date picker for single-date and range selection.

January 2025

Show code

import { Calendar } from "@makeplane/propel/components/calendar";
import * as React from "react";

export default function BasicDemo() {
  const [selected, setSelected] = React.useState<Date | undefined>(new Date(2025, 0, 24));

  return (
    <Calendar
      mode="single"
      defaultMonth={new Date(2025, 0, 1)}
      selected={selected}
      onSelect={setSelected}
    />
  );
}

Installation

import { Calendar } from "@makeplane/propel/components/calendar";

Usage

import { Calendar } from "@makeplane/propel/components/calendar";
import * as React from "react";

export default function BasicDemo() {
  const [selected, setSelected] = React.useState<Date | undefined>(new Date(2025, 0, 24));

  return (
    <Calendar
      mode="single"
      defaultMonth={new Date(2025, 0, 1)}
      selected={selected}
      onSelect={setSelected}
    />
  );
}

Examples

Range

January 2025

Show code

import { Calendar } from "@makeplane/propel/components/calendar";
import * as React from "react";

// Mirrors react-day-picker's `DateRange` shape without importing it (demos import
// only from `@makeplane/propel/components/*`).
type DateRange = { from: Date | undefined; to?: Date | undefined };

export default function RangeDemo() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: new Date(2025, 0, 13),
    to: new Date(2025, 0, 20),
  });

  return (
    <Calendar
      mode="range"
      defaultMonth={new Date(2025, 0, 1)}
      selected={range}
      onSelect={setRange}
    />
  );
}

Disabled days

January 2025

Show code

import { Calendar } from "@makeplane/propel/components/calendar";
import * as React from "react";

export default function DisabledDaysDemo() {
  const [selected, setSelected] = React.useState<Date | undefined>();

  return (
    <Calendar
      mode="single"
      defaultMonth={new Date(2025, 0, 1)}
      selected={selected}
      onSelect={setSelected}
      // Weekends (Sunday and Saturday) render muted and cannot be selected.
      disabled={{ dayOfWeek: [0, 6] }}
    />
  );
}

Today indicator

The current date is marked with an accent dot below the day number; the dot persists when today is selected. Pin it with the today prop — here it’s set to January 6 for a deterministic grid.

January 2025

Show code

import { Calendar } from "@makeplane/propel/components/calendar";
import * as React from "react";

export default function TodayIndicatorDemo() {
  const [selected, setSelected] = React.useState<Date | undefined>();

  return (
    <Calendar
      mode="single"
      defaultMonth={new Date(2025, 0, 1)}
      today={new Date(2025, 0, 6)}
      selected={selected}
      onSelect={setSelected}
    />
  );
}

API Reference

Calendar forwards react-day-picker’s DayPickerProps — mode, selected, onSelect, month, defaultMonth, disabled, today, and the rest — with className, style, classNames, numberOfMonths, captionLayout, and showWeekNumber omitted: styling is owned by propel’s tokens, and those layout modes have no styled contract.