Data

EventCalendar

Calendario mensile con griglia di navigazione, gestione eventi e sidebar laterale con elenco eventi del giorno selezionato.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`Date \| null`	`null`	Data selezionata (supporta `v-model`)
`events`	`CalendarEvent[]`	`[]`	Array di eventi da visualizzare nel calendario
`firstDayOfWeek`	`number`	locale (`it-IT`: 1)	Primo giorno della settimana (0 = Domenica, 1 = Lunedi')
`dayNamesShort`	`string[]`	locale	Nomi brevi dei giorni (sovrascrive il locale)
`monthNames`	`string[]`	locale	Nomi dei mesi (sovrascrive il locale)
`showEventsSidebar`	`boolean`	`true`	Mostra la sidebar con gli eventi del giorno selezionato
`sidebarColor`	`'primary' \| 'success' \| 'info' \| 'warn' \| 'danger'`	`'success'`	Colore tema della sidebar
`disabled`	`boolean`	`false`	Disabilita la selezione delle date
`locale`	`string`	`'it-IT'`	Locale per la formattazione delle date

CalendarEvent

Proprieta'	Tipo	Descrizione
`id`	`string \| number`	Identificatore univoco dell'evento (obbligatorio)
`title`	`string`	Titolo dell'evento (obbligatorio)
`date`	`Date`	Data dell'evento (obbligatorio)
`description`	`string`	Descrizione dell'evento
`color`	`string`	Colore custom per l'evento

Emits

Evento	Payload	Descrizione
`update:modelValue`	`Date \| null`	Emesso quando cambia la data selezionata
`dateSelect`	`Date`	Emesso quando l'utente clicca su una data
`monthChange`	`{ month: number, year: number }`	Emesso quando cambia il mese visualizzato
`eventClick`	`CalendarEvent`	Emesso quando si clicca su un evento nella sidebar
`createEvent`	`Date`	Emesso quando si clicca sul pulsante "Crea evento" nella sidebar

Esempi

Senza Sidebar

Sidebar con Colori Diversi

Gestione Completa degli Eventi

Prima settimana dal Lunedì

Note Comportamento

La griglia del calendario e' sempre di 42 celle (6 settimane x 7 giorni), includendo i giorni del mese precedente e successivo per riempire le righe
I giorni con eventi mostrano un indicatore visivo nella cella (has-event)
La sidebar mostra automaticamente gli eventi del giorno selezionato, filtrati per data
La navigazione anno avviene tramite i pulsanti prev/next nell'intestazione; la navigazione mese avviene cliccando sui nomi dei mesi
I valori di firstDayOfWeek, dayNamesShort e monthNames vengono letti dal sistema i18n di @pzeta/vue-i18n se non specificati esplicitamente
Il cambio di modelValue dall'esterno aggiorna automaticamente il mese visualizzato

Accessibilita'

Le celle del calendario sono elementi <button> nativi con attributo disabled quando il calendario e' disabilitato
Il giorno corrente, il giorno selezionato e i giorni con eventi ricevono classi CSS distinte (today, selected, has-event)

TypeScript

import type { EventCalendarProps, EventCalendarEmits, CalendarEvent } from '@pzeta/vue-components'

const events: CalendarEvent[] = [
  {
    id: 1,
    title: 'Evento di esempio',
    date: new Date('2024-03-15'),
    description: 'Descrizione opzionale',
    color: '#3b82f6',
  },
]

DataView

Componente per visualizzare collezioni di dati in layout lista o griglia, con paginazione e ordinamento integrati. I template list e grid sono completamente personalizzabili tramite slot.

Galleria

Galleria immagini con strip di thumbnail, navigazione, indicatori, autoplay e supporto fullscreen.