react-beautiful-calendar

1.2.1 • Public • Published

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

Package Sidebar

Install

npm i react-beautiful-calendar

Weekly Downloads

4

Version

1.2.1

License

MIT

Unpacked Size

50.4 kB

Total Files

4

Last publish

Collaborators

  • army-daxter