Simple Date Range Calendar

Simple Date Range Calendar is a powerful and customizable React component designed to make date range selection simple and intuitive. It supports both light and dark themes, providing a seamless integration into any application.

Features

• Date Range Selection: Easily select a range of dates.
• Light and Dark Mode: Seamless theme integration with support for light and dark modes.
• Animations: Smooth transitions and animations for an enhanced user experience.

Installation

To install the library, use the following command:

npm install simple-date-range-calendar

or with Yarn:

yarn add simple-date-range-calendar

Usage

Here is an example of how to use the simple-date-range-calendar component with controlled state management for date selection and theme:

import React, { useState } from "react";
import { Calendar } from "simple-date-range-calendar";
import { startOfMonth, addMonths, subMonths } from "date-fns";

const App = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [darkMode, setDarkMode] = useState(false);

  const handleDateRangeChange = (start, end) => {
    setStartDate(start);
    setEndDate(end);
  };

  const handleThemeChange = () => {
    setDarkMode(!darkMode);
  };

  return (
    <div
      style={{
        minHeight: "100vh",
        backgroundColor: darkMode ? "#333" : "#fff",
      }}
    >
      <button onClick={handleThemeChange}>
        Switch to {darkMode ? "Light" : "Dark"} Mode
      </button>
      <Calendar
        theme={darkMode ? "dark" : "light"}
        startDate={startDate}
        endDate={endDate}
        onDateRangeChange={handleDateRangeChange}
      />
    </div>
  );
};

export default App;

Props

• theme: Specifies the theme for the calendar ('dark' or 'light').
• startDate: Optional initial start date for the date range selection.
• endDate: Optional initial end date for the date range selection.
• onDateRangeChange: Callback function called when the date range selection changes.

Technologies Used

• React: A JavaScript library for building user interfaces.
• date-fns: A modern JavaScript date utility library.
• Material-UI: A popular React UI framework for building responsive, accessible, and customizable user interfaces.

Theming

The simple-date-range-calendar component supports both light and dark themes. You can easily switch between themes by passing the appropriate theme prop:

<Calendar theme="light" /> // Light mode
<Calendar theme="dark" />  // Dark mode

Author

Alisson Fabiano

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request with your suggestions.

Support

For any questions or support, please open an issue on the GitHub repository.

Repository

Check out the GitHub repository for more information, examples, and source code.