在React Calendar上显示多个日期

Question

I want to display multiple dates using react calendar ( https://www.npmjs.com/package/react-calendar ). The issue lies in that the calendar selects all dates in between instead of each date individually.

For example, I have two dates Jun 4, 2019, and Jun 9, 2019. The calendar should only select the 4th and the 9th but it's also selecting the 5th, 6th, 7th, and 8th. I want to select only Jun 4 and Jun 9. I attached an example of what I want to implement using react-dates DayPickerSingleDateController. Is it possible to implement the same thing but using react-calendar?

<Calendar
  value={[new Date(2019, 5, 4), new Date(2019, 5, 9)]}
/>

First Image

I expect the calendar to only show these 2 dates and not the days in between.

Second Image

Answer 1

This will help:

import React, { Component } from 'react';
import Calendar from 'react-calendar';

class MyApp extends Component {
  state = {
    date: new Date(),
  }

  onChange = date => this.setState({ date })

  render() {
    return (
      <div>
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
          selectRange={true}
        />
      </div>
    );
  }
}

selectRange will help you to achieve your goal. Here is the source.