react-multi-date-picker-calendar

React Multi Calendar & Date Picker

A customizable and flexible React Multi Calendar & Date Picker component that supports single date selection, multi-date selection, and date range selection.

Demo

Full Documentation

A versatile Calendar & Date Picker component for React.

Installation

Install the package using npm or yarn:

npm install react-multi-date-picker-calendar

yarn add react-multi-date-picker-calendar

Usage

Import the Calendar component and use it in your React application:

import React from "react";
import Calendar from "react-multi-date-picker-calendar";

const App = () => {
  const handleDateChange = (dates) => {
    // Handle the selected dates
    console.log("Selected Dates:", dates);
  };

  return (
    <div>
      <h1>My App</h1>
      <Calendar
        timeOfDay="startOfDay"
        onChange={handleDateChange} />
    </div>
  );
};

export default App;

Calendar Component

A versatile date picker React component that supports various selection modes and features.

Props

The Calendar component accepts the following props:

| Prop                     | Type                                                        | Default          | Description                                                  |
|--------------------------|-------------------------------------------------------------|------------------|--------------------------------------------------------------|
| `DateFormat`            | string                                                      | `'DD/MM/YYYY'`   | The format of the date displayed in the input field.         |
| `addClass`              | string                                                      | `undefined`      | Additional CSS class to be applied to the calendar component. |
| `inputClass`            | string                                                      | `undefined`      | CSS class for the input field.                               |
| `labelClass`            | string                                                      | `undefined`      | CSS class for the label of the calendar input field.         |
| `multiSelect`           | boolean                                                     | `false`          | If `true`, allows selecting multiple dates.                  |
| `value`                 | Date[] \| Date \| null                                      | `[]`             | Value(s) of the selected date(s).                            |
| `label`                 | string                                                      | `undefined`      | Label for the calendar input field.                          |
| `id`                    | string                                                      | Generated ID     | ID for the calendar input field. If not provided, a random ID will be generated. |
| `placeholder`           | string                                                      | `'Select a date'`| Placeholder text for the input field.                        |
| `readonly`              | boolean                                                     | `true`           | If `true`, the input field will be read-only.                |
| `isDisabled`            | boolean                                                     | `false`          | If `true`, disables the input field.                        |
| `OnChange`              | (e: any) => void                                            | `undefined`      | Event handler for when the value of the input changes.      |
| `minDate`               | Date \| null                                                | `null`           | The minimum selectable date.                                 |
| `maxDate`               | Date \| null                                                | `null`           | The maximum selectable date.                                 |
| `disabledDates`         | Date[]                                                      | `[]`             | Array of dates that should be disabled.                     |
| `selectsRange`          | boolean                                                     | `false`          | If `true`, enables selection of date ranges.                |
| `PrevIcon`              | React.ReactNode                                             | `undefined`      | Custom icon for navigating to the previous month.            |
| `NextIcon`              | React.ReactNode                                             | `undefined`      | Custom icon for navigating to the next month.                |
| `showMonth`             | boolean                                                     | `false`          | If `true`, displays the month in the calendar view.         |
| `showYear`              | boolean                                                     | `false`          | If `true`, displays the year in the calendar view.          |
| `minYear`               | number                                                      | `1970`           | The minimum selectable year.                                 |
| `maxYear`               | number                                                      | Current year + 3 | The maximum selectable year.                                 |
| `appointments`          | Appointment[]                                               | `[]`             | Array of appointment objects to be displayed on the calendar.|
| `showSelectedDatesList` | boolean                                                     | `false`          | If `true`, displays a list of selected dates.               |
| `showDatePicker`        | boolean                                                     | `false`          | If `true`, displays a date picker component.                |
| `weekdayFormat`         | number                                                      | `0`              | Format for displaying weekdays (0: Sunday, 1: Monday, ..., 6: Saturday).|
| `monthFormat`           | `'short' \| 'long' \| 'short-year' \| 'long-year'`         | `'long-year'`    | Format for displaying the month and year.                   |
| `showNavigationButtons` | boolean                                                     | `true`           | If `true`, displays navigation buttons for changing months. |
| `showNavigationPosition`| `'left' \| 'center' \| 'right'`                            | `'center'`       | Position of the navigation buttons (if shown).              |
| `tooltipVisible`        | boolean                                                     | `false`          | If `true`, displays tooltips for dates with appointments.   |
| `timeOfDay`             | `'startOfDay' \| 'midOfDay' \| 'endOfDay' \| 'default' \| string` | `undefined` | Specifies how the time should be set for the selected date. Options include 'startOfDay', 'midOfDay', 'endOfDay', 'default', or a custom time in 'HH:mm:ss' format. |

Interface: Appointment

Property	Type	Description
date	Date	The date of the appointment.
status	string	The status of the appointment (e.g., 'Missed', 'Cancelled', 'Incomplete', 'Completed', etc.).
id	string	(Optional) Unique ID for the appointment.
time	string	(Optional) The time of the appointment.
title	string	(Optional) The title of the appointment.

Method: logSelectedDatesAppointments

const handleSelectedDatesChange = (selectedDates: Date[]) => {
  const selectedAppointments = logSelectedDatesAppointments(
    selectedDates,
    appointments
  );
  console.log('Selected Dates Appointments:', selectedAppointments);
};

Method: Adjust the date's time based on the timeOfDay

import React from "react";
import Calendar from "react-multi-date-picker-calendar";

const App = () => {
  const handleDateChange = (dates) => {
    console.log("Selected Dates:", dates);
  };

  return (
    <div>
      <Calendar timeOfDay="default" onChange={handleDateChange} />
      <Calendar timeOfDay="startOfDay" onChange={handleDateChange} />
      <Calendar timeOfDay="midOfDay" onChange={handleDateChange} />
      <Calendar timeOfDay="endOfDay" onChange={handleDateChange} />
      <Calendar timeOfDay="15:30:00" onChange={handleDateChange} />
      <Calendar timeOfDay={(date) => new Date(date.setHours(10, 15, 0))} onChange={handleDateChange} />
      <Calendar timeOfDay={(date) => {
        const customDate = new Date(date);
        customDate.setHours(15, 30, 0); // Set time to 15:30:00
        return customDate;
      }} onChange={handleDateChange} />
    </div>
  );
};

export default App;

Accessibility

The Calendar component is designed with accessibility in mind. It includes ARIA attributes for improved screen reader support and supports keyboard navigation.