SlotDayPicker
Selector de fecha y horario de citas en dos partes: una tira de dias de la semana con indicadores de disponibilidad, y un grid de horarios dividido en manana/tarde.
Nota: Este componente requiere datos del servicio SchedulingService para funcionar. En esta vista se muestra la estructura visual y el comportamiento esperado sin datos reales.
Vista previa (con datos mock)
31 - 6 abr 2026
Manana
Tarde
Props y Eventos
Props:
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
| clinicId | String | requerido | ID de la clinica para consultar disponibilidad |
| serviceType | String | null | Tipo de servicio para filtrar horarios |
| preselectedDate | String | null | Fecha preseleccionada (YYYY-MM-DD) |
| modelValue | Object | null | v-model con { date, slot } |
Eventos:
| Evento | Payload |
|---|---|
| update:modelValue | { date: 'YYYY-MM-DD', slot: { startTime, endTime, duration, veterinarianId, veterinarianName } } | null |
| date-change | 'YYYY-MM-DD' - cuando el usuario cambia de dia |
Comportamiento
- Al montar, carga 14 dias de disponibilidad via
SchedulingService.getAvailableSlotsRange() - Cada dia muestra un punto verde con cantidad de slots, o gris si no hay disponibilidad
- Dias pasados se muestran deshabilitados
- Al seleccionar un dia, carga los slots individuales via
SchedulingService.getClinicAvailability() - Los horarios se dividen automaticamente en Manana (antes de 12:00) y Tarde (12:00+)
- Cada slot puede mostrar el nombre del veterinario asignado
- Se puede navegar entre semanas con flechas, cargando datos bajo demanda
- Auto-selecciona: fecha preseleccionada > primer dia con slots > hoy