Calendrier

Le calendrier est un élément de registre optionnel : la table ne dépend d’aucune bibliothèque de calendrier tant qu’il n’est pas installé. Les enregistrements deviennent des événements sur toute la journée dans une mise en page mois, semaine ou liste, construite avec FullCalendar et habillée aux couleurs de shadcn.

Installer et activer

npx shadcn@latest add https://table.yayaw.app/r/yayaw-table-calendar.json

import { calendarRenderer } from "@/components/ui/yayaw-table-calendar/calendar-renderer";

<DataTable
  displayModeRenderers={{ calendar: calendarRenderer }}
  // ...
/>;

npx shadcn-vue@latest add https://table.yayaw.app/r/yayaw-table-vue-calendar.json

<script setup lang="ts">
import { calendarRenderer } from "@/components/ui/yayaw-table-vue/calendar/calendar-renderer";
</script>

<template>
  <YayawDataTable :display-mode-renderers="{ calendar: calendarRenderer }" />
</template>

Sans renderer passé, "calendar" n’est pas proposé même s’il figure dans displayModes, et un lien qui le demande retombe sur le mode par défaut. displayModeRenderers est un mécanisme général pour les modes d’affichage optionnels ; le calendrier en est le premier.

Essayer le calendrier

L’aperçu passe calendarRenderer dans displayModeRenderers et affiche chaque projet de sa date de début à sa date de fin, coloré selon son statut. Faites glisser un événement vers un autre jour ou étirez sa fin pour modifier l’enregistrement, ou cliquez sur un jour libre pour créer un projet à cette date. Utilisez Mois, Semaine et Liste dans la barre du calendrier. L’aperçu utilise les projets d’ouverture de magasins communs à tous les guides de vues ; voir les données des exemples pour project-config.ts et l’hôte en mémoire.

import { defineTableConfig } from "@/components/ui/yayaw-table";
import { projectConfig } from "./project-config";

// Pass `displayModeRenderers={{ calendar: calendarRenderer }}` to the table.
export const exampleConfig = defineTableConfig({
  ...projectConfig,
  table: {
    ...projectConfig.table,
    displayModes: ["calendar", "table"],
    defaultDisplayMode: "calendar",
    calendar: {
      dateColumn: "start",
      endColumn: "end",
      titleColumn: "name",
      colorColumn: "status",
      layout: "month",
      weekStartsOn: 1,
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue";
import { projectConfig } from "./project-config";

// Pass `:display-mode-renderers="{ calendar: calendarRenderer }"` to the table.
export const exampleConfig = defineTableConfig({
  ...projectConfig,
  table: {
    ...projectConfig.table,
    displayModes: ["calendar", "table"],
    defaultDisplayMode: "calendar",
    calendar: {
      dateColumn: "start",
      endColumn: "end",
      titleColumn: "name",
      colorColumn: "status",
      layout: "month",
      weekStartsOn: 1,
    },
  },
});

Configuration

Décrivez le calendrier avec table.calendar. Toutes les options sont facultatives ; celles non définies reprennent la première colonne de date, la première colonne hors date, et les valeurs par défaut ci-dessous.

export const calendarConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "calendar"],
    calendar: {
      dateColumn: "startDate",
      endColumn: "endDate",
      titleColumn: "name",
      colorColumn: "status",
      layout: "month",
    },
  },
});

Réglages du calendrier

Ouvrez Vue → Réglages des cartes pour choisir les colonnes de date, de fin, de titre et de couleur, la mise en page, le premier jour de la semaine, les week-ends, le glisser-déposer, l’étirement et la création. Les boutons Mois/Semaine/Liste ainsi que précédent/aujourd’hui/suivant se trouvent dans la barre d’outils propre au calendrier, à côté de son titre. Les choix sont enregistrés avec les vues et dans la clé d’URL <tableId>-calendar, par exemple ?projects-display=calendar&projects-calendar={"layout":"list"}.

Déplacer et créer des événements

Faire glisser un événement vers un autre jour appelle actions.update(id, patch) avec la colonne de date, en décalant la colonne de fin de la même durée si elle existe ; l’événement revient à sa place si la mise à jour échoue. Une date stockée en YYYY-MM-DD reste au format date seule après un déplacement, et un horodatage ISO conserve son heure.

Cliquer sur un jour ouvre le formulaire de création avec la date, et la date de fin si elle est configurée, déjà renseignées. Cliquer sur un événement se comporte comme cliquer sur une ligne du tableau : cela suit rowClickMode (détails, édition, lien ou onRowActivate).

Données côté serveur

Le calendrier a besoin de tous les enregistrements de la plage visible, pas seulement de la page courante. Il appelle actions.list avec la recherche, les filtres et le tri habituels, plus un scope :

{ kind: "dateRange", field: "startDate", endField: "endDate", from: "2026-09-01", to: "2026-09-30" }

from et to sont des jours calendaires locaux, tous deux inclus. Un serveur qui applique ce scope répond meta: { scope: "applied" } ; sinon la table filtre elle-même les lignes chargées, ce qui fonctionne mais transfère plus de données. Une vérification minimale côté serveur :

const overlaps = (row) =>
  row[scope.field] <= scope.to &&
  (row[scope.endField ?? scope.field] ?? row[scope.field]) >= scope.from;

Le chargement est plafonné ; un avis apparaît lorsque seule une partie des enregistrements correspondants est affichée.

Traductions

Les clés React se trouvent sous views.calendar.* (previous, next, today, layout, month, week, list, dateColumn, endColumn, titleColumn, colorColumn, none, weekStartsOn, monday, sunday, saturday, showWeekends, allowDragUpdate, allowResize, allowCreate, on, off, noDateColumn, truncated), plus views.display.calendar. Vue utilise les mêmes noms sous calendar.* et display.calendar. Chaque clé est facultative et conserve son libellé par défaut, en anglais ou en français, lorsqu’elle est omise ; les textes FullCalendar en français sont utilisés dès que la locale commence par fr.

Thème

Le calendrier applique le thème classique de FullCalendar aux tokens shadcn (fond, bordure, couleur atténuée, couleur primaire, etc.), et suit donc le mode clair et sombre comme le reste de la table.