No Events Empty State Block for React

The event goes into the page's state, under the calendar chosen in the rail: the day gets a dot, the agenda gets a row, the calendar's count in the rail goes up and the circle in the agenda takes the date of the next event. Nothing is saved or sent: reload and the calendar is empty again, and Start over empties it without a reload. To wire it for real, send the event to your calendar API where the code says so and add the row from the response.

The page's "today" is a typed day, Friday 9 October 2026, not the clock. Days before it are marked closed (a click says so in the status line) and today is outlined. In your app, compute today after mount and close the days before it the same way.

No: it is a fixed height at every size, and only its regions scroll. The agenda always has room for its drawn rows, and the month, the form and the agenda stack in one scrolling page on a phone, with the top bar and its button always in view. The demo keeps eight events.

It is a real table with a button for every day. One day is the tab stop (the picked day, or today), the arrow keys move between days within the month, and Enter or Space picks one. Each day is named with its date and its event count ("Tuesday 20 October, no events"), and the picked day says it is pressed. The grid is drawn left to right in any language, because it is a calendar; the table's caption and the agenda carry the same information as text.

Each is a link that shows one calendar: the month's dots, the agenda and the top bar's heading follow it, and new events go into it. The rail follows the page's direction, collapses to icons with tooltips, and becomes a sheet on a phone that closes when you choose.

The status line says what is missing and focus goes there: with no day, to the month grid's tab stop; with no title, to the title field. Nothing is added until both are there.