Moodinary/UI

Calendar

Ver o elegir días. Los puntos muestran el clima del día. Flechas mueven, Enter elige.

Extensión de la galería, sin uso actual en la app. No es OrgCalendarMonth del dashboard: ese calendario organiza eventos. Este selector mensual usa semanas de lunes a domingo y puntos opcionales de clima por fecha.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/calendar.json
import
import { Calendar, dateKey } from "@moodinary/ui/components/calendar";

Ejemplos

Clima por día y calendario deshabilitado

El ejemplo usa datos ilustrativos. Elegí un día con click o teclado; los puntos también se anuncian como texto.

octubre de 2026
lumamijuvisádo
octubre de 2026
lumamijuvisádo
Código
default.tsx
"use client";

import {
	Calendar,
	dateKey,
	type MoodLevel,
} from "@moodinary/ui/components/calendar";
import { useState } from "react";

const LEVELS: MoodLevel[] = [
	4, 3, 4, 5, 2, 3, 4, 3, 1, 3, 4, 4, 5, 3, 2, 4, 3, 4, 5, 4,
];

function lastSchoolDays(): Record<string, MoodLevel> {
	const moods: Record<string, MoodLevel> = {};
	const day = new Date();
	let i = 0;
	while (i < LEVELS.length) {
		day.setDate(day.getDate() - 1);
		if (day.getDay() !== 0 && day.getDay() !== 6) {
			moods[dateKey(day)] = LEVELS[i] as MoodLevel;
			i += 1;
		}
	}
	return moods;
}

const isWeekend = (d: Date) => d.getDay() === 0 || d.getDay() === 6;

export default function CalendarDefault() {
	const [day, setDay] = useState<Date | null>(new Date());
	const [moods] = useState(lastSchoolDays);

	return (
		<>
			<Calendar
				aria-label="Clima por día de 4.º A"
				isDateDisabled={isWeekend}
				moods={moods}
				onValueChange={setDay}
				value={day}
			/>
			<Calendar
				aria-label="Calendario deshabilitado de demostración"
				disabled
			/>
		</>
	);
}

Props

Calendar

PropTipoDefaultDescripción
valueDate | null-Día elegido, controlado por el caller.
onValueChange(date: Date) => void-Se dispara al elegir un día habilitado.
defaultMonthDate-Mes visible inicial. Si hay value, el mes de value tiene prioridad; si no, usa hoy.
moodsRecord<string, 1 | 2 | 3 | 4 | 5>-Puntos por fecha local YYYY-MM-DD. dateKey(date) produce esa clave.
isDateDisabled(date: Date) => boolean-Días que pueden recorrerse pero no elegirse.
disabledbooleanfalseDeshabilita el calendario completo.
autoFocusbooleanfalseEnfoca el día activo al montar.
aria-labelstring-Nombre de la grilla; por defecto anuncia mes y año.
classNamestring-Clases adicionales. El ancho base es 260 px.

Cuándo sí y cuándo no

Hacé
  • Usá dateKey para claves en hora local.
  • Identificá los datos ilustrativos de un ejemplo.
  • Explicá los días que no se pueden elegir.
Evitá
  • No conviertas la fecha local a UTC para construir las claves.
  • No uses solo el color para transmitir el clima.
  • No interpretes un día sin punto como clima neutral.

Accesibilidad

  • Las flechas mueven un día o una semana; Home y End van al lunes y domingo.
  • PageUp y PageDown cambian de mes; con Shift cambian de año.
  • Enter y Espacio eligen. El nombre de cada día incluye su fecha y el clima si tiene un punto.