Month Calendar Events About Block for React

The events are RULES at the top of the file: a title, a time, a place, a weekday (0 is Monday), a mark and how its days are picked: every, the nth one (nth: 3 is the third) or the last. The sample month is DAYS long and starts on the weekday given by LEAD. The marked days and the agenda are both worked out from the rules.

The events repeat every month, so the table shows the pattern, not one month. It is a sample month; the weekdays slide from one month to the next while the rules don't. If you need real dates, pass the first weekday and length of the month you want.

The days are a real table with a caption and column headers for the weekdays. A day with an event reads its number and then the event's name, for example "2, Demo day". The legend and the agenda are lists, and the agenda is ordered by day. The shapes are decoration and hidden from assistive technology; the words say it all.

Colour alone isn't enough to tell four events apart, and the block keeps the page's primary colour for its one action. The four shapes (a filled cell, a dot, a diamond and a ring) are different in outline, and the legend and the agenda repeat them next to the event's name.

The table keeps all seven columns at 320 pixels with smaller cells, then the legend, then the agenda under a rule from rail to rail, and the Subscribe link at the end. In a right-to-left layout the table reads from the right.

The header, the table and the agenda fade up once on load, with CSS transitions. The Subscribe button's light is its own ::before. With reduced motion the entrance is off. The block has no state, so it can render on the server.