A customizable and flexible React Multi Calendar & Date Picker component that supports single date selection, multi-date selection, and date range selection.
A versatile Calendar & Date Picker component for React.
Install the package using npm or yarn:
npm install react-multi-date-picker-calendaryarn add react-multi-date-picker-calendarImport 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;
A versatile date picker React component that supports various selection modes and features.
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. || 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. |
const handleSelectedDatesChange = (selectedDates: Date[]) => {
const selectedAppointments = logSelectedDatesAppointments(
selectedDates,
appointments
);
console.log('Selected Dates Appointments:', selectedAppointments);
};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;
The Calendar component is designed with accessibility in mind. It includes ARIA attributes for improved screen reader support and supports keyboard navigation.