UI

Command Palette

Search for a command...

Calendar

A date field component that allows users to enter and edit date.

Docs
December 2025
"use client";

import { useState } from "react";
import { Calendar } from "@/components/ui/calendar";

export default function CalendarDemo() {
  const [date, setDate] = useState<Date>();

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      css={{ w: "fit", borderWidth: "1px", rounded: "md" }}
    />
  );
}

About

The Calendar component is built on top of React DayPicker.

Installation

npx nore-ui-cli@latest add calendar

Usage

import { Calendar } from "@/components/ui/calendar";

const [date, setDate] = useState<Date>();

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className={css({ w: "fit", borderWidth: "1px", rounded: "md" })}
  />
);

See the React DayPicker documentation for more information.

Customization

See the React DayPicker documentation for more information on how to customize the Calendar component.

Date Picker

You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.

Persian / Hijri / Jalali Calendar

To use the Persian calendar, edit components/ui/calendar.tsx and replace react-day-picker with react-day-picker/persian.

- import { DayPicker } from "react-day-picker"
+ import { DayPicker } from "react-day-picker/persian"

Examples

Multiple Months

June 2025
July 2025
"use client";

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

export default function Calendar02() {
  const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));

  return (
    <Calendar
      mode="single"
      defaultMonth={date}
      numberOfMonths={2}
      selected={date}
      onSelect={setDate}
      css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
    />
  );
}

Month and Year Selector

June 2025
"use client";

import * as React from "react";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export default function CalendarMonthYear() {
  const [dropdown, setDropdown] =
    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>("dropdown");
  const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));

  return (
    <styled.div css={{ display: "flex", flexDir: "column", gap: "4" }}>
      <Calendar
        mode="single"
        defaultMonth={date}
        selected={date}
        onSelect={setDate}
        captionLayout={dropdown}
        className="rounded-lg border shadow-sm"
      />
      <styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
        <Label htmlFor="dropdown" css={{ px: "1" }}>
          Dropdown
        </Label>
        <Select
          value={dropdown}
          onValueChange={(value) =>
            setDropdown(value as React.ComponentProps<typeof Calendar>["captionLayout"])
          }
        >
          <SelectTrigger id="dropdown" css={{ bg: "bg", w: "full" }}>
            <SelectValue placeholder="Dropdown" />
          </SelectTrigger>
          <SelectContent align="center">
            <SelectItem value="dropdown">Month and Year</SelectItem>
            <SelectItem value="dropdown-months">Month Only</SelectItem>
            <SelectItem value="dropdown-years">Year Only</SelectItem>
          </SelectContent>
        </Select>
      </styled.div>
    </styled.div>
  );
}

Date and Time Picker

"use client";

import * as React from "react";
import { LuChevronDown } from "react-icons/lu";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

export default function Calendar24() {
  const [open, setOpen] = React.useState(false);
  const [date, setDate] = React.useState<Date | undefined>(undefined);

  return (
    <styled.div css={{ display: "flex", gap: "4" }}>
      <styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
        <Label htmlFor="date-picker" css={{ px: "1" }}>
          Date
        </Label>
        <Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              id="date-picker"
              css={{ w: "32", justifyContent: "space-between", fontWeight: "normal" }}
            >
              {date ? date.toLocaleDateString() : "Select date"}
              <LuChevronDown />
            </Button>
          </PopoverTrigger>
          <PopoverContent css={{ w: "auto", overflow: "hidden", p: "0" }} align="start">
            <Calendar
              mode="single"
              selected={date}
              captionLayout="dropdown"
              onSelect={(date) => {
                setDate(date);
                setOpen(false);
              }}
            />
          </PopoverContent>
        </Popover>
      </styled.div>
      <styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
        <Label htmlFor="time-picker" css={{ px: "1" }}>
          Time
        </Label>
        <Input
          type="time"
          id="time-picker"
          step="1"
          defaultValue="10:30:00"
          css={{
            bg: "bg",
            appearance: "none",
            "&::-webkit-calendar-picker-indicator": {
              display: "none",
              appearance: "none",
            },
          }}
        />
      </styled.div>
    </styled.div>
  );
}
Button GroupCard