Skip to content
github

Calendar

The Calendar component provides a flexible UI element for displaying a date picker. It’s a styled wrapper around react-day-picker, so it supports single-date, multi-date, and range selection along with bounds and disabled days.

Variations

Single

Pick one date with mode="single".

Multiple

Collect several individual dates with mode="multiple".

Bounded range

Clamp the selectable window with fromDate / toDate; days outside it are disabled.

Installation

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;