@gymast/calendar-horarios

Calendario React diseñado para la configuración y visualización de parrillas de horarios de clases grupales fijas en gimnasios.

🚀 Características

• Visualización clara de bloques de horarios recurrentes.
• Vistas diaria, semanal y mensual.
• Soporte para asignación de profesores y cupos.
• Interfaz intuitiva para gestión de horarios.

📦 Instalación

npm install @gymast/calendar-horarios @gymast/calendar-shared

💻 Uso Básico

import Calendario from '@gymast/calendar-horarios';
import { TimeBlock } from '@gymast/calendar-horarios/types';

function App() {
  const timeBlocks: TimeBlock[] = [
    // ... tus datos de horarios
  ];

  return (
    <Calendario
      timeBlocks={timeBlocks}
      onEventClick={(clase) => console.log('Click en clase', clase)}
    />
  );
}

📝 API

Props

| Prop | Tipo | Requerido | Descripción | |------|------|-----------|-------------| | timeBlocks | TimeBlock[] | ❌ No | Array de bloques de horario. | | onCreateClass | (classData: TimeBlock) => void | ❌ No | Callback para creación de clases (legacy). | | onRefresh | () => void | ❌ No | Callback para refrescar datos. | | onEventClick | (classData: TimeBlock) => void | ❌ No | Al hacer clic en una clase. | | onEmptySpaceClick | (date: Date, time: string) => void | ❌ No | Al hacer clic en un espacio vacío. | | onEventDrop | (event: TimeBlock, newDate: Date, newTime: string) => void | ❌ No | Al mover una clase de horario. |

Estructura de Datos (TimeBlock)

interface TimeBlock {
    codigo: string;
    codclase: number;
    nombreclase: string;
    color: string;
    horainicio: string; // ISO Date string
    horafin: string; // ISO Date string
    dias: string; // Ejemplo: "[lun]", "[mar,jue]"
    cupos: number;
    permitereposiciones: number; // 1 o 0
    codtiporeposiciones: number;
    nombretiporeposicion: string;
    maxreposiciones: number;
    horaantes: string;
    horadespues: string;
    codprofesor: string;
    nombreprofesor: string;
}

🎨 Estilos

Este paquete utiliza Tailwind CSS. Para asegurar que los estilos se apliquen correctamente, añade la ruta a tu tailwind.config.js:

module.exports = {
  content: [
    // ...
    "./node_modules/@gymast/calendar-horarios/dist/**/*.{js,mjs,cjs}",
    "./node_modules/@gymast/calendar-shared/dist/**/*.{js,mjs,cjs}",
  ],
  // ...
}