Calendar React JS

Question

I have a homework to make a calendar component on React It has to show days like Windows calendar, start from Sunday even if it's an other month and ends with Saturday

And HTML has to be made like table (tr (weeks)...td (days)...) it has to be:

one week:

    <tr>
    <td>day1</td>
    <td>day2</td>
    <td>day3</td>
    <td>day4</td>
    <td>day5</td>
    <td>day6</td>
    <td>day7</td>
    </tr>

• then next week the same

I have prepared an array with dates, array starts from Sunday and ends with Saturday I was trying map() it and put jsx tags with dates inside. That works But when I'm trying to put inside week tags (tr) I can't do it because I'm trying to put inside

</tr><tr> 

• closing one week and opening next week (I can't add one closing jsx tag)

I'm stuck

Could you give me some advises?

Answer 1

I give you an example for your reference:

import React from 'react';
export default function Calendar() {
  let dateNum = 1;
  let firstDay = new Date('2023-02-10'),
    firstWeekDay;
  let i;
  let lastDate;
  let month = [];
  let week = [];
  firstDay.setDate(1);
  lastDate = new Date(firstDay.getTime());
  lastDate.setMonth(lastDate.getMonth() + 1); // the first day of the next month
  lastDate = new Date(lastDate.getTime() - 86400000); //the first day of the next month minus 1 day
  firstWeekDay = firstDay.getDay();

  for (i = 0; i < firstWeekDay; i++) {
    week.push('');
  }
  for (i = firstWeekDay; i < 7; i++) {
    week.push(dateNum++);
  }
  month.push(week);
  console.log(dateNum <= lastDate.getDate());
  
  while (dateNum <= lastDate.getDate()){
    week=[];
    for (i=0; i <7 ;i++){
      if (dateNum <= lastDate.getDate()) {
        week.push(dateNum++);
      } else {
        week.push("");
      }
    }
    month.push(week);
  }
  return (
    <table>
      <thead>
        <tr>
          <td>Sun</td>
          <td>Mon</td>
          <td>Tue</td>
          <td>Wed</td>
          <td>Thu</td>
          <td>Fri</td>
          <td>Sat</td>
        </tr>
      </thead>
      {month.map((week) => (
        <tr>
          {week.map((day) => (
            <td>{day}</td>
          ))}
        </tr>
      ))}
    </table>
  );
}