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.jsonimport
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
| lu | ma | mi | ju | vi | sá | do |
|---|---|---|---|---|---|---|
octubre de 2026
| lu | ma | mi | ju | vi | sá | 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
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| value | Date | null | - | Día elegido, controlado por el caller. |
| onValueChange | (date: Date) => void | - | Se dispara al elegir un día habilitado. |
| defaultMonth | Date | - | Mes visible inicial. Si hay value, el mes de value tiene prioridad; si no, usa hoy. |
| moods | Record<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. |
| disabled | boolean | false | Deshabilita el calendario completo. |
| autoFocus | boolean | false | Enfoca el día activo al montar. |
| aria-label | string | - | Nombre de la grilla; por defecto anuncia mes y año. |
| className | string | - | 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.