Show custom events on specific days in react-datepicker

Question

i am using react-datepicker in my project, i have gone through the documentation but not found the requirements i needed. They are listed below

1. Show custom details on specific days of a month (For eg on 21st june 2021, i want to show "hello" below the date )
2. Show 2 (present and next) calendar months together (by default it shows only 1 month)
3. Custom buttons which on clicking move to the next date (as in if the current date is today, after clicking on "next" the selected date should change and be the next date)

Are the functioanlites not implemented or am i missing something. Hope somebody helps me out. Thanks !

Answer 1

For #1 you can do this Custom Day

() => {
  const [startDate, setStartDate] = useState(new Date());
  const renderDayContents = (day, date) => {
    return (<>
             <span>{day}</span> 
             {day === 21 && <p>hello</p>}
           </>);
  };
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      renderDayContents={renderDayContents} // you can use this prop
    />
  );
};

For #2 where you want to show the current and the next month. you can do this

<DatePicker
  selected={startDate}
  onChange={date => setStartDate(date)}
  monthsShown={2} // add this prop
/>

For #3 you can add children Children

() => {
  const [startDate, setStartDate] = useState(new Date());
  
   const setNextDate = () => {
    const currentDate = new Date(startDate);
    const nextDay = new Date(currentDate.setDate(currentDate.getDate() + 1))
    setStartDate(nextDay)
  }
  
  return (
    <DatePicker selected={startDate} onChange={date => setStartDate(date)}> 
  <div> 
   <button> today </button> 
    <button onClick={setNextDate}> Next </button> 
  </div>
    </DatePicker>
  );
};