Data

YearCalendar

Overview annuale a 12 mini-mesi in griglia responsive con eventi puntuali per giorno (pallino colorato per tipo, tooltip e drill-down via day-click).

Import

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

Esempio Base

Anno intero con ferie, permessi e festività colorati per tipo. Il click su un giorno emette day-click con la data e gli eventi associati.

Props

Prop	Tipo	Default	Descrizione
`year`	`number`	(required)	Anno da visualizzare (i 12 mesi vengono generati a partire da questo valore)
`events`	`YearCalendarEvent[]`	(required)	Elenco degli eventi puntuali da posizionare sui giorni
`coloriPerTipo`	`Record<string, string>`	`{}`	Mappa `type` → colore CSS del pallino; usata quando l'evento non specifica `color`
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	Primo giorno della settimana (0 = domenica, 1 = lunedì)
`locale`	`string`	`'it-IT'`	Locale `Intl.DateTimeFormat` per i nomi di mesi e giorni
`todayHighlight`	`boolean`	`true`	Evidenzia con sfondo blu il giorno corrente

YearCalendarEvent

Proprietà	Tipo	Descrizione
`date`	`string`	Data ISO `YYYY-MM-DD` del giorno a cui appartiene l'evento
`type`	`string`	Tipo evento; usato come chiave in `coloriPerTipo` e come fallback del tooltip
`color`	`string`	Colore CSS esplicito del pallino; ha precedenza su `coloriPerTipo`
`tooltip`	`string`	Testo mostrato come tooltip (attributo `title`) sul giorno

Slots

Slot	Props	Descrizione
`monthHeader`	`{ name: string, index: number }`	Override dell'intestazione di ogni mini-mese; `name` è il nome localizzato, `index` l'indice del mese (0-11)

Emits

Evento	Payload	Descrizione
`day-click`	`{ date: string, events: YearCalendarEvent[] }`	Emesso al click su un giorno valido; fornisce la data ISO e tutti gli eventi di quel giorno (il click sulle celle vuote di riempimento non emette nulla)

Esempi

Colore esplicito per singolo evento

Il campo color sull'evento ha la precedenza su coloriPerTipo: utile per evidenziare un singolo giorno con un colore diverso dagli altri dello stesso tipo.

Intestazione mese custom

Lo slot #monthHeader consente di personalizzare il titolo di ogni mini-mese (es. nome abbreviato in maiuscolo).

Settimana che inizia di domenica

Imposta week-starts-on a 0 per allineare la griglia alla domenica come primo giorno.

Note Comportamento

Ogni mini-mese è una griglia 7 colonne con celle di riempimento iniziali (giorni null) per allineare il primo giorno del mese alla colonna corretta secondo weekStartsOn
Gli eventi vengono indicizzati per date in un Map ricalcolato in modo reattivo su events: più eventi possono insistere sullo stesso giorno
Per ogni giorno vengono mostrati al massimo 3 pallini (slice(0, 3)); gli eventi oltre il terzo restano comunque inclusi nel payload day-click e nel tooltip
Il colore del pallino è risolto nell'ordine: event.color → coloriPerTipo[event.type] → #3b82f6 (blu di default)
Il tooltip aggrega gli eventi del giorno usando tooltip (o type come fallback) separati da virgola
Il click su una cella di riempimento (giorno null) non emette day-click
La griglia dei mesi è responsive: 1 colonna su mobile, 2 (sm:), 3 (md:), 4 (lg:)

TypeScript

import type {
  YearCalendarProps,
  YearCalendarEmits,
  YearCalendarEvent,
  YearCalendarDayClickPayload,
} from '@pzeta/vue-components'

const events: YearCalendarEvent[] = [
  { date: '2026-04-06', type: 'ferie', tooltip: 'Ferie' },
  { date: '2026-12-25', type: 'festivita', tooltip: 'Natale' },
]

const onDayClick = (payload: YearCalendarDayClickPayload) => {
  console.log('giorno', payload.date, 'eventi', payload.events.length)
}

Quando usarlo

Overview annuale di ferie, permessi, festività e presenze (HR / pianificazione)
Vista d'insieme di eventi puntuali distribuiti su un intero anno, con drill-down per giorno
Heatmap-like leggera basata su tipologia di evento

Per casi diversi:

Heatmap a intensità stile GitHub (densità per valore) → HeatmapCalendar
Planner settimanale risorsa × giorno → WeekScheduler
Vista mese con sidebar eventi del giorno → EventCalendar

WeekScheduler

Griglia settimanale risorsa x giorno (es. autisti x giorni della settimana) con slot personalizzabili per intestazioni, celle ed eventi. Pensato per planner, scheduler, gestione turni e assegnazioni.

Data

Componenti per visualizzazione e manipolazione dati — DataTable, TreeTable, Tree, DataView, Carousel, Image, Galleria, Timeline, TimelineWorkflow, Paginator, Chart, EventCalendar, WeekScheduler, YearCalendar, HeatmapCalendar, GanttTimeline, PivotTable, QRCode, PdfViewerEmbedded, Inplace, Knob, OrderList, PickList.