Calendar

The Calendar component provides a flexible and interactive way to select single dates or date ranges. It can be used as a standalone component or integrated with other components like Input and PopOver to create a date picker.

Import

import { Calendar } from 'h2o-library';

Basic Usage

Single Date Selection

The default mode of the calendar is single, allowing users to select one date.

import { useState } from "react";
import { Calendar } from "h2o-library";

const MyCalendar = () => {
  const [date, setDate] = useState(new Date());

  const handleDateChange = (newDate) => {
    if (newDate instanceof Date) {
      setDate(newDate);
    }
  };

  return <Calendar mode="single" value={date} onChange={handleDateChange} />;
};

Date Range Selection

Set mode="range" to allow users to select a start and end date.

import { useState } from "react";
import { Calendar } from "h2o-library";

const MyRangeCalendar = () => {
  const [dateRange, setDateRange] = useState([new Date(), null]);

  const handleDateChange = (newRange) => {
    if (Array.isArray(newRange)) {
      setDateRange(newRange);
    }
  };

  return <Calendar mode="range" value={dateRange} onChange={handleDateChange} />;
};

Date Picker with Popover

Combine the Calendar with Input and PopOver to create a full-featured date picker.

import { useState } from "react";
import { Calendar, Input, PopOver, PopOverTrigger, PopOverContent } from "h2o-library";

const DatePicker = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [date, setDate] = useState(new Date());

  const handleDateChange = (newDate) => {
    if (newDate instanceof Date) {
      setDate(newDate);
      setIsOpen(false);
    }
  };

  return (
    <PopOver isOpen={isOpen} setIsOpen={setIsOpen}>
      <PopOverTrigger>
        <Input
          label="Selected Date"
          value={date ? date.toLocaleDateString() : ""}
          readOnly
          placeholder="Select a date"
          rightIcon="calendar"
        />
      </PopOverTrigger>
      <PopOverContent>
        <Calendar mode="single" value={date} onChange={handleDateChange} />
      </PopOverContent>
    </PopOver>
  );
};

Props

Prop	Type	Default	Description
mode	"single" | "range"	"single"	The selection mode of the calendar.
value	Date | [Date | null, Date | null]	-	The selected date or date range.
onChange	(value: Date | [Date | null, Date | null]) => void	-	Callback function when the value changes.
minDate	Date	-	The minimum selectable date.
maxDate	Date	-	The maximum selectable date.
forceWeek	boolean	false	If true, selects the whole week in range mode.
disabledDates	Date[]	[]	An array of dates that are disabled.
month	Date	-	The month to display. Defaults to the current month or the month of the selected date.
hideHeader	boolean	false	If true, hides the month/year navigation header.
hideOutsideDays	boolean	false	If true, hides days from the previous and next months.
hoverDate	Date | null	-	Externally controlled hover date for range selection.
onDayMouseEnter	(date: Date) => void	-	Callback when the mouse enters a day cell.
onDayMouseLeave	() => void	-	Callback when the mouse leaves a day cell.

Accessibility

• The calendar is keyboard navigable.
• Dates are announced by screen readers.
• Buttons for month navigation have accessible labels.