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
        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.   |

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);
};

Accessibility

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