calendar = {
const context = DOM.context2d(canvasWidth, canvasHeight);
context.font = "300 10px 'Roboto Condensed'";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "white";
context.fillRect(0, 0, canvasWidth, canvasHeight);
context.lineWidth = 2;
context.strokeStyle = "black";
context.strokeRect(margin.left, margin.top, calendarWidth, calendarHeight);
context.fillStyle = "black";
context.lineWidth = 2;
months.forEach((month) => {
const x = xPosition(month.start) - cellWidth;
const y = margin.top;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x, y + calendarHeight);
context.stroke();
const x2 = xPosition(month.end) + cellWidth;
context.fillText(month.name, (x + x2) / 2, margin.top - cellHeight / 2);
});
const yearLabelPosition = xPosition(middleOfYear) + cellWidth;
context.lineWidth = 2;
context.beginPath();
context.moveTo(yearLabelPosition, margin.top);
context.lineTo(yearLabelPosition, margin.top + calendarHeight);
context.stroke();
years.forEach((year) => {
const yearLabel = year[0].getFullYear();
const y = yPosition(yearLabel);
context.lineWidth = yearLabel % 10 === 1 ? 2 : 1;
context.beginPath();
context.moveTo(margin.left, y - cellHeight / 2);
context.lineTo(margin.left + calendarWidth, y - cellHeight / 2);
context.stroke();
context.fillText(
yearLabel,
yearLabelPosition + yearCellWidth / 2 - 0.5,
y + 1.5
);
year.forEach((day) => {
const x = xPosition(day);
if (useDots && day.getDay() === 0) {
context.beginPath();
context.arc(x, y, 2, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
} else {
context.fillStyle = "black";
context.fillText(day.getDate(), x - 0.5, y + 1.5);
}
});
});
return html`<div style="max-width: ${width}px; max-height: ${screen.height}px; overflow: scroll">${context.canvas}</div>`;
}