react-beautiful-calendar

A beautiful react calendar component library for your beautiful react apps

Usage no npm install needed!

<script type="module">
  import reactBeautifulCalendar from 'https://cdn.skypack.dev/react-beautiful-calendar';
</script>

README

made-with-react MIT-license

react-beautiful-calendar

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

base-calendar-image

🏡 Online 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

📤 Useful Links

📜 License

  • MIT License

🏆 Author

Mehul Singh Teya
mehulsinghteya@gmail.com
https://daxter-army.github.io