Calendar

The Calendar component provides a flexible UI element for displaying a date picker. It includes several customizations for styling and functionality.

Usage

import { useState } from 'react';
import { Calendar } from '@harnessio/ui/components';

const CalendarExample = () => {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());

  return (
      <Calendar
        mode="range"
        selected={selectedDate}
        onSelect={setSelectedDate}
        showOutsideDays
        fromDate={new Date().setDate(new Date().getDate() - 10)}
        toDate={new Date().setDate(new Date().getDate() + 10)}
        weekStartsOn={1}
      />
    );
};

export default CalendarExample;

API Reference

Prop	Required	Default	Type
mode	false	'single'	'single' | 'multiple' | 'range'
selected	false		Date | Date[] | { from: Date; to: Date }
onSelect	false		(date: Date | Date[] | { from: Date; to: Date }) => void
showOutsideDays	false	true	boolean
className	false		string
classNames	false
components	false
disabled	false		Date | Date[] | { from: Date; to: Date }
fromDate	false		Date
toDate	false		Date
locale	false		Locale
weekStartsOn	false		0 | 1 | 2 | 3 | 4 | 5 | 6