I have built a calendar using dayjs. To create a square calendar I have included the days starting from Sunday from the previous month and included the days finishing on Sunday from the following month.

For example, here is the code I am running to get the remaining days up until Sunday.

{range(6 - weekDayOfLast).map((dayIdx) => ())}

weekDayOfLast meaning the day from 0-6 the last day of the month falls on.

I need to apply some conditional CSS to all corners of the calendar, but in order to do this I have to calculate the first day of the calendar, the last day of the first week, the first day of the last week and the last day of the month.

I am struggling with how to figure this out.

The only one I have managed so far is the last day of the month:

dayIdx + 1 === 6 - weekDayOfLast ? "rounded-br-lg" : ""

I calculator the middle of the calendar by mapping over the days in the month, like this:

 {range(daysInMonth).map((dayIdx) => ()))}

And the first days of the calendar by calculating the day the first day of the month falls on, for example:

 {range(daysInMonth).map((dayIdx) => ()}