React-beautiful-calendar NPM

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])`