npm i -S recal

<link rel="stylesheet" type="text/css" href="https://unpkg.com/recal/lib/index.css" />
<script src="https://unpkg.com/recal"></script>

// You can use React or Preact here—just make sure you have the proper aliasing.
import React from 'react';

// Calendar components.
import { DatePicker, DateRangePicker } from 'recal';

// Stylesheet for calendar.
import 'recal/lib/index.css';

class MyDatePicker extends React.Component {
  state = {};

  onDateSelected = (selectedDate) => {
    this.setState({
      selectedDate
    });
  }

  render() {
    return (
      <DatePicker
        date={ this.state.selectedDate }
        onDateSelected={ this.onDateSelected } />
    );
  }
}

class MyDateRangePicker extends React.Component {
  state = {};

  onStartDateSelected = (startDate) => {
    this.setState({
      startDate
    });
  }
  onEndDateSelected = (endDate) => {
    this.setState({
      endDate
    });
  }

  render() {
    return (
      <DateRangePicker
        startDate={ this.state.startDate }
        endDate={ this.state.endDate }
        onStartDateSelected={ this.onStartDateSelected }
        onEndDateSelected={ this.onEndDateSelected } />
    );
  }
}

// Used by DatePicker
selectedDate: PropTypes.instanceOf(Date),
onDateSelected: PropTypes.func,

// Used by DateRangePicker
startDate: PropTypes.instanceOf(Date),
endDate: PropTypes.instanceOf(Date),
onStartDateSelected: PropTypes.func,
onEndDateSelected: PropTypes.func,

// Used by either (optional)
onDateHovered: PropTypes.func,
onDateFocused: PropTypes.func,
isDateHighlighted: PropTypes.func,
isDateEnabled: PropTypes.func,
locale: PropTypes.string,
disabled: PropTypes.bool