Event date block

Eventos del calendario de la organización en listas y rail.

Día y mes abreviado en un bloque de ancho fijo. EventRow lo combina con título y día de la semana. En la app solo aparece dentro de EventRow, en Próximos eventos de Inicio.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/rail-row.json

import

import { EventDate, EventRow } from "@moodinary/ui/components/rail-row";

Ejemplos

Bloques de fecha

El bloque de día y mes que usa cada fila de evento.

30sept2oct12oct

Código

blocks.tsx

import { EventDate } from "@moodinary/ui/components/rail-row";

/* La columna de fecha que EventRow usa en Próximos eventos (inicio-rail.tsx). */
export default function EventDateBlocks() {
	return (
		<>
			<EventDate date={new Date("2026-09-30")} timeZone="UTC" />
			<EventDate date={new Date("2026-10-02")} timeZone="UTC" />
			<EventDate date={new Date("2026-10-12")} timeZone="UTC" />
		</>
	);
}

Filas de evento

EventRow con el título del evento, como en el rail de Inicio.

9octJornada deportivavie
23octOffsite del equipo de Productovie

Código

row.tsx

import { EventRow } from "@moodinary/ui/components/rail-row";

/* Como en inicio-rail.tsx: el título del evento sin subtítulo. Día completo en UTC. */
export default function EventDateRow() {
	return (
		<ul className="m-0 grid w-[320px] max-w-full list-none gap-2.5 p-0 text-sm">
			<EventRow
				date={new Date("2026-10-09")}
				timeZone="UTC"
				title="Jornada deportiva"
			/>
			<EventRow
				date={new Date("2026-10-23")}
				timeZone="UTC"
				title="Offsite del equipo de Producto"
			/>
		</ul>
	);
}

Props

EventDate

Prop	Tipo	Default	Descripción
date	Date	-	Fecha obligatoria; usa formato es-AR.
timeZone	string	-	Zona horaria opcional. Si se omite, usa la del entorno.

EventRow

Prop	Tipo	Default	Descripción
date	Date	-	Fecha que recibe EventDate.
title	ReactNode	-	Nombre o contenido del evento.
timeZone	string	-	Zona para el bloque y el día de semana. Usá UTC para fechas guardadas como día completo.
className	string	-	Clases de la fila li.

Cuándo sí y cuándo no

Hacé

Pasá la misma zona horaria al día y a sus detalles.
Acompañá la fecha con el nombre del evento.
Usá time con dateTime cuando necesites una fecha completa legible por máquinas.

Evitá

No asumas que una fecha UTC se ve igual en todas las zonas.
No representes cancelado solo bajando la opacidad.
No conviertas cada bloque de fecha en un control si no hace nada.

El bloque es texto, no necesita foco ni navegación propia.
Envolvé EventRow en ul u ol; los enlaces del evento conservan la navegación por Tab.
Si mes y día no alcanzan para entender el año, incluí la fecha completa en texto accesible.