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