react-trash-calendar/src/components/calendar/Calendar.tsx

import { useState } from 'react';
import { Calendar } from '../../lib/calendar';
import './Calendar.scss';

export const AppCalendar = ({
  date,
  setDate,
}: {
  date: Date;
  setDate: (date: Date) => void;
}) => {
  const [viewDate, setViewDate] = useState(new Date(date));
  const calendar = new Calendar(viewDate);

  calendar.generateMonth();

  return (
    <div className="calendar">
      <div className="calendar__header">
        <button
          className="calendar__button calendar__button--previous"
          onClick={() => {
            calendar.previousMonth();
            setViewDate(new Date(calendar.currentDate));
          }}
        >
          &lt;
        </button>
        <div className="calendar__month">
          {calendar.monthName} {calendar.year}
        </div>
        <button
          className="calendar__button calendar__button--next"
          onClick={() => {
            calendar.nextMonth();
            setViewDate(new Date(calendar.currentDate));
          }}
        >
          &gt;
        </button>
      </div>

      <div className="calendar__inner">
        {calendar.dayNames.map((day, index) => (
          <span className="calendar__weekday" key={'dn' + index}>
            {day}
          </span>
        ))}

        {calendar.weeks?.map((week, index) =>
          week.map((dateBtn, dindex) => (
            <button
              key={'d' + dindex + index}
              onClick={() => setDate(dateBtn!)}
              className={
                'calendar__day' +
                (calendar.isOutOfMonth(dateBtn!)
                  ? ' calendar__day--outside'
                  : '') +
                (calendar.isToday(dateBtn!) ? ' calendar__day--today' : '') +
                (calendar.dateEquals(dateBtn!, date)
                  ? ' calendar__day--selected'
                  : '')
              }
            >
              {dateBtn?.getDate()}
            </button>
          ))
        )}
      </div>
    </div>
  );
};