I'm facing an issue with my calendar code where it starts rendering on a Wednesday instead of a Monday. I want to adjust the layout so that it always begins on a Monday by adding some empty boxes at the start of the calendar.
Essentially, I need to shift the Mon and Tue columns to the beginning and push the other days accordingly.
I attempted to use an if statement to check the starting day of the month and add empty divs, but it didn't achieve the desired effect (the calendar still starts on a Wednesday).
I'm unsure if my logic is flawed.
This is the 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>
))}
Here's the link to the screenshot for better understanding:
I've also tried this code snippet to insert empty boxes at the beginning, but it just shifts the entire calendar:
{Array.from({ length: moment().startOf('month').day() }).map((_, index) => (
<div key={`empty-${index}`} className="w-[12vw] h-[14vh] border-[1px] border-transparent"></div>
))}
The calendar is pushed to the right with additional empty boxes.
Link to the code on GitHub: https://gist.github.com/imdarkk/b7e78f87fca82d8ec457e97537e515f9