So erstellen Sie eine Kalenderkomponente mit Claude Code

Bedarf an Kalenderkomponenten

Kalender-UIs werden in vielen Anwendungen benötigt – Buchungssysteme, Terminverwaltung, Datumsauswahl und mehr. Externe Bibliotheken sind eine Option, aber für maximale Design- und Funktionsfreiheit ist eine Eigenentwicklung ideal. Mit Claude Code können Sie flexible Kalenderkomponenten schnell erstellen.

Grundlegende Monatsansicht-Implementierung

> Erstelle eine Monatsansicht-Kalenderkomponente mit date-fns.
> Mit Monatswechsel und Datumsauswahl.

import { useState } from 'react';
import {
  startOfMonth, endOfMonth, startOfWeek, endOfWeek,
  eachDayOfInterval, format, addMonths, subMonths, isSameMonth, isSameDay, isToday,
} from 'date-fns';
import { de } 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: de });
  const calendarEnd = endOfWeek(monthEnd, { locale: de });
  const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd });

  const weekDays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];

  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="Kalender">
      <div className="flex items-center justify-between mb-4">
        <button onClick={() => setCurrentMonth(subMonths(currentMonth, 1))} aria-label="Vorheriger Monat">
          &larr;
        </button>
        <h2 className="text-lg font-bold" aria-live="polite">
          {format(currentMonth, 'MMMM yyyy', { locale: de })}
        </h2>
        <button onClick={() => setCurrentMonth(addMonths(currentMonth, 1))} aria-label="Nächster Monat">
          &rarr;
        </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: de })}${dayEvents.length > 0 ? ` ${dayEvents.length} Termin(e)` : ''}`}
              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>
  );
}

Datumsbereichsauswahl

> Unterstütze die Auswahl von Datumsbereichen wie 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 };
}

Kalender mit Ereignisanzeige

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">
          Termine am {format(selectedDate, 'd. MMMM (EEEE)', { locale: de })}
        </h3>
        {dayEvents.length === 0 ? (
          <p className="text-gray-500">Keine Termine vorhanden</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>
  );
}

Zusammenfassung

Mit Claude Code können Sie flexibel Kalenderkomponenten für verschiedene Zwecke erstellen – Monatsansicht, Datumsbereichsauswahl und Ereignisanzeige. Zur Kombination mit Tabellenanzeige siehe Tabellenkomponente, für responsive Anpassung Responsive Design.

Details zu date-fns finden Sie auf der offiziellen date-fns-Website.