Component
Calendar
Calendar
A date field component that allows users to enter and edit date.
October 2023
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
About
The Calendar component is built on top of React DayPicker.
Installation
Install the following dependencies
npm i react-day-picker date-fnsCopy and paste the following code into your project
components/ui/calendar/index.tsx
'use client'
import * as React from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import {
DayPicker,
type DayPickerDefaultProps,
type DayPickerSingleProps,
type DayPickerMultipleProps,
type DayPickerRangeProps,
} from 'react-day-picker'
import { styled } from '@shadow-panda/styled-system/jsx'
import { cx } from '@shadow-panda/styled-system/css'
import { button, icon, calendar } from '@shadow-panda/styled-system/recipes'
type DayPickerProps =
| DayPickerDefaultProps
| DayPickerSingleProps
| DayPickerMultipleProps
| DayPickerRangeProps
function BaseCalendar({ className, classNames, showOutsideDays = true, ...props }: DayPickerProps) {
const { root, nav_button: navButton, day, ...rest } = calendar()
return (
<DayPicker
className={cx(root, className)}
classNames={{
...rest,
nav_button: cx(button({ variant: 'outline' }), navButton),
day: cx(button({ variant: 'ghost' }), day),
...classNames,
}}
components={{
IconLeft: () => <ChevronLeft className={icon()} />,
IconRight: () => <ChevronRight className={icon()} />,
}}
showOutsideDays={showOutsideDays}
{...props}
/>
)
}
BaseCalendar.displayName = 'Calendar'
export const Calendar = styled(BaseCalendar)
export type CalendarProps = React.ComponentProps<typeof Calendar>Update the import paths to match your project setup
Usage
import { Calendar } from '@/components/ui/calendar'const [date, setDate] = React.useState<Date | undefined>(new Date())
return (
<Calendar
mode="single"
selected={date}
onSelect={setDate}
className={css({
border: 'base',
rounded: 'md',
})}
/>
)See the React DayPicker documentation for more information.
Date Picker
You can use the Calendar component to build a date picker. See the See the React DayPicker page for more information.