Month Calendar Blog Block for React

Change the constants at the top: LEAD (how many blank cells come before the 1st, with Monday first), DAYS, WEEKS, MONTH and the ISO prefix in FIRST_ISO, then give the posts dates in that month. The weekday of the 1st is fixed in the file rather than computed, so the grid is the same on the server and in every browser.

One square for each post that ran that day, up to three. They are redundant with the text: every marked day also says "2 posts" to a screen reader, and the panel lists the posts. The chosen day turns into a solid cell.

The grid has one tab stop, the chosen day. Arrow keys move the choice and the focus by a day or a week and stop at the month's ends; Tab then leaves the grid for the panel's links. Each day is a button with aria-pressed, so a screen reader hears its date, how many posts and whether it is chosen. The table keeps dir="ltr" in a right-to-left page, so the arrow keys always follow the picture.

It reserves the room of two posts, the most any day has here, so choosing an empty day or a busy one never moves the page below. Each row has a fixed height, so a long title wraps inside it.

No. A calendar is about when, so the panel shows text rows: category, title, byline. For a version with cards, use the cards blocks.