Referencia de Props

El componente <Calendar> acepta todos los campos de CalendarConfig, mas className.

Todas las props

Prop	Tipo	Default	Descripcion
events	CalendarEvent[]	requerido	Eventos a mostrar
defaultView	CalendarView	"month"	Vista inicial (no controlado)
defaultDate	DateString	hoy	Fecha inicial (no controlado)
view	CalendarView	—	Vista controlada
date	DateString	—	Fecha controlada
locale	Partial<CalendarLocale>	{ locale: "en-US", weekStartsOn: 0 }	Configuracion de locale
slots	Partial<CalendarSlots>	—	Sobreescrituras de componentes
enableDnD	boolean	false	Habilitar drag and drop
dayStartHour	number	0	Hora de inicio de la grilla (0-23)
dayEndHour	number	24	Hora de fin de la grilla (0-24)
snapDuration	number	15	Incremento de snap en minutos para arrastre, redimensionado y seleccion
hiddenDays	number[]	[]	Dias de la semana a ocultar (0=Domingo … 6=Sabado)
validRange	{ start?: DateString; end?: DateString }	—	Restringe el rango navegable; los botones anterior/siguiente se deshabilitan en los limites
highlightedDates	DateString[]	[]	Fechas a resaltar visualmente en todas las vistas
showWeekNumbers	boolean	false	Muestra numeros de semana ISO en la vista de mes
longPressDelay	number	0	Retardo de presion larga en ms para arrastre tactil (evita interferir con el scroll)
slotClickTime	string	"09:00:00"	Tiempo por defecto al hacer click en un dia vacio en vista de mes
resources	Resource[]	[]	Recursos para las vistas de recursos (las vistas dia/semana ganan una columna por recurso)
flexibleSlotTimeLimits	boolean	false	Expandir automaticamente la grilla cuando los eventos caen fuera del rango horario
customButtons	CustomButton[]	[]	Botones personalizados inyectados en el toolbar
displayTimeZone	string	zona del browser	Zona IANA en la que se renderizan los tiempos. Ver Zonas horarias.
className	string	—	Clases CSS adicionales

Callbacks

Callback	Firma	Descripcion
onEventClick	(event: CalendarEvent) => void	Se dispara al hacer click en un evento
onSlotClick	(dateTime: DateTimeString, extra?: { resourceId?: string }) => void	Se dispara al hacer click en un slot vacio. extra.resourceId presente en vistas de recursos.
onEventDrop	(event: CalendarEvent, newStart: DateTimeString, newEnd: DateTimeString, extra?: EventDropExtra) => void	Se dispara al soltar un evento. extra.resourceId presente en vistas de recursos.
onEventResize	(event: CalendarEvent, newStart: DateTimeString, newEnd: DateTimeString) => void	Se dispara al redimensionar un evento (vista semana/dia)
onSlotSelect	(start: DateTimeString, end: DateTimeString, extra?: { resourceId?: string }) => void	Se dispara al seleccionar un rango de tiempo. extra.resourceId presente en vistas de recursos.
onDateChange	(date: DateString) => void	Se dispara cuando la fecha visible cambia (navegacion)
onViewChange	(view: CalendarView) => void	Se dispara cuando la vista cambia
dragConstraint	(event, newStart, newEnd) => boolean	Devuelve false para prevenir un drop
resizeConstraint	(event, newStart, newEnd) => boolean	Devuelve false para prevenir un resize
selectConstraint	(start, end) => boolean	Devuelve false para prevenir una seleccion

Definiciones de tipos

CalendarEvent

interface CalendarEvent {
  id: string;
  title: string;
  start: DateTimeString;   // "2026-03-13T09:00:00"
  end: DateTimeString;     // "2026-03-13T10:00:00"
  allDay?: boolean;
  color?: string;
  timeZone?: string;             // Zona IANA (TZID de RFC 5545). Ver Zonas horarias.
  recurrence?: RecurrenceRule;   // Regla de evento recurrente
  exDates?: DateString[];        // Fechas a excluir de la recurrencia
  recurringEventId?: string;     // Presente en instancias expandidas (apunta al padre)
  originalDate?: DateString;     // Fecha original de esta instancia recurrente
  [key: string]: unknown;        // Metadatos personalizados
}

RecurrenceRule

Consulta Recurrencia para documentacion completa.

interface RecurrenceRule {
  freq: "daily" | "weekly" | "monthly" | "yearly";
  interval?: number;
  byDay?: RecurrenceDay[];    // "MO" | "TU" | "WE" | "TH" | "FR" | "SA" | "SU"
  byMonthDay?: number[];
  bySetPos?: number[];
  count?: number;
  until?: string;
}

CalendarView

type CalendarView = "month" | "week" | "day" | "agenda" | "year";

CalendarLocale

interface CalendarLocale {
  locale: string;          // BCP 47: "en-US", "es-ES", "ja-JP"
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
  labels?: Partial<CalendarLabels>;
}

CalendarLabels

interface CalendarLabels {
  today: string;
  month: string;
  week: string;
  day: string;
  agenda: string;
  allDay: string;
  noEvents: string;
  more: (count: number) => string;
}

DateString / DateTimeString

type DateString = string;      // "2026-03-13" (YYYY-MM-DD)
type DateTimeString = string;  // "2026-03-13T09:00:00" (YYYY-MM-DDTHH:mm:ss)

CalendarSlots

Consulta la pagina de Slots API para los tipos de props detallados.

interface CalendarSlots {
  toolbar?: ComponentType<ToolbarSlotProps>;
  event?: ComponentType<EventSlotProps>;
  dayCell?: ComponentType<DayCellSlotProps>;
  timeEvent?: ComponentType<TimeEventSlotProps>;
  allDayEvent?: ComponentType<AllDayEventSlotProps>;
  popover?: ComponentType<PopoverSlotProps>;
  agendaEvent?: ComponentType<AgendaEventSlotProps>;
  resourceHeader?: ComponentType<ResourceHeaderSlotProps>;
}