WeekScheduler

Import

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

Esempio Base

Props

SchedulerResource

SchedulerEvent

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).

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"
>
  <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) e la griglia ha min-width: 900px per evitare collasso eccessivo su viewport stretti
• Eventi con resourceId non presente in resources vengono ignorati nel rendering (non si crea una riga fantasma)

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

TypeScript

import type {
  WeekSchedulerProps,
  WeekSchedulerEmits,
  SchedulerResource,
  SchedulerEvent,
  SchedulerCellClickPayload,
  SchedulerEventClickPayload,
} 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)