🚀 Introducing react-multi-date-picker-calendar – An Accessible & Customizable Date Picker for React 📅

When building web applications, accessibility and simplicity are often the two most sought-after features. That's why I created the react-multi-date-picker-calendar a versatile and accessible date picker libray for React. In this article, I’ll walk you through its key features and show how you can easily integrate it into your project.

Why I Built This Library

As a front-end developer, I noticed a gap in the availability of accessible and user-friendly date picker components. While there are many excellent date picker libraries out there, I wanted to build one that emphasizes:

1. Accessibility: Support for keyboard navigation and screen readers.
2. Customizability: The ability to easily style and adapt to different use cases.
3. Simplicity: A simple API with the power to support both single-date and multi-date selections, including date ranges.

NPM Package

Features

• Single or Multi-Date Selection: You can choose one or multiple dates effortlessly.
• Range Selection: Enable date range picking for more flexible date management.
• Disabled Dates: Exclude specific dates from selection based on your requirements.
• Appointment Management: Display dates with specific statuses such as ‘Completed,’ ‘Missed,’ or ‘Cancelled.’
• Accessible: Designed with ARIA attributes and keyboard navigation in mind.
• Customizable: Pass in your own styles, icons, and behaviors to make the component your own.

Installation

To get started, you can install the package using npm:

npm install react-multi-date-picker-calendar

Full Documentation

Basic Usage

Here’s a simple example that demonstrates how you can integrate the calendar into your app:

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

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

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

export default App;

Multi-Date Selection Example

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

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

  return <Calendar multiSelect onChange={handleDateChange} />;
};

export default App;

Range Selection Example

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

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

  return <Calendar selectsRange onChange={handleDateChange} />;
};

export default App;

Customization

The react-multi-date-picker-calendar allows you to easily customize its look and feel. You can pass custom icons, enable/disable specific dates, or even show appointments with their statuses.

Customizing Appointment Status

import React from "react";
import Calendar, {
  logSelectedDatesAppointments,
  Appointment
} from "react-multi-date-picker-calendar";

const App = () => {
  const appointments: Appointment[] = [
    { date: new Date('2023-08-10'), status: 'Completed' },
    { date: new Date('2023-08-11'), status: 'Missed' }
  ];

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

  return (
    <Calendar
      onChange={handleDateChange}
      appointments={appointments}
    />
  );
};

export default App;

Styling

You can style the calendar using the provided CSS classes or completely customize it with your own styles. Here’s a small example of how you can customize its appearance:

.calendar-container {
  background-color: #fff;
  border: 1px solid #e0e0e0;
}

.calendar-day.selected {
  background-color: #007bff;
  color: #fff;
}

Accessibility

A key focus of the react-multi-date-picker-calendar is accessibility. With built-in support for keyboard navigation and ARIA attributes, this component ensures that users with disabilities can interact with the calendar seamlessly.

Conclusion

I’m excited to share this new React component with the developer community, and I hope it helps streamline the date-picking process in your applications. You can install the package, and start integrating it into your projects today!