Calendar in React - 2 week layout

Question

I want implement a 2 week calendar in my React project.

I have tried to look at multiple libraries, but I can't find one that fits the layout I wanna recreate.

The show more dates should just show the rest of the dates

Does anybody know a component I can use, and maybe how to do it code wise?

Here is the layout

I've tried react-calendar, react-daypicker.

But I can't seem to recreate it

Answer 1

I created a simple react component that might be useful for you. it has a basic next and previous button that moves 14 days forward and backward.

import React, { useState } from 'react';

const App = () => {
  const [startDate, setStartDate] = useState(new Date());
  const nextTwoWeeks = () => {
    const newStartDate = new Date(startDate);
    newStartDate.setDate(newStartDate.getDate() + 14); 
    setStartDate(newStartDate);
  };
  const prevTwoWeeks = () => {
    const newStartDate = new Date(startDate);
    newStartDate.setDate(newStartDate.getDate() - 14); 
    setStartDate(newStartDate);
  };
  const renderCalendarDays = () => {
    const days = [];
    const currentDate = new Date(startDate);
    for (let i = 0; i < 14; i++) {
      days.push(
        <div key={i}>
          {currentDate.toDateString()}
        </div>
      );
      currentDate.setDate(currentDate.getDate() + 1);
    }
    return days;
  };
  return (
    <div >
      <div >
        <button onClick={prevTwoWeeks}>Previous</button>
        <h2>{`${startDate.toDateString()} - ${new Date(
          startDate.getTime() + 13 * 24 * 60 * 60 * 1000
        ).toDateString()}`}</h2>
        <button onClick={nextTwoWeeks}>Next</button>
      </div>
      <div>{renderCalendarDays()}</div>
    </div>
  );
};

export default App;