Needless UI

Componenti

Pianificatore

Eventi in un mese, una settimana, un giorno o un’agenda, trascinati al loro posto.

Import

import-scheduler.ts
import { NuiScheduler, type NuiSchedulerEvent } from '@needless-ui/angular/scheduler';

NuiScheduler

Eventi in un mese, una settimana, un giorno o un’agenda.

Selettore
nui-scheduler
NomeTipoPredefinitoDescrizione
eventsInputNuiSchedulerEvent<T>[][]Gli eventi da mostrare.
viewBidirezionale'month' | 'week' | 'day' | 'agenda''week'La vista mostrata.
viewsInputNuiSchedulerView[]all fourLe viste tra cui si può passare.
dateBidirezionaleNuiDatetodayIl giorno mostrato, dove si trova anche il focus da tastiera.
slotMinutesInputnumber30Minuti per riga della griglia oraria, e il passo con cui si spostano gli eventi.
scrollHourInputnumber8L’ora a cui si apre la griglia oraria.
agendaDaysInputnumber30Quanti giorni in avanti mostra l’agenda.
editableInputbooleanfalseGli eventi si possono spostare e ridimensionare, con il puntatore e da tastiera.
selectableInputbooleanfalseSi può scegliere un orario sulla griglia, per creare eventi.
firstDayInput1 … 7Il primo giorno della settimana, 1 per lunedì. Di default, quello del locale.
headingLevelInputnumber2Il livello di intestazione del titolo; i giorni dell’agenda scendono di un livello.
localeInputstringLOCALE_IDFormatta giorni e orari.
labelsInputPartial<NuiSchedulerLabels>Ogni testo che il pianificatore mostra o annuncia, da tradurre.
cornersInputNuiCornersLa forma degli angoli: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusQuanto sono grandi gli angoli: none, small, medium, large o full.
densityInputNuiDensityQuanto spazio occupa: compact, regular o roomy.
eventClickOutputNuiSchedulerEvent<T>Emette un evento cliccato, o aperto con Invio.
eventChangeOutput{ event, start, end }Emette i nuovi orari di un evento dopo uno spostamento o un ridimensionamento.
slotSelectOutput{ start, end, allDay }Emette l’orario scelto sulla griglia.
rangeChangeOutput{ start, end }Emette il primo e l’ultimo giorno mostrati quando cambiano.

Gli input di personalizzazione che non imposti seguono l’attributo data-nui-* più vicino. Vedi la guida alla personalizzazione.

NuiSchedulerEvent

Un evento. La fine di un evento con orario è esclusa; quella di un evento di tutto il giorno è il suo ultimo giorno.

NomeTipoPredefinitoDescrizione
id, titleProprietàstringLa sua chiave, e cosa mostra.
start, endProprietàNuiDateTime | NuiDateDate e orari, o solo date per gli eventi di tutto il giorno.
allDayProprietàbooleanDi default, se start non ha un orario.
toneProprietà'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'Il suo colore.
editableProprietàbooleanSe si può spostare, qualunque cosa dica il pianificatore.
dataProprietàTQualsiasi altra cosa da tenere insieme all’evento.

NuiSchedulerEventTemplate

Disegna gli eventi. Il contesto contiene l’evento e il suo orario come testo.

Selettore
ng-template[nuiSchedulerEvent]