Vistas

trud-calendar incluye cuatro vistas:

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

Vista de Mes

Una grilla de 6 semanas mostrando el contexto completo del mes. Caracteristicas:

• Pills de eventos con indicadores de color
• Eventos multi-dia que se extienden entre celdas
• Popover “+N mas” — click para ver todos los eventos del dia
• Drag & Drop — mueve eventos entre dias (preserva la hora original)
• Navegacion por teclado — flechas para navegar entre dias, Enter/Space para activar

Vista de Semana

Una grilla de tiempo con 7 columnas mostrando una semana. Caracteristicas:

• Manejo de solapamiento — algoritmo de column-packing posiciona eventos solapados lado a lado
• Fila de todo el dia — eventos multi-dia y de dia completo arriba de la grilla
• Eventos multi-dia con hora — eventos con hora que abarcan multiples dias se segmentan por dia (ej: una conferencia de Mie 10:00 a Vie 16:00 se muestra en los tres dias)
• Indicador de hora actual — linea roja mostrando “ahora”
• Auto-scroll — se desplaza a la hora actual al montar
• Horas configurables — usa dayStartHour y dayEndHour
• Drag & Drop — mueve eventos a cualquier dia/franja horaria (snap configurable)
• Redimensionar — arrastra el borde superior o inferior de eventos para cambiar hora de inicio o duracion
• Arrastrar para crear — arrastra sobre slots vacios para seleccionar un rango de tiempo
• Navegacion por teclado — flechas para navegar, Enter/Space para activar

Vista de Dia

Una grilla de tiempo con una sola columna — mismo motor que la vista de semana, enfocada en un dia. Todas las funcionalidades de la vista de semana aplican.

Vista de Agenda

Una lista cronologica de eventos agrupados por fecha. Caracteristicas:

• Encabezados de seccion con posicionamiento sticky
• Badge de hoy resaltado
• Estado vacio — muestra un mensaje personalizable de “sin eventos”
• Muestra rango de tiempo para eventos con hora, etiqueta “todo el dia” para eventos de dia completo
• Navegacion por teclado — flechas Arriba/Abajo entre items, Enter/Space para click

Cambiar de vista

Usa defaultView (no controlado) o view + onViewChange (controlado):

// No controlado — empieza en vista de semana
<Calendar events={events} defaultView="week" />

// Controlado — tu manejas el estado de la vista
const [view, setView] = useState<CalendarView>("month");
<Calendar events={events} view={view} onViewChange={setView} />

Personalizar la grilla de tiempo

Limita las horas visibles en las vistas de semana y dia:

<Calendar
  events={events}
  dayStartHour={8}   // Empieza a las 8 AM
  dayEndHour={20}    // Termina a las 8 PM
/>

Limites de tiempo flexibles

Cuando flexibleSlotTimeLimits esta habilitado, la grilla de tiempo se expande automaticamente para mostrar eventos que caen fuera del dayStartHour/dayEndHour configurado:

<Calendar
  events={events}
  dayStartHour={9}
  dayEndHour={17}
  flexibleSlotTimeLimits
/>

Si un evento empieza a las 7 AM, la grilla se expande para mostrar desde las 7 AM en vez de las 9 AM.

Dias ocultos

Oculta dias especificos de la semana en todas las vistas usando hiddenDays. Util para calendarios laborales que no necesitan fines de semana:

// Ocultar Sabado (6) y Domingo (0)
<Calendar
  events={events}
  hiddenDays={[0, 6]}
/>

Los dias ocultos se eliminan de las columnas de la grilla mensual, las columnas de la vista semanal y los grupos de fechas de la vista agenda. Los eventos en dias ocultos se mantienen en los datos — simplemente no se muestran.

Fechas destacadas

Resalta visualmente fechas especificas (feriados, deadlines, etc.) usando highlightedDates:

<Calendar
  events={events}
  highlightedDates={["2026-03-25", "2026-12-25", "2026-01-01"]}
/>

Las fechas destacadas reciben un fondo de acento sutil en las celdas de la grilla mensual y en los encabezados de columna de la vista semanal.

Numeros de semana

Muestra numeros de semana ISO junto a la grilla mensual:

<Calendar events={events} showWeekNumbers />

Los numeros de semana aparecen como una columna estrecha en el lado izquierdo de la vista mensual.

Rango de fechas valido

Restringe hasta donde pueden navegar los usuarios con validRange. Los botones anterior/siguiente se deshabilitan automaticamente al llegar a los limites:

<Calendar
  events={events}
  validRange={{
    start: "2026-01-01",
    end: "2026-12-31",
  }}
/>

Puedes establecer solo start, solo end, o ambos.

Vista de Ano

Una vista general de 12 meses mostrando el ano completo. Caracteristicas:

• Puntos de eventos — los dias con eventos muestran un indicador
• Click para navegar — hacer click en cualquier dia cambia a la vista de dia
• Fechas destacadas — el estilo de highlightedDates se aplica en la grilla anual
• Grilla responsiva — 2 columnas en movil, 3 en tablet, 4 en desktop

<Calendar events={events} defaultView="year" />