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:

``sh
npm install react-multi-date-picker-calendar
`

`sh
yarn add react-multi-date-picker-calendar
`

Usage

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

`sh
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 (


`

Calendar Component

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

Props

The Calendar component accepts the following props:

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

`

$3

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

$3

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

$3

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

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

return (



``

Accessibility

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