Primeros pasos

Inicio rapido

Instala el paquete:

npm install trud-calendar
# or
pnpm add trud-calendar
# or
yarn add trud-calendar

Peer dependencies: react >=18, react-dom >=18

Uso basico

import { Calendar } from "trud-calendar";

const events = [
  {
    id: "1",
    title: "Standup del equipo",
    start: "2026-03-13T09:00:00",
    end: "2026-03-13T09:30:00",
  },
  {
    id: "2",
    title: "Vacaciones",
    start: "2026-03-16T00:00:00",
    end: "2026-03-20T23:59:59",
    allDay: true,
    color: "#10b981",
  },
];

function App() {
  return (
    <Calendar
      events={events}
      onEventClick={(event) => console.log("Click:", event)}
      onSlotClick={(dateTime) => console.log("Slot:", dateTime)}
    />
  );
}

Eso es todo. El calendario se renderiza con valores por defecto — vista de mes, locale ingles, semana empezando en domingo, grilla de 24h.

Forma de CalendarEvent

interface CalendarEvent {
  id: string;         // Identificador unico
  title: string;      // Titulo del evento
  start: string;      // ISO 8601: "2026-03-13T09:00:00"
  end: string;        // ISO 8601: "2026-03-13T10:00:00"
  allDay?: boolean;   // Evento de dia completo
  color?: string;     // Cualquier valor de color CSS
  recurrence?: RecurrenceRule;  // Regla de recurrencia (ver pagina de Recurrencia)
  exDates?: string[];           // Fechas a excluir de la recurrencia
  [key: string]: unknown;       // Datos personalizados
}

Todas las fechas usan strings ISO 8601 — no objetos Date. Esto las hace serializables, faciles de memoizar y compatibles con cualquier backend.

Modo controlado

Controla la fecha y/o la vista desde afuera:

const [date, setDate] = useState("2026-03-13");
const [view, setView] = useState<CalendarView>("week");

<Calendar
  events={events}
  date={date}
  view={view}
  onDateChange={setDate}
  onViewChange={setView}
/>

O usa el modo no controlado con defaultDate y defaultView (sin necesidad de callbacks).