Needless UI

Komponen

Penjadwal

Tampilkan acara per bulan, minggu, hari, atau agenda, lalu seret ke tempatnya.

Impor

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

NuiScheduler

Acara per bulan, minggu, hari, atau dalam agenda.

Selektor
nui-scheduler
NamaTipeDefaultDeskripsi
eventsInputNuiSchedulerEvent<T>[][]Acara yang ditampilkan.
viewDua arah'month' | 'week' | 'day' | 'agenda''week'Tampilan saat ini.
viewsInputNuiSchedulerView[]all fourTampilan yang bisa dipilih pengguna.
dateDua arahNuiDatetodayHari yang ditampilkan, sekaligus posisi keyboard.
slotMinutesInputnumber30Menit per baris grid waktu, sekaligus langkah pergeseran acara.
scrollHourInputnumber8Jam yang terlihat saat grid waktu dibuka.
agendaDaysInputnumber30Berapa hari ke depan yang dicakup agenda.
editableInputbooleanfalseAcara bisa dipindah dan diubah ukurannya, dengan pointer maupun keyboard.
selectableInputbooleanfalseWaktu bisa dipilih di grid untuk membuat acara.
firstDayInput1 … 7Hari pertama dalam minggu, 1 untuk Senin. Default-nya mengikuti locale.
headingLevelInputnumber2Level heading untuk judul; hari-hari di agenda satu level lebih dalam.
localeInputstringLOCALE_IDMemformat hari dan waktu.
labelsInputPartial<NuiSchedulerLabels>Semua teks yang ditampilkan atau diumumkan penjadwal, untuk diterjemahkan.
cornersInputNuiCornersBentuk sudut: round, squircle, bevel, scoop, notch, atau square.
radiusInputNuiRadiusSeberapa bulat sudutnya: none, small, medium, large, atau full.
densityInputNuiDensitySeberapa banyak ruang yang digunakan komponen: compact, regular, atau roomy.
eventClickOutputNuiSchedulerEvent<T>Mengirimkan acara yang diklik, atau dibuka dengan Enter.
eventChangeOutput{ event, start, end }Mengirimkan waktu baru acara setelah dipindah atau diubah ukurannya.
slotSelectOutput{ start, end, allDay }Mengirimkan waktu yang dipilih di grid.
rangeChangeOutput{ start, end }Mengirimkan hari pertama dan terakhir yang ditampilkan saat keduanya berubah.

Input kustomisasi yang tidak Anda atur akan mengikuti atribut data-nui-* terdekat. Lihat panduan kustomisasi.

NuiSchedulerEvent

Sebuah acara. Akhir acara berwaktu tidak termasuk; akhir acara sepanjang hari adalah hari terakhirnya.

NamaTipeDefaultDeskripsi
id, titlePropertistringKuncinya, dan teks yang ditampilkannya.
start, endPropertiNuiDateTime | NuiDateTanggal dan waktu, atau tanggal saja untuk acara sepanjang hari.
allDayPropertibooleanDefault-nya aktif jika start tidak memiliki waktu.
toneProperti'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'Warnanya.
editablePropertibooleanApakah acara ini bisa dipindah, apa pun pengaturan penjadwal.
dataPropertiTData lain apa pun yang ingin disimpan bersamanya.

NuiSchedulerEventTemplate

Menggambar acara. Konteksnya berisi acara dan waktunya dalam bentuk teks.

Selektor
ng-template[nuiSchedulerEvent]