Calendar

The Calendar component is a date field component that allows users to enter and edit dates. It leverages the react-day-picker library.

Preview

Usage

import { Calendar } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <Calendar />
  );
}

Props

Prop	Description	Required	Value
className	custom styling	optional	SCSS or Tailwind
classNames	classes passed to the day picker	optional	SCSS or Tailwind
showOutsideDays	show days outside the current month	optional	boolean, default: true

Notes

• The Calendar component uses the DayPicker from react-day-picker.

• The className prop allows custom styling to be applied.

• The classNames prop allows for custom classes to be passed to the day picker.

• The showOutsideDays prop determines whether days outside the current month are shown.

• The components prop is used to customise the left and right navigation icons.

• See the Shadcn Calendar docs for more information