DEV Community

Cover image for React Calendar & Date Picker
Sivasubramaniyam
Sivasubramaniyam

Posted on

2 2 2 2 2

React Calendar & Date Picker

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

Total Downloads

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.

Calendar Demo

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay