How to customize react-calendar to show only one week at a time?

Question

How can I show only the current week of the month? I have looked through react-calendar docs, react-multi-date-picker but couldn't find a way.

Below is the output I am trying to achieve.

Are there any libraries that gives this feature or is there any tweak to show the current week in any calendar library?

Answer 1

Yes, there are I personally used react-day-picker and date-fns to achieve this.

here's how.

Create a custom row component for the primary DayPicker component and then wire it up to the component using the components prop

import {
  endOfWeek,
  isWithinInterval,
  startOfWeek,
} from "date-fns";

import {
  DayPicker,
  Row,
  RowProps,
} from "react-day-picker";

import "react-day-picker/dist/style.css";


// Basically this only returns a single Row with the days of the current week
function CurrentWeekRow(props: RowProps) {
  const isDateInCurrentWeek = (dateToCheck: Date) => {
    const today = new Date();
    const start = startOfWeek(today);
    const end = endOfWeek(today);
    return isWithinInterval(dateToCheck, { start, end });
  };
  const isNotCurrentWeek = props.dates.every((date) => !isDateInCurrentWeek(date));
  if (isNotCurrentWeek) return <></>;
  return <Row {...props} />;
}

const Dashboard = () => {
  

  return (
    <>
      <div>
        <div>
          <DayPicker
            components={{ Row: CurrentWeekRow }}
            showOutsideDays
            mode="single"
          />
        </div>
      </div>
    </>
  );
};