React Calendar with Date Picker (Open-Source)

Overview

• Use a date picker to select the day/week displayed by the React Calendar component

• You can bind the date picker to a custom element that displays the current date. This element will be updated automatically on every change.

• Detect date changes and change the Calendar view using onTimeRangeSelected event handler.

• You can replace the “Change date” button with an icon or any other element.

• The React project uses the Calendar and DatePicker components from DayPilot Lite - an open-source calendar/scheduling library.

License

Apache License 2.0

How to Display a Toolbar with Selected Date above the Calendar

The Calendar component in the attached React project uses the following JSX to display a weekly calendar and a toolbar with the selected date:

render() {
  return (
    <div>
      <div className={"toolbar"}>
        <span ref={this.dateRef}></span> <button onClick={ev => this.changeDate()}>Change date</button>
      </div>
      <DayPilotCalendar
        {...this.state}
        ref={this.calendarRef}
      />
    </div>
  );
}

The selected date is displayed using a <span> element:

<span ref={this.dateRef}></span>

The <span> element can be empty. The linked date picker will render the selected date automatically during initialization.

Next to the <span> with the date, there is a “Change date” button lets users change the selected date. The <button> fires a changeDate() method on click:

<button onClick={ev => this.changeDate()}>Change date</button>

The next step is to activate the date picker. In componentDidMount() handler, create a new instance of DayPilot.DatePicker:

componentDidMount() {

  this.datePicker = new DayPilot.DatePicker({
    target: this.dateRef.current,
    pattern: 'MMMM d, yyyy',
    date: "2022-09-07",
    onTimeRangeSelected: (args) => {
      this.setState({
        startDate: args.start
      })
    }
  });

}

Note the key configuration properties:

1. The target property specifies the target element that displays the date. It accepts an element id or a DOM component. This

2. The pattern property specifies the date format (please see DayPilot.Date.toString() documentation for pattern elements). By default, the date picker uses "en-us" locale to format the date - you can set a different culture using locale property if needed.

3. The date property sets the initial date. If you don’t specify it, the date picker will use today.

4. The onTimeRangeSelected handler is fired when the selected date changes. We use the event handler to change the startDate property of the React state. This updates the Calendar component automatically.

The changeDate() method activates the date picker:

changeDate() {
  this.datePicker.show();
}

As soon as a user selects a new date, the date picker updates the target <span> in the toolbar and also load the corresponding week in the React Calendar component.

Customize the Button

You can replace the button with a calendar icon or any other element. You only need to make sure that it activates the the date picker using onClick event handler.

You can also use the target element itself as the date picker trigger. Example:

render() {
  return (
    <div>
      <div className={"toolbar"}>
        <button ref={this.dateRef} onClick={ev => this.changeDate()}></button>
      </div>
      <DayPilotCalendar
        {...this.state}
        ref={this.calendarRef}
      />
    </div>
  );
}