react-beautiful-calendar

A beautiful react calendar component library for your beautiful react apps.

🏡 Online Demo

• Visit Npm Package Homepage.
• Visit Project Homepage to see live demo.

⚡ Specifications

• Pick days, months, years
• Choose size as per your convenience and mood [COMING SOON!]
• No third-party module needed, no moment.js

🚀 Getting Started

• Compatibility

  • This package uses react: "^17.0.2", react-dom: "^17.0.2" as peer dependencies & prop-types: ^15.7.2 as a dependency.

• Installation

  • Install it via npm, by using

      npm install react-beautiful-calendar

  • or via yarn, by hitting

      yarn add react-beautiful-calendar

• Importing

  • Import it in your project, by using

      import Calendar from "react-beautiful-calendar"

• Using

  • Use it by adding,

  <Calendar onDateChange={your_handler_function} />

📑 User Guide

Calendar

• Displays a complete, interactive calendar widget.

Code Snippet Example

import Calendar from "react-beautiful-calendar";

const App = () => {
  const dateChangeHandler = ([date, month, year]) => {
    // ...use the values here
  };

  // ...other code

  return <Calendar onDateChange={dateChangeHandler} />;
};

Props

| Prop name | Description | Default value | Example | | :------------: | :---------------------------------------------------------------------------------------------------------------------: | :-----------: | :--------------------------------------: | | variant | It denotes the type of calendar widgets available | default | variant="default" | | font | Sets font style for the widget | DM Sans | font="DM Sans" | | onDateChange | Handler function, triggers when a date is selected, it returns you an array containing 3 values as date, month and year | - | dateChangeHandler([date, month, year]) |

🐞 Issues

• Issues: Issues

📤 Useful Links

• Icons: Fontawesome

📜 License

• MIT License

🏆 Author