React Date Picker

DayPilot Editions

DayPilot Lite

The Navigator date picker component is included in @daypilot/daypilot-lite-react package.

DayPilot Pro

The Navigator is included in DayPilot Pro for JavaScript.

Tutorials

• React Calendar with Day/Week/Month Views (Open-Source)
  How to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.

• React Weekly Calendar Tutorial (Open-Source)
  React application that displays a weekly event calendar using the React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.

• React Calendar with Date Picker (Open-Source)
  How to use a popup date picker to select a date displayed by the React Calendar component.

Example

import React, {Component} from 'react';
import {DayPilot, DayPilotNavigator} from "@daypilot/daypilot-lite-react";

class DatePicker extends Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate: null
    };
  }

  render() {
    return (
      <DayPilotNavigator
        selectMode={"Week"}
        showMonths={3}
        skipMonths={3}
        onTimeRangeSelected={ args => {
          this.setState({
            startDate: args.day
          });
        }}
      />
    );
  }
}

export default Calendar;