0.1.10 • Published 1 year ago
@detdev/calendar v0.1.10
🗓️ @detdev/calendar
Componente de calendario headless + estilizable para apps React 18/19.
| Prop | Tipo | Descripción |
|---|---|---|
weekStartsOn | 0 \| 1 | 0 = domingo (default) / 1 = lunes |
getDayState | (iso: string) => "free" \| "partial" \| "full" \| "past" | Lógica de disponibilidad por día |
getHoursOfDay | (iso: string) => string[] | Devuelve slots horarios en formato "HH:MM" |
colors | Partial<Record<DayState,string>> | Map de clases Tailwind/estilos por estado |
import { Calendar } from "@detdev/calendar";
const CUPOS = 8;
const reservas = { "2025-04-18": 8, "2025-04-19": 4 };
export default () => (
<Calendar
weekStartsOn={0}
getDayState={(iso) => {
const r = reservas[iso] ?? 0;
if (r === 0) return "free";
if (r < CUPOS) return "partial";
return "full";
}}
getHoursOfDay={(iso) =>
[...Array(CUPOS - (reservas[iso] ?? 0))].map((_, i) => `${8 + i}:00 AM`)
}
/>
);
Instalación
npm i @detdev/calendar
# ó
pnpm add @detdev/calendar:root {
--calendar-free: #10b981; /_ verde _/
--calendar-partial: #facc15; /_ amarillo _/
--calendar-full: #f87171; /_ rojo _/
}✅ Compatible con React 18.x y 19.x
🎨 El CSS se inyecta automáticamente (no hace falta importarlo manualmente)
💅 Estilizado con Tailwind, no requiere Tailwind en tu proyecto