Calendar

Date picker component for selecting dates. Built with react-day-picker.

Installation

# Install @opencosmos/ui to use Calendar
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

mode— Selection mode

Usage

Import

import { Calendar } from '@opencosmos/ui';

Example

<Calendar>
  Content
</Calendar>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
mode	single \| multiple \| range	"single"	Selection mode

Code Examples

Basic Usage

Single date selection

import { Calendar } from "@opencosmos/ui"
import { useState } from "react"

const [date, setDate] = useState<Date | undefined>(new Date())

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
/>