nice-app-web/src/entities/settlement/ui/calendar-grid.tsx

import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SettlementDays, SettlementStatus } from '../model/types';
import { useEffect, useState } from 'react';

export interface CalendarGridProps {
  yearMonth: string;
  scheduledDateList: Array<number>;
  completedDateList: Array<number>;
};

export const CalendarGrid = ({
  yearMonth,
  scheduledDateList,
  completedDateList
}: CalendarGridProps) => {
  const { t } = useTranslation();

  const makeCalendarDate = () => {
    let startDay = moment(yearMonth).startOf('month').day();
    let lastDate = moment(yearMonth).endOf('month').date();
    let lastYearMonth = moment(yearMonth).subtract(1, 'month').format('YYYY-MM');
    let lastYearMonthLastDate = moment(lastYearMonth).endOf('month').date();

    let lastOthersCnt = (7 - ((startDay + lastDate) % 7));

    let rs = [];
    for(let i=0;i<startDay;i++){
      rs.push(
        <div 
          key={ `key-day-item=other-prev-${i}` }
          className="day other"
        >{ (lastYearMonthLastDate - startDay + i + 1) }</div>
      );
    }
    for(let i=1;i<=lastDate;i++){
      if(scheduledDateList?.includes(i)){
        rs.push(
          <div 
            key={ `key-day-item-${i}` }
            className="day scheduled"
          >{ i }</div>
        );
      }
      else if(completedDateList?.includes(i)){
        rs.push(
          <div 
            key={ `key-day-item-${i}` }
            className="day complete"
          >{ i }</div>
        );
      }
      else{
        rs.push(
          <div 
            key={ `key-day-item-${i}` }
            className="day"
          >{ i }</div>
        );
      }
    }
    for(let i=0;i<lastOthersCnt;i++){
      rs.push(
        <div 
          key={ `key-day-item-other-next-${i}` }
          className="day other"
        >{ (i + 1) }</div>
      );
    }
    
    return rs;
  }

  return (
    <>
      <div className="calendar-grid">
        <div className="weekdays">
          <div className="weekday sun">{t('common.weekdays.sun')}</div>
          <div className="weekday">{t('common.weekdays.mon')}</div>
          <div className="weekday">{t('common.weekdays.tue')}</div>
          <div className="weekday">{t('common.weekdays.wed')}</div>
          <div className="weekday">{t('common.weekdays.thu')}</div>
          <div className="weekday">{t('common.weekdays.fri')}</div>
          <div className="weekday sat">{t('common.weekdays.sat')}</div>
        </div>
        <div className="days">
        {  makeCalendarDate() }
        </div>
      </div>
    </>
  )
};