React için Planlayıcı API’si

İçe aktarma

import-scheduler.tsx

import { NuiScheduler, type NuiSchedulerHandle } from '@needless-ui/react/scheduler';

NuiScheduler

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

NuiScheduler: Özellikler
Ad	Tür	Varsayılan	Açıklama
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	Gösterilecek etkinlikler.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Odalar, kişiler ya da makineler: zaman çizelgesinin satırları, gün ve hafta görünümlerinin sütunları.
`view` `defaultView` `onViewChange`Durum	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	Gösterilen görünüm.
`views`Prop	`NuiSchedulerView[]`	`all`	Kullanıcıların arasında geçiş yapabileceği görünümler. Varsayılan olarak hepsi; zaman çizelgesi yalnızca kaynaklar varsa.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	Zaman çizelgesinin ne gösterdiği: zaman dilimlerine bölünmüş bir gün ya da günlerine bölünmüş bir hafta veya ay.
`date` `defaultDate` `onDateChange`Durum	`NuiDate`	`today`	Gösterilen gün; klavye odağı da buradadır. Planlayıcıyı bir sunucu render ediyorsa `defaultDate` verin: sunucunun bugünü okuyucununkiyle aynı olmayabilir.
`slotMinutes`Prop	`number`	`30`	Zaman ızgarasında satır başına ya da bir günün zaman çizelgesinde sütun başına dakika.
`snapMinutes`Prop	`number`	`slotMinutes`	Etkinliklerin taşınma ve yeniden boyutlandırılma adımı.
`dayStart, dayEnd`Prop	`number`	`0, 24`	Zaman ızgarasının hangi saatten hangi saate kadar gösterdiği.
`scrollHour`Prop	`number`	`8`	Zaman ızgarasının açıldığı saat.
`agendaDays`Prop	`number`	`30`	Ajandanın kaç gün ileriye baktığı.
`businessHours`Prop	`NuiSchedulerHours[]`		Çalışma saatleri; örneğin `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. Diğer zamanlar gölgelenir.
`weekends`Prop	`boolean`	`true`	Hafta sonunu gösterir. Kapalıysa her görünüm, yerel ayarın hafta sonunu dışarıda bırakır.
`weekNumbers`Prop	`boolean`	`false`	ISO hafta numaralarını ay görünümünde ve saatlerin üstünde gösterir.
`editable`Prop	`boolean`	`false`	Etkinlikler işaretçiyle ve klavyeyle taşınabilir ve yeniden boyutlandırılabilir.
`selectable`Prop	`boolean`	`false`	Etkinlik oluşturmak için ızgarada zaman seçilebilir.
`allow`Prop	`(time) => boolean`		Bir taşımanın, yeniden boyutlandırmanın ya da zaman seçiminin gerçekleşip gerçekleşemeyeceğine karar verir.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Araç çubuğunu gösterir; bir fonksiyon verilirse aldığı bilgilerle kendi araç çubuğunuzu çizer.
`firstDay`Prop	`1 … 7`		Haftanın ilk günü; pazartesi için 1. Varsayılan: yerel ayarınki.
`headingLevel`Prop	`number`	`2`	Başlığın düzeyi; ajandadaki günler bir düzey daha derindir.
`locale`Prop	`string`	`'en-US'`	Günleri ve saatleri biçimlendirir.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Planlayıcının gösterdiği veya duyurduğu her metin; çeviri için.
`corners`Prop	`NuiCorners`		Köşelerin şekli: `round`, `squircle`, `bevel`, `scoop`, `notch` veya `square`.
`radius`Prop	`NuiRadius`		Köşelerin ne kadar yuvarlatıldığı: `none`, `small`, `medium`, `large` veya `full`.
`density`Prop	`NuiDensity`		Bileşenin ne kadar yer kapladığı: `compact`, `regular` veya `roomy`.
`renderEvent`Render prop	`(event, { time }) => ReactNode`		Etkinlikleri kendiniz çizmenizi sağlar; etkinliği ve zamanını metin olarak alır.
`renderResource`Render prop	`(resource) => ReactNode`		Kaynak başlıklarını kendiniz çizmenizi sağlar.
`onEventClick`Geri çağırma	`(event: NuiSchedulerEvent<T>) => void`		Tıklanan ya da Enter ile açılan etkinlikle çağrılır.
`onEventChange`Geri çağırma	`({ event, start, end, resource? }) => void`		Taşıma veya yeniden boyutlandırmanın ardından etkinliğin yeni zamanlarıyla, kaynakları değiştiyse onlarla da çağrılır. Değişikliği korumak için `events` dizisini güncelleyin.
`onSlotSelect`Geri çağırma	`({ start, end, allDay, resource? }) => void`		Izgarada seçilen zaman ve kaynağıyla çağrılır.
`onRangeChange`Geri çağırma	`({ start, end }) => void`		Gösterilen ilk ve son gün değiştiğinde, o günlerin etkinliklerini yükleyebilmeniz için bunlarla çağrılır.
`ref`Prop	`Ref<NuiSchedulerHandle>`		Planlayıcının `ref` üzerinden sundukları: kendi araç çubuğunuz için sayfalar arasında gezinme.
`previous, next, goToday`Metot	`() => void`		Kendi araç çubuğunuz için önceki ya da sonraki sayfayı veya bugünü gösterir.
`title`Özellik	`string`		Gösterilen aralık, araç çubuğunun başlığında yazıldığı gibi.

Durum, React’in kendi form öğeleri gibi çalışır: bir değer verip onu on…Change geri çağırmasıyla güncelleyin ya da bir default… değeri verip onu bileşenin tutmasına bırakın.

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

NuiSchedulerToolbar

Kendi araç çubuğunuzu çizmek için bir toolbar fonksiyonunun aldığı bilgiler.

NuiSchedulerToolbar: Özellikler
Ad	Tür	Açıklama
`title`Özellik	`string`	Gösterilen aralık, araç çubuğunun başlığında yazıldığı gibi.
`view, views`Özellik	`NuiSchedulerView, NuiSchedulerView[]`	Gösterilen görünüm ve sunulan görünümler.
`setView, previous, next, goToday`Metot	`(view?) => void`	Görünümü değiştirir, önceki ya da sonraki sayfayı veya bugünü gösterir.

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.

NuiSchedulerEvent: Özellikler
Ad	Tür	Varsayılan	Açıklama
`id, title`Özellik	`string`		Anahtarı ve gösterdiği metin.
`start, end`Özellik	`NuiDateTime \| NuiDate`		Tarih ve saatler; tüm gün süren etkinlikler için yalnızca tarihler.
`allDay`Özellik	`boolean`		Varsayılan olarak, `start` saat içermiyorsa etkinlik tüm gün sürer.
`tone`Özellik	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Paleti.
`color, class`Özellik	`string`		Tonunun önüne geçen herhangi bir CSS rengi ve etkinliği biçimlendirecek sınıflar.
`resource`Özellik	`string \| string[]`		Ait olduğu kaynaklar.
`rrule`Özellik	`string`		RFC 5545 biçiminde bir yineleme kuralı; örneğin `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Özellik	`string[]`		Gerçekleşmeyecek tekrarların başlangıçları.
`recurrenceId`Özellik	`NuiDateTime \| NuiDate`		Planlayıcının bildirdiği bir tekrarda: kuralın ona verdiği başlangıç.
`editable`Özellik	`boolean`		Planlayıcının ayarı ne olursa olsun, etkinliğin taşınıp taşınamayacağı.
`data`Özellik	`T`		Etkinlikle birlikte saklanacak diğer her şey.

NuiSchedulerResource

Etkinliklerin ait olduğu bir oda, kişi ya da makine.

NuiSchedulerResource: Özellikler
Ad	Tür	Açıklama
`id, title`Özellik	`string`	Anahtarı ve gösterdiği ad.
`tone, color`Özellik	`NuiSchedulerTone, string`	Kendi renkleri yoksa etkinliklerinin renkleri.
`businessHours`Özellik	`NuiSchedulerHours[]`	Planlayıcının çalışma saatleri yerine, kaynağın müsait olduğu zamanlar.
`data`Özellik	`R`	Kaynakla birlikte saklanacak diğer her şey.

Helpers

Yinelenen etkinlikler ve iCalendar dosyaları için fonksiyonlar.

Helpers: Özellikler
Ad	Tür	Açıklama
`nuiSchedulerOccurrences`Metot	`(event, first, last) => NuiSchedulerEvent[]`	Bir etkinliğin verilen günlerdeki görünüşü: yinelenen bir etkinliğin her tekrarı.
`nuiSchedulerRule`Metot	`(text: string) => NuiSchedulerRule \| null`	Bir yineleme kuralını okur ya da null döndürür.
`nuiSchedulerToIcs`Metot	`(events, options?) => string`	Etkinlikleri bir iCalendar dosyası olarak yazar.
`nuiSchedulerFromIcs`Metot	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Bir iCalendar dosyasındaki etkinlikleri, zamanlarını tek bir saat dilimine çevirerek okur.