WeekScheduler

Import

import { WeekScheduler } from '@pzeta/vue-components'

Esempio Base

Props

SchedulerResource

SchedulerEvent

SchedulerShift

SchedulerDay

Slots

Emits

Esempi

Slot custom con stato colorato

Pattern tipico per planner di giri/turni: ogni evento ha uno stato (PIANIFICATO, IN_CORSO, ...) mappato a una variante di colore.

Riga "Non assegnati" + handler click

Abilita una riga in alto per gli eventi con resourceId: null e gestisce sia il click sulla cella sia il click sul singolo evento.

Navigazione settimana (v-model:start-date)

v-model:start-date permette di pilotare la settimana visualizzata da un controllo esterno (toolbar, date picker, scorciatoie).

Turni: Mattino e Pomeriggio

Con shifts ogni giorno si divide in una sotto-colonna per turno. Un evento con shift e shiftEnd diversi e' una sola barra sui turni che occupa; gli eventi che si sovrappongono nella stessa cella vanno su corsie diverse.

Turni in righe su un mese

Con molti giorni le sotto-colonne diventano troppe (un trimestre con 3 turni sono fino a 276 colonne): shift-layout="rows" da' a ogni risorsa una riga per turno e lascia una colonna per giorno. Un evento su piu' turni e' una barra verticale; le corsie si affiancano dentro la colonna del giorno.

Drag & drop tra celle

Con draggable-events gli eventi si trascinano su un'altra risorsa, un altro giorno o un altro turno, compresa la riga "Non assegnati". Lo scheduler emette eventDrop e non sposta niente: e' la pagina ad aggiornare events (e a salvare). Una barra su piu' turni conserva lunghezza e punto di presa; se non entra nella giornata la destinazione non e' valida. Con Ctrl (Alt su macOS) copy e' true e il consumer duplica invece di spostare.

Rilascio da sorgenti esterne

Con droppable le celle accettano le righe di una DataTable con draggable-rows (tutta la selezione, se la riga trascinata ne fa parte) e ricevono cellDrop. Lo stesso meccanismo vale per Tree e TreeTable. Qualunque altro elemento diventa una sorgente chiamando startRowsDrag nel suo dragstart e endRowsDrag nel dragend. Un elemento esterno occupa una sola sotto-cella: se il nuovo evento deve coprire piu' turni, lo decide il consumer.

Accessor function per chiavi non standard

Se il modello dati usa chiavi diverse (es. idautista, idgiro), passa una funzione invece di una stringa.

<WeekScheduler
  :resources="autisti"
  :events="giri"
  :resource-key="(r) => r.idautista"
  :event-resource-key="(e) => e.idautista"
  :event-date-key="(e) => e.data"
  :event-shift-key="(e) => e.codturnoinizio"
  :event-shift-end-key="(e) => e.codturnofine"
>
  <template #resource="{ resource }">
    {{ resource.cognome }} {{ resource.nome }}
  </template>
  <template #event="{ event }">
    Giro #{{ event.idgiro }}
  </template>
</WeekScheduler>

Note Comportamento

• La data di partenza viene normalizzata all'inizio della settimana corrente in base a weekStartsOn: passare 2026-05-14 con weekStartsOn: 1 produce comunque una griglia che parte da lunedi
• Gli eventi vengono indicizzati per (resourceId, date) in un Map ricalcolato in modo reattivo su events/resources: le mutazioni alle reference sono efficienti
• Il click su un evento ferma la propagazione (stopPropagation) per non far scattare anche cellClick
• La colonna delle risorse e' sticky (position: sticky; left: 0). La griglia ha una larghezza minima calcolata dalle colonne (resourceColumnWidth + giorni x minDayWidth, o giorni x turni x minShiftWidth in columns): sotto quella larghezza scorre in orizzontale
• Eventi con resourceId non presente in resources vengono ignorati nel rendering (non si crea una riga fantasma)
• Con i turni, un evento il cui turno iniziale non corrisponde a nessuno shift.key (o e' null) non viene mostrato, come gli eventi senza risorsa quando showUnassignedRow e' spento. Un turno finale assente, sconosciuto o precedente all'iniziale riduce l'evento al solo turno iniziale. Gli eventi a cavallo di due giorni non sono supportati
• Con i turni le corsie sono il minimo indispensabile: gli eventi si scorrono per turno iniziale e ognuno va nella prima corsia libera, quindi una barra Mattino e una Pomeriggio stanno sulla stessa corsia
• Con i turni la tabella usa table-layout: fixed: le colonne hanno larghezze uguali e non si adattano al contenuto, che va troncato (es. truncate) se non ci sta
• Drag & drop: e' HTML5 nativo come in DataTable, Tree e TreeTable, quindi su touch vale il supporto del browser. Durante il trascinamento la destinazione e' evidenziata su tutte le sotto-celle che l'evento occuperebbe (blu se valida, rossa se rifiutata), e vicino ai bordi la griglia scorre in orizzontale. Un rilascio nella posizione di partenza non emette nulla. Senza draggableEvents e droppable non c'e' nessun attributo draggable ne' listener di trascinamento

Accessibilita'

• Le celle e gli eventi sono <div> con handler click; per planner accessibili da tastiera valutare l'override via slot #cell con elementi <button> nativi
• Il giorno corrente riceve una variazione di colore (bg-blue-50 text-blue-700) quando todayHighlight e' attivo
• Con i turni ogni barra contiene un testo visibile solo agli screen reader con giorno e intervallo di turni (es. "lun 06/10, Mattino–Pomeriggio"), letto prima del contenuto dello slot #event

TypeScript

import type {
  WeekSchedulerProps,
  WeekSchedulerEmits,
  SchedulerResource,
  SchedulerEvent,
  SchedulerCellClickPayload,
  SchedulerEventClickPayload,
  SchedulerShift,
  SchedulerEventDropPayload,
  SchedulerCellDropPayload,
} from '@pzeta/vue-components'

interface Autista extends SchedulerResource {
  idautista: number
  cognome: string
  nome: string
}

interface Giro extends SchedulerEvent {
  idgiro: number
  descrizione: string
  codstato: 'PIANIFICATO' | 'ASSEGNATO' | 'IN_CORSO' | 'COMPLETATO' | 'ANNULLATO'
}

const onEventClick = (payload: SchedulerEventClickPayload) => {
  const giro = payload.event as Giro
  console.log('giro', giro.idgiro, giro.codstato)
}

Quando usarlo

• Planner giornaliero/settimanale per risorse (autisti, mezzi, dipendenti, sale)
• Gestione turni e assegnazioni
• Visualizzazione a griglia di prenotazioni o appuntamenti

Per casi diversi:

• Vista mese con sidebar eventi del giorno → EventCalendar
• Cronologia eventi singola (non gridata per risorsa) → Timeline
• Selezione di una singola data → DatePicker (categoria forms)