Calendar
A date field component that allows users to enter and edit date.
July 2024
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
About
The Calendar component is built on top of React DayPicker.
Installation
Install the following dependencies:
npm install react-day-picker date-fnsAdd the Button component to your project.
The Calendar component uses the Button component. Make sure you have it installed in your project.
Copy and paste the following code into your project.
'use client';
import clsx from 'clsx';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import { buttonVariants } from '../button';
import styles from './styles.module.scss';
export type CalendarProps = React.ComponentProps<typeof DayPicker>;
const Calendar = ({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) => {
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={clsx(styles.base, className)}
classNames={{
months: styles.months,
month: styles.month,
caption: styles.caption,
caption_label: styles.caption__label,
nav: styles.nav,
nav_button: clsx(buttonVariants({ variant: 'outline' }), styles.nav__button),
nav_button_previous: styles.nav__button__prev,
nav_button_next: styles.nav__button__next,
table: styles.table,
head_row: styles.head_row,
head_cell: styles.head_cell,
row: styles.row,
cell: styles.cell,
day: clsx(buttonVariants({ variant: 'ghost' }), styles.day),
day_range_end: clsx('day__range__end', styles.day__range__end),
day_selected: styles.day__selected,
day_today: styles.day__today,
day_outside: clsx('day__outside', styles.day__outside),
day_disabled: styles.day__disabled,
day_range_middle: styles.day__range__middle,
day_hidden: styles.day__hidden,
...classNames,
}}
components={{
IconLeft: ({ ...props }) => <ChevronLeft className={styles.chevron__icon} />,
IconRight: ({ ...props }) => <ChevronRight className={styles.chevron__icon} />,
}}
{...props}
/>
);
};
Calendar.displayName = 'Calendar';
export { 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='rounded-md border' />;See the React DayPicker documentation for more information.
Date Picker
You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.