Needless UI

Mga component

Scheduler

Mga event sa isang buwan, linggo, araw o agenda, na puwedeng i-drag sa puwesto.

Import

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

NuiScheduler

Mga event sa isang buwan, linggo, araw o agenda.

Selector
nui-scheduler
PangalanUriDefaultPaglalarawan
eventsInputNuiSchedulerEvent<T>[][]Ang mga event na ipapakita.
viewTwo-way'month' | 'week' | 'day' | 'agenda''week'Ang ipinapakitang view.
viewsInputNuiSchedulerView[]all fourAng mga view na puwedeng pagpalipat-lipatan.
dateTwo-wayNuiDatetodayAng ipinapakitang araw, at kung nasaan ang keyboard.
slotMinutesInputnumber30Mga minuto bawat row ng time grid, at ang step ng paglipat ng mga event.
scrollHourInputnumber8Ang oras kung saan bumubukas ang time grid.
agendaDaysInputnumber30Ilang araw pasulong ang sakop ng agenda.
editableInputbooleanfalsePuwedeng ilipat at i-resize ang mga event, gamit ang pointer at keyboard.
selectableInputbooleanfalsePuwedeng pumili ng oras sa grid, para gumawa ng mga event.
firstDayInput1 … 7Ang unang araw ng linggo, 1 para sa Lunes. Default ang sa locale.
headingLevelInputnumber2Ang heading level ng title; isang level na mas malalim ang mga araw ng agenda.
localeInputstringLOCALE_IDFino-format ang mga araw at oras.
labelsInputPartial<NuiSchedulerLabels>Bawat text na ipinapakita o ina-announce ng scheduler, para maisalin.
cornersInputNuiCornersAng hugis ng mga sulok nito: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusKung gaano kabilog ang mga sulok nito: none, small, medium, large o full.
densityInputNuiDensityKung gaano kalaking espasyo ang kinukuha nito: compact, regular o roomy.
eventClickOutputNuiSchedulerEvent<T>Inilalabas ang event na na-click, o binuksan gamit ang Enter.
eventChangeOutput{ event, start, end }Inilalabas ang mga bagong oras ng event pagkatapos itong ilipat o i-resize.
slotSelectOutput{ start, end, allDay }Inilalabas ang oras na pinili sa grid.
rangeChangeOutput{ start, end }Inilalabas ang una at huling araw na ipinapakita kapag nagbago ang mga ito.

Sinusunod ng mga customization input na hindi mo sine-set ang pinakamalapit na data-nui-* attribute. Tingnan ang gabay sa pag-customize.

NuiSchedulerEvent

Isang event. Hindi kasama ang dulo ng event na may oras; ang huling araw naman ang dulo ng all-day event.

PangalanUriDefaultPaglalarawan
id, titlePropertystringAng key nito, at ang ipinapakita nito.
start, endPropertyNuiDateTime | NuiDateMga petsa at oras, o mga petsa lang para sa mga all-day event.
allDayPropertybooleanBilang default, all-day ito kapag walang oras ang start.
toneProperty'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'Ang kulay nito.
editablePropertybooleanKung puwede itong ilipat, anuman ang sabihin ng scheduler.
dataPropertyTKahit anong iba pang itatabi kasama nito.

NuiSchedulerEventTemplate

Iginuguhit ang mga event. Nasa context ang event at ang oras nito bilang text.

Selector
ng-template[nuiSchedulerEvent]