React-lite-calendar NPM

react-lite-calendar

React calendar component:

Getting started

Installation

npm install react-lite-calendar

Installation

Usage:

import React, { Component } from "react";
import LiteCalendar from "react-lite-calendar";

class App extends Component {
  state = {
    date: new Date()
  };

  handleChange = value => this.setState({ date: value });
  handleOpened = () => console.log("opened");
  handleClosed = () => console.log("closed");

  render() {
    return (
      <div>
        <LiteCalendar
          onOpened={this.handleOpened}
          onClosed={this.handleClosed}
          onChange={this.handleChange}
          value={this.state.date}
        />
      </div>
    );
  }
}

export default App;

User guide

Props

Prop name	Description	Example values
start	The beginning of a period that shall be selectable by default when no value is given. Defaults to `new Date(1987, 9, 29)`.	`new Date(2017, 5, 1)`
end	The ending of a period that shall be selectable by default when no value is given. Defaults to `new Date(2020, 9, 29)`.	`new Date(2020, 5, 1)`
onChange	Function called when the user clicks an item (day on month view, month on year view and so on) on the most detailed view available.	`(value) => console.log('New date is: ', value)`
onOpened	Function called when calendar is opened.	`(value) => console.log('onOpened')`
onClosed	Function called when calendar is closed.	`(value) => console.log('onClosed')`
value	Defines the value of the calendar. Defaults to `new Date()`.	Date: `new Date()`
format	dayjs date format string for default trigger button. Defaults to `"dddd, MMMM D, YYYY"`	`"dddd, MMMM D, YYYY"`

License

The MIT License.

Author

react-component

classnames dayjs prop-types react-transition-group uuid

@infinitebrahmanuniverse/nolb-react-li @everything-registry/sub-chunk-2565

0.0.1

5 years ago