Comment créer un composant calendrier avec Claude Code

La demande pour les composants calendrier

Les interfaces de calendrier sont nécessaires dans de nombreuses applications : systèmes de réservation, gestion de planning, sélection de dates, etc. Bien qu’il soit possible de s’appuyer sur des bibliothèques externes, la création personnalisée est idéale si vous recherchez une liberté de design et de fonctionnalités. Avec Claude Code, vous pouvez construire rapidement un composant calendrier flexible.

Implémentation de base d’un calendrier mensuel

> Crée un composant calendrier mensuel avec date-fns.
> Gère le changement de mois et la sélection de date.

import { useState } from 'react';
import {
  startOfMonth, endOfMonth, startOfWeek, endOfWeek,
  eachDayOfInterval, format, addMonths, subMonths, isSameMonth, isSameDay, isToday,
} from 'date-fns';
import { fr } from 'date-fns/locale';

interface CalendarProps {
  selected?: Date;
  onSelect: (date: Date) => void;
  events?: { date: Date; title: string }[];
}

function Calendar({ selected, onSelect, events = [] }: CalendarProps) {
  const [currentMonth, setCurrentMonth] = useState(new Date());

  const monthStart = startOfMonth(currentMonth);
  const monthEnd = endOfMonth(currentMonth);
  const calendarStart = startOfWeek(monthStart, { locale: fr });
  const calendarEnd = endOfWeek(monthEnd, { locale: fr });
  const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd });

  const weekDays = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];

  const getEventsForDay = (day: Date) =>
    events.filter((e) => isSameDay(e.date, day));

  return (
    <div className="w-full max-w-md mx-auto" role="application" aria-label="calendrier">
      <div className="flex items-center justify-between mb-4">
        <button onClick={() => setCurrentMonth(subMonths(currentMonth, 1))} aria-label="Mois précédent">
          ←
        </button>
        <h2 className="text-lg font-bold" aria-live="polite">
          {format(currentMonth, 'MMMM yyyy', { locale: fr })}
        </h2>
        <button onClick={() => setCurrentMonth(addMonths(currentMonth, 1))} aria-label="Mois suivant">
          →
        </button>
      </div>

      <div className="grid grid-cols-7 gap-px" role="grid">
        {weekDays.map((day) => (
          <div key={day} className="text-center text-sm font-medium text-gray-500 py-2" role="columnheader">
            {day}
          </div>
        ))}

        {days.map((day) => {
          const dayEvents = getEventsForDay(day);
          const isSelected = selected && isSameDay(day, selected);
          const inMonth = isSameMonth(day, currentMonth);

          return (
            <button
              key={day.toISOString()}
              onClick={() => onSelect(day)}
              role="gridcell"
              aria-selected={isSelected}
              aria-label={`${format(day, 'd MMMM', { locale: fr })}${dayEvents.length > 0 ? ` ${dayEvents.length} événement(s)` : ''}`}
              className={`p-2 text-center rounded-lg relative ${
                !inMonth ? 'text-gray-300' :
                isSelected ? 'bg-blue-600 text-white' :
                isToday(day) ? 'bg-blue-100 font-bold' :
                'hover:bg-gray-100'
              }`}
            >
              {format(day, 'd')}
              {dayEvents.length > 0 && (
                <span className="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-blue-500" />
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}

Sélection de plage de dates

> Gère la sélection de plage de dates comme pour un check-in/check-out.

function useDateRange() {
  const [range, setRange] = useState<{ start: Date | null; end: Date | null }>({
    start: null,
    end: null,
  });

  const handleSelect = (date: Date) => {
    if (!range.start || (range.start && range.end)) {
      setRange({ start: date, end: null });
    } else if (date < range.start) {
      setRange({ start: date, end: range.start });
    } else {
      setRange({ start: range.start, end: date });
    }
  };

  const isInRange = (date: Date) => {
    if (!range.start || !range.end) return false;
    return date >= range.start && date <= range.end;
  };

  return { range, handleSelect, isInRange };
}

Calendrier avec affichage des événements

function EventCalendar({ events }: { events: CalendarEvent[] }) {
  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
  const dayEvents = events.filter((e) => isSameDay(e.date, selectedDate));

  return (
    <div className="flex gap-4">
      <Calendar selected={selectedDate} onSelect={setSelectedDate} events={events} />
      <div className="flex-1">
        <h3 className="font-bold mb-2">
          Événements du {format(selectedDate, 'd MMMM (EEEE)', { locale: fr })}
        </h3>
        {dayEvents.length === 0 ? (
          <p className="text-gray-500">Aucun événement</p>
        ) : (
          <ul className="space-y-2">
            {dayEvents.map((event) => (
              <li key={event.id} className="p-3 rounded-lg border">
                <span className="font-medium">{event.title}</span>
                <span className="text-sm text-gray-500 ml-2">
                  {format(event.date, 'HH:mm')}
                </span>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

Résumé

Avec Claude Code, vous pouvez construire de manière flexible des composants calendrier adaptés à vos besoins : affichage mensuel, sélection de plages de dates, affichage d’événements. Pour la combinaison avec un affichage en tableau, consultez Composant tableau, et pour l’adaptation responsive, consultez Design responsive.

Pour plus de détails sur date-fns, consultez le site officiel de date-fns.