Needless UI

Bileşenler

Planlayıcı

Etkinlikleri ay, hafta, gün ya da ajanda görünümünde gösterin, sürükleyerek yerleştirin.

İçe aktarma

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

NuiScheduler

Ay, hafta, gün ya da ajanda görünümünde etkinlikler.

Seçici
nui-scheduler
AdTürVarsayılanAçıklama
eventsGirdiNuiSchedulerEvent<T>[][]Gösterilecek etkinlikler.
viewÇift yönlü'month' | 'week' | 'day' | 'agenda''week'Gösterilen görünüm.
viewsGirdiNuiSchedulerView[]all fourKullanıcıların arasında geçiş yapabileceği görünümler.
dateÇift yönlüNuiDatetodayGösterilen gün; klavye odağı da buradadır.
slotMinutesGirdinumber30Zaman ızgarasında satır başına dakika; etkinlikler de bu adımla taşınır.
scrollHourGirdinumber8Zaman ızgarasının açıldığı saat.
agendaDaysGirdinumber30Ajandanın kaç gün ileriye baktığı.
editableGirdibooleanfalseEtkinlikler işaretçiyle ve klavyeyle taşınabilir ve yeniden boyutlandırılabilir.
selectableGirdibooleanfalseEtkinlik oluşturmak için ızgarada zaman seçilebilir.
firstDayGirdi1 … 7Haftanın ilk günü; pazartesi için 1. Varsayılan: yerel ayarınki.
headingLevelGirdinumber2Başlığın düzeyi; ajandadaki günler bir düzey daha derindir.
localeGirdistringLOCALE_IDGünleri ve saatleri biçimlendirir.
labelsGirdiPartial<NuiSchedulerLabels>Planlayıcının gösterdiği veya duyurduğu her metin; çeviri için.
cornersGirdiNuiCornersKöşelerin şekli: round, squircle, bevel, scoop, notch veya square.
radiusGirdiNuiRadiusKöşelerin ne kadar yuvarlatıldığı: none, small, medium, large veya full.
densityGirdiNuiDensityBileşenin ne kadar yer kapladığı: compact, regular veya roomy.
eventClickÇıktıNuiSchedulerEvent<T>Tıklanan ya da Enter ile açılan etkinliği yayar.
eventChangeÇıktı{ event, start, end }Taşıma veya yeniden boyutlandırmanın ardından etkinliğin yeni zamanlarını yayar.
slotSelectÇıktı{ start, end, allDay }Izgarada seçilen zamanı yayar.
rangeChangeÇıktı{ start, end }Gösterilen ilk ve son gün değiştiğinde bunları yayar.

Ayarlamadığınız özelleştirme girdileri, değerlerini en yakın data-nui-* niteliğinden alır. Ayrıntılar için özelleştirme kılavuzuna bakın.

NuiSchedulerEvent

Bir etkinlik. Saatli bir etkinliğin bitişi dahil değildir; tüm gün süren bir etkinliğin bitişi ise son günüdür.

AdTürVarsayılanAçıklama
id, titleÖzellikstringAnahtarı ve gösterdiği metin.
start, endÖzellikNuiDateTime | NuiDateTarih ve saatler; tüm gün süren etkinlikler için yalnızca tarihler.
allDayÖzellikbooleanVarsayılan olarak, start saat içermiyorsa etkinlik tüm gün sürer.
toneÖzellik'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'Rengi.
editableÖzellikbooleanPlanlayıcının ayarı ne olursa olsun, etkinliğin taşınıp taşınamayacağı.
dataÖzellikTEtkinlikle birlikte saklanacak diğer her şey.

NuiSchedulerEventTemplate

Etkinlikleri çizer. Bağlam, etkinliği ve zamanını metin olarak içerir.

Seçici
ng-template[nuiSchedulerEvent]