<div class="calendarMonth">
	<template id="calendarDayTemplate">
		<a></a>
	</template>
</div>

body
{
	margin: 1em;
	font: 1.5em/1.5 Fira Sans, sans-serif;
}

.calendarMonth a
{
	color: currentcolor;
	text-decoration: none;
	text-align: center;
}

.calendarMonth
{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1em;
	width: max-content;
}

.calendarMonth > :first-of-type
{
	grid-column: var(--firstWeekday);
}

const year = 2020;
const month = 0; // January 🤯

const firstOfMonth = new Date(Date.UTC(year, month, 1));
// const firstOfNextMonth = new Date(Date.UTC(year, month + 1, 1));
// const monthLength = (firstOfNextMonth.getTime() - firstOfMonth.getTime()) / 86400000;
const monthLength = new Date(Date.UTC(year, month + 1, 0)).getUTCDate();

const calendarMonthElement = document.querySelector('.calendarMonth');
const template = document.querySelector('#calendarDayTemplate');
const fragment = new DocumentFragment();

for (let day = 1; day <= monthLength; day++)
{
	const clone = template.content.cloneNode(true);
	const linkElement = clone.querySelector('a');
	linkElement.href = `?day=${day}`;
	linkElement.textContent = day;
	fragment.appendChild(clone);
}

calendarMonthElement.appendChild(fragment);

calendarMonthElement.style.setProperty('--firstWeekday', firstOfMonth.getUTCDay() || 7);