# Calendars
A month of days with what happens on each, and a strip of days across the things that can be busy on them - equipment, rooms, boats.
## A package of the release
Calendars are linked apart, on the screens that show them, beside the two files; they need no script.
```html
```
## A month
`table class="calendar"`: a weekday header, the week starting on the day the page chooses, then six weeks of days. A day holds its `time class="calendar-day"`, its events - `calendar-event`, a [dot](dot.md) of a tone and the words, cut to the width, the whole in its `title` - and `calendar-more` for the rest. `data-outside` quiets a day of another month, `data-weekend` tints a weekend, `aria-current="date"` marks today. In a region narrower than 576 px the events fold to their dots. The heading, the previous and next months and the switch of views are the page's links.
```html
```
## Days in a state
A day's `data-state` tints it: `worked`, `open`, `pending`, `absent` and `off` - a time sheet, the days a person can still book. `calendar-legend`, a list of items with the same `data-state`, says what each tint means, and every day says its state in words too - in its button's name, or in a `visually-hidden` word when it is no button; in forced colors the states draw as a line, a dashed and a dotted one. `button.calendar-day` makes the day's number a button the page opens or picks the day with - its `aria-label` the whole date and the state, `aria-pressed` on the day picked.
```html
Alex Sample, November 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Worked
Waiting for approval
Absent
Open
Day off
```
## Days across things
`table class="schedule"`: a column of names, kept in view while the days scroll by, then a column per day with its number and weekday. A cell holds how many are out; `data-state="busy"` tints it, `"over"` - more out than there are - marks it, and `data-weekend` tints a weekend's column. Put it in a scroller: `overflow-x-auto`.
```html
Equipment out, November 2 to 8
Equipment
2Mon
3Tue
4Wed
5Thu
6Fri
7Sat
8Sun
Excavator (1)
1
1
1
Scaffold set (3)
2
4
3
Generator (2)
1
1
```
## Accessibility
- Both are tables: a screen reader reads a day with its weekday's header, a cell with its thing and its day. Weekdays are `abbr` with the full name.
- A day's number is a `time` with its date; "+2" says "+2 more" with a hidden word.
- A busy or over cell says its number; the tint repeats it, and an over cell is also outlined in forced colors.
- A day's state is in words, never in its tint alone; a day that is a button is named by its whole date and its state, "November 4, waiting for approval", and the picked one says `aria-pressed="true"`.