Simple DatePicker Calendar for React

Overview

Simple Datepicker is a date picker component for React. Select dates easily and customize the color scheme to fit your design needs. It will continually evolving to offer a variety of designs.

Features

• ☝️ Select any date.
• 🔢 Input a date manually.
• 👀 Browse previous or future months in current month.
• 🚚 Navigate quickly to a specific date.
• ☀️ Distinguish today's date from the selected date.

Installation

To install the Simple DatePicker Calendar in your React project, use the following command:

npm install react-simple-datepicker-calendar

Usage

import React from 'react';
import { Calendar } from 'react-simple-datepicker-calendar';

function App() {
  return (
    <Calendar
      calendarBackgroundColor="#252525"
      displayBackgroundColor="#252525"
      displayFontColor="#c5c5c5"
      dayFontColor="#899797"
      currentDateFontColor="#d5d5d5"
      prevNextDateFontColor="#899797"
    />
  );
}

Props

Prop Name	Type	Description	Default
calendarBackgroundColor	string	Background color of the entire calendar component.	'#252525'
displayBackgroundColor	string	Background color for the display area (e.g., month and year display).	'#252525'
displayFontColor	string	Font color for the display area, such as the selected date and year-month header.	'#c5c5c5'
dayFontColor	string	Font color for the day names (e.g., Sun, Mon) in the calendar.	'#899797'
currentDateFontColor	string	Font color for the current date in the calendar.	'#d5d5d5'
prevNextDateFontColor	string	Font color for the dates of the previous and next month.	'#899797'

Planned Updates

Enhance Customization: Further customization options are in development. You'll soon be able to tailor the calendar to your preferences, including date format, language, start day, and more.

License

Simple DatePicker Calendar is open-source, licensed under the MIT License.

Contact

For inquiries or suggestions, feel free to submit Github Issue. Your feedback is invaluable. Thank you for using Simple DatePicker!