Calendar

New

A date picker that allows entering a date using a calendar.

Usage

To display a Calendar, supply a mode to Calendar. Calendar can display three different modes: single, multiple, or range.

February 2025

import { Calendar } from "stylus-ui/Calendar";

export default () => <Calendar mode="single" />;

Single

Calendars in single mode allow the user to select up to one date.

February 2025

import { Calendar } from "stylus-ui/Calendar";

export default () => <Calendar mode="single" />;

Multiple

Calendars in multiple mode allow the user to select more than one date.

February 2025

import { Calendar } from "stylus-ui/Calendar";

export default () => <Calendar mode="multiple" />;

Range

Calendars in range mode allow the user to select a range of dates.

February 2025

import { Calendar } from "stylus-ui/Calendar";

export default () => <Calendar mode="range" />;

Dark mode

To display a calendar on a dark background, set theme to “dark”.

February 2025

import { Calendar } from "stylus-ui/Calendar";

export default () => <Calendar mode="single" theme="dark" />;

Show input

When showInput is enabled, the Calendar will show an input field which allows the user to input a date. This works for all modes.

February 2025

import { Calendar } from "stylus-ui/Calendar";

export default () => <Calendar mode="multiple" showInput />;

Controlled state

Calendars can be controlled by passing a selected and an onSelect.

import { useState } from "react";
import moment from "moment";
import { Calendar } from "stylus-ui/Calendar";
import { Button } from "stylus-ui/Button";
import { Popover, PopoverTrigger, PopoverContent } from "stylus-ui/Popover";

export default () => {
  const [selected, onSelect] = useState(new Date());
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>{moment(selected).format("MMMM D, YYYY")}</Button>
      </PopoverTrigger>
      <PopoverContent className="p-0">
        <Calendar
          mode="single"
          showInput
          theme="dark"
          selected={selected}
          onSelect={onSelect}
        />
      </PopoverContent>
    </Popover>
  );
};

Formatting dates

Dates displayed in a Calendar input can be formatted by passing in a format string. This string should follow moment’s formatting guide.

February 2025

import { Calendar } from "stylus-ui/Calendar";

export default () => (
  <Calendar
    mode="single"
    showInput
    placeholder="Selected Date: Month, Day, Year"
    format="[Selected Date:] MMMM D, YYYY"
  />
);

API Reference

`Calendar`

Inherits properties from DayPicker.

Prop	Type	Default
`format`	`string`
`mode`	`"single""multiple""range"`
`onSelect`	`(selected: Date \| Date[] \| DateRange) => void`
`placeholder`	`string`
`selected`	`DateDate[]DateRange`
`showInput`	`boolean`
`theme`	`"light""dark"`	`"light"`

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa