@gymast/calendar-citas

Calendario React especializado para la gestión de citas individuales (entrenamientos personales, nutrición, fisioterapia, etc.) en gimnasios.

🚀 Características

• Vistas diaria, semanal y mensual.
• Drag & drop para reagendar citas.
• Redimensionamiento para ajustar la duración de las citas.
• Filtrado por profesional.
• Totalmente personalizable mediante props y estilos CSS/Tailwind.

📦 Instalación

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

💻 Uso Básico

import { CalendarioCitas } from '@gymast/calendar-citas';
import { Cita } from '@gymast/calendar-citas/types';
// No es necesario importar estilos CSS si ya tienes Tailwind configurado

function App() {
  const citas: Cita[] = [
    // ... tus datos de citas
  ];

  return (
    <CalendarioCitas
      citas={citas}
      onEventClick={(cita) => console.log('Click en cita', cita)}
      onEventDrop={(cita, newDate, newTime) => console.log('Cita movida', cita, newDate, newTime)}
    />
  );
}

📝 API

Props

| Prop | Tipo | Requerido | Descripción | |------|------|-----------|-------------| | citas | Cita[] | ❌ No | Array de citas para mostrar. | | onRefresh | () => void | ❌ No | Callback para refrescar los datos. | | onEventClick | (cita: Cita) => void | ❌ No | Se ejecuta al hacer clic en una cita. | | onEmptySpaceClick | (date: Date, time: string) => void | ❌ No | Se ejecuta al hacer clic en un espacio vacío. | | onEventDrop | (cita: Cita, newDate: Date, newTime: string) => void | ❌ No | Se ejecuta al arrastrar y soltar una cita. | | onEventResize | (cita: Cita, newEndTime: string) => void | ❌ No | Se ejecuta al redimensionar la duración. |

Estructura de Datos (Cita)

interface Cita {
    codigo: number;
    codProfesor: string;
    nombreProfesor: string;
    codSocio: string;
    nombreSocio: string;
    emailSocio: string;
    fotoSocio: string;
    fecha: string; // ISO Date string (YYYY-MM-DD)
    horaInicio: string; // HH:mm
    horaFin: string; // HH:mm
    color: string;
    observacion: string;
    estado: number;
    estadoDescripcion: string;
    visible: boolean;
    fechaCreacion: string;
    codUsuarioCrea: 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-citas/dist/**/*.{js,mjs,cjs}",
    "./node_modules/@gymast/calendar-shared/dist/**/*.{js,mjs,cjs}",
  ],
  // ...
}