I have this code that renders a calendar (screenshot either attached or in the next message). Last month we started on a monday so it was fine but this month (may), it starts on a Wednesday. So, the calendar starts rendering on a Wednesday. I want to add a couple of empty boxes at the start so it always starts on a monday.

Basically the Mon, Tue columns move to the start and the others get pushed.

I tried adding an if statement that checks if the current month starts with anything else other than Monday and if it does add some empty divs, but it just pushes it to the right (same issue, starts with a wednesday but gets pushed).

Not sure if my logic was wrong.

Current Calendar.tsx

{(calSelection === "month" && currentCal && Object.keys(currentCal).length > 0) && 
Object.keys(currentCal).map(day => (
  <div key={day} className="w-[12vw] flex flex-col items-center">
    <p className="font-semibold w-[12vw]">{day}</p>
    <div>
      {currentCal[day] && currentCal[day].length > 0 && currentCal[day].map(date => (
      <p key={date.fullDate} className="w-[12vw] h-[14vh] border-[1px] border-[#9297B0]">{date.fullDate.split("T")[0].split("-")[2]}</p>
      ))}
    </div>
  </div>
))}

The screenshot attached is so you can see what I mean. I need Monday to go to the start and the other items get pushed down and then I add a couple of empty boxes until the correct day

This is the code I had created for it to push it but as I said the whole calendar gets pushed

{Array.from({ length: moment().startOf('month').day() }).map((_, index) => (
  <div key={`empty-${index}`} className="w-[12vw] h-[14vh] border-[1px] border-transparent"></div>
))}

It just pushes the whole calendar to the right and adds a couple of boxes