Forms

Calendar

Calendario inline standalone per la selezione di date in modalita singola, multipla o intervallo. Non include input testuale — usare DatePicker per il pattern input+popup.

Import

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

Esempio Base

Il Calendar e sempre visibile (inline). Per un selettore con input testuale e popup, usare DatePicker.

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`Date \| Date[] \| null`	`null`	Valore corrente (v-model)
`severity`	`Severity`	`'primary'`	Colore del tema per la data selezionata
`selectionMode`	`'single' \| 'multiple' \| 'range'`	`'single'`	Modalita di selezione
`minDate`	`Date`	—	Data minima selezionabile
`maxDate`	`Date`	—	Data massima selezionabile
`disabledDates`	`Date[]`	`[]`	Lista di date disabilitate
`disabledDays`	`number[]`	`[]`	Giorni della settimana disabilitati (0=Dom, 6=Sab)
`showQuickOptions`	`boolean`	`true`	Mostra opzioni rapide (Oggi, Domani, Dopodomani)
`quickOptions`	`CalendarQuickOption[]`	—	Sostituisce le opzioni rapide predefinite
`firstDayOfWeek`	`number`	locale	Primo giorno della settimana (0=Dom, 1=Lun)
`showWeekNumbers`	`boolean`	`false`	Mostra numeri di settimana nella colonna sinistra
`inline`	`boolean`	`false`	Forza visualizzazione inline
`disabled`	`boolean`	`false`	Disabilita tutte le interazioni
`readonly`	`boolean`	`false`	Sola lettura
`showActionButtons`	`boolean`	`false`	Mostra bottoni Conferma/Annulla in fondo

Emits

Evento	Payload	Descrizione
`update:modelValue`	`Date \| Date[] \| null`	Aggiornamento valore (v-model)
`dateSelect`	`Date`	Data cliccata
`monthChange`	`{ month: number; year: number }`	Cambio mese nella navigazione
`yearChange`	`number`	Cambio anno nella navigazione
`confirm`	`Date \| Date[] \| null`	Conferma selezione (con `showActionButtons`)
`cancel`	—	Annullamento (con `showActionButtons`)

Slot

Slot	Descrizione
`header`	Contenuto aggiuntivo nell'area superiore del calendario
`footer`	Contenuto aggiuntivo nell'area inferiore del calendario

Tipi Correlati

export interface CalendarQuickOption {
  label: string
  value: Date | (() => Date)
}

export interface CalendarDay {
  date: Date
  day: number
  isCurrentMonth: boolean
  isToday: boolean
  isSelected: boolean
  isDisabled: boolean
}

Esempi

Selezione multipla

Selezione intervallo

Con date disabilitate

<script setup lang="ts">
const today = new Date()
const disabledDates = [
  new Date(today.getFullYear(), today.getMonth(), 15),
  new Date(today.getFullYear(), today.getMonth(), 20),
]
</script>

<template>
  <Calendar
    v-model="selectedDate"
    :disabled-dates="disabledDates"
    :disabled-days="[0, 6]"
  />
</template>

Con opzioni rapide personalizzate

<script setup lang="ts">
import type { CalendarQuickOption } from '@pzeta/vue-components'

const quickOptions: CalendarQuickOption[] = [
  { label: 'Oggi', value: () => new Date() },
  { label: 'Fine settimana', value: () => {
    const d = new Date()
    d.setDate(d.getDate() + (6 - d.getDay()))
    return d
  }},
]
</script>

<template>
  <Calendar v-model="selectedDate" :quick-options="quickOptions" />
</template>

Con bottoni conferma

<Calendar
  v-model="selectedDate"
  show-action-buttons
  @confirm="handleConfirm"
  @cancel="handleCancel"
/>

Accessibilita

Navigazione mese/anno tramite pulsanti con aria-label localizzati
Ogni giorno e selezionabile da tastiera
Le date disabilitate ricevono aria-disabled="true"

TypeScript

import type { CalendarProps, CalendarQuickOption, CalendarDay } from '@pzeta/vue-components'

// Selezione singola
const singleDate = ref<Date | null>(null)

// Selezione multipla o intervallo
const multiDate = ref<Date[]>([])

AutoComplete

Campo di input con suggerimenti automatici caricati dinamicamente tramite l'evento complete. Supporta selezione singola e multipla (chips), dropdown button e forceSelection.

Checkbox

Casella di spunta con supporto per modalità binaria, selezione multipla tramite array, stato indeterminato e loading.