SERP UI logo
SERPUI
Docs
Calendar

Calendar

A component that displays a monthly calendar interface, allowing users to view dates and select a single date or a range of dates. It's built upon the React DayPicker library.

Docs

This preview shows the Calendar component, allowing date selection.

Loading...

About

The Calendar component is a styled wrapper around the powerful React DayPicker library. It provides the core functionality, while this component adds styling consistent with the rest of the UI library.

Installation

To use the Calendar component in your project, you need to install it along with its dependencies. You have two options: using the CLI (Command Line Interface) for a quick setup, or following the Manual steps for more control and understanding.

The CLI command is the easiest way to add the Calendar component. It automatically handles downloading the necessary code and installing dependencies for you. Running this command in your project's terminal will add the calendar component files and required packages.

npx shadcn@latest add calendar

Usage

Once installed, import the Calendar component and use it within your React components. You'll typically need state to manage the selected date(s).

Here's a basic example for selecting a single date:

  • Use React.useState to store the selected date.

  • Pass the state and setter function to the selected and onSelect props.

  • Set the mode prop to "single" for single date selection.

const [date, setDate] = React.useState<Date | undefined>(new Date()); // Initialize state with current date

return (
  <Calendar
    mode="single" // Specify single date selection mode
    selected={date} // Pass the current selected date state
    onSelect={setDate} // Pass the state setter function to update on selection
    className="rounded-md border" // Optional: Add custom styling
  />
);

For more advanced usage, such as selecting ranges, multiple dates, disabling dates, or localization, please refer to the comprehensive React DayPicker documentation.

Date Picker Integration

The <Calendar> component is the core building block for creating date pickers. Combine it with components like <Popover> and <Button> to create a dropdown date selection experience. See the Date Picker component page for a ready-to-use implementation.

Examples

Calendar within a Form

This example demonstrates how to integrate the Calendar component within a form structure, potentially using libraries like React Hook Form.

Loading...

Changelog

11-03-2024 day_outside color

  • Changed the color of the day_outside class to the following to improve contrast:

    "day_outside:
      "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
ButtonCard