Calendar

Des dates se lisent mal en liste. Un plan de sorties, un calendrier de cours, les semaines d'une migration : ce qui compte, c'est où elles tombent et à quelle distance les unes des autres. Calendar dessine les mois, et pose chaque événement sur son jour.

Des jours, et ce qu'il y a dessus

<Calendar>
  <Event date="2026-10-14" label="Sortie 0.5" href="/whats-new/" />
  <Event date="2026-10-14" label="Billet de blog" />
  <Event date="2026-10-28" label="Atelier" />
</Calendar>

Un jour s'écrit 2026-10-14 — quatre chiffres, deux, deux. Plusieurs événements peuvent tomber le même jour, et ils sont dessinés dans l'ordre où ils sont écrits. href est résolu comme n'importe quel lien d'une page : depuis la page, ou depuis la racine de la version.

Les événements sont écrits dans la page. Rien n'est lu dans le frontmatter des autres pages : un calendrier dit ce que son auteur y a mis, et le dit là où on le lit.

Plusieurs mois

Chaque mois entre le premier événement et le dernier est dessiné — y compris ceux qui ne contiennent rien, parce qu'un creux est quelque chose qu'un lecteur doit voir.

<Calendar>
  <Event date="2026-11-18" label="Bêta" />
  <Event date="2027-01-06" label="Sortie" />
</Calendar>

Sans JavaScript, les mois sont empilés les uns après les autres et le calendrier entier se lit. Avec, ils se replient en un seul, deux flèches passent de l'un à l'autre, et le jour même est cerné. Les flèches sont écrites masquées et révélées par le script : elles n'apparaissent donc jamais sans le code qui les fait marcher.

Ce script, c'est le fichier client de la version : deux kilooctets environ, chargé par les seules pages qui contiennent un calendrier, et partagé avec les autres comportements qu'emploie la version. Voir copyCode pour ce qu'est ce fichier.

Le modèle réduit

compact dessine la grille en petit et écrit les événements au-dessous, à toute largeur — à côté d'un paragraphe, ou dans une colonne à lui.

Un écran étroit prend ce modèle, quoi que la page ait demandé. Sept colonnes de cellules pleines sur un téléphone ne laissent que quelques millimètres à chaque jour, et un libellé écrit dedans fait un mot par ligne. Les deux formes sont dans la page et la feuille de style n'en montre qu'une, comme le menu de l'en-tête est écrit deux fois : aucun script n'en décide, et rien n'est lu deux fois par un lecteur d'écran.

<Calendar compact>
  <Event date="2026-10-14" label="Sortie 0.5" />
  <Event date="2026-10-28" label="Atelier" />
</Calendar>

Un jour qui porte quelque chose reçoit un point, ou le nombre de choses qu'il porte — un jour qui en a trois doit dire trois plutôt que ressembler à un jour qui en a une. La liste au-dessous est ce qui dit lesquelles : rien n'est seulement une couleur, qu'aucun lecteur d'écran ne lit et qu'aucun lecteur daltonien ne voit.

La langue de la page

Les noms de mois et de jours viennent de la langue de la page, et le nom qu'annonce un lecteur d'écran aussi. Une page française dit octobre, une page anglaise October — rien à déclarer.

Ce qu'il refuse

Propriétés

Calendar :

Event :

Écrire un bloc deux fois et n'en montrer qu'un, c'est ainsi que ce site traite partout les écrans étroits — Columns fait le même choix.