A simple and accessible React Calendar component that allows users to select dates.
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:
``sh`
npm install react-multi-date-picker-calendar
`sh`
yarn add react-multi-date-picker-calendar
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 (
export default App;
`
A versatile date picker React component that supports various selection modes and features.
The Calendar component accepts the following props:
`jsxDateFormat
| Prop | Type | Default | Description |
|--------------------------|-------------------------------------------------------------|------------------|--------------------------------------------------------------|
| | 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. |
`typescript`
const handleSelectedDatesChange = (selectedDates: Date[]) => {
const selectedAppointments = logSelectedDatesAppointments(
selectedDates,
appointments
);
console.log('Selected Dates Appointments:', selectedAppointments);
};
`sh
import React from "react";
import Calendar from "react-multi-date-picker-calendar";
const App = () => {
const handleDateChange = (dates) => {
console.log("Selected Dates:", dates);
};
return (
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.