datetime_slots
Güne göre gruplanmış, dokunulabilir müsaitlikler.
Gerçekten seçebileceğiniz saatler. datetime_slots, model zaman damgaları sağladığında takvim gününe göre gruplanmış en fazla 24 müsaitlik aralığını çip olarak render eder.
Gruplama bir süs değildir. İki güne yayılan düz bir “09:00 11:30 09:30 13:00” dizisi, yaşanmayı bekleyen bir rezervasyon hatasıdır; bu nedenle blok bunu render etmeyi reddeder.
Ekran görüntüsü değildir; tarayıcınızda SDK'nın kendi boyut ve renkleriyle canlı olarak çizilir.
Flutter SDK ve Web SDK ile, her ikisi de 0.1.0 sürümünden itibaren yerel olarak render edilir. Dokunmalar, Flutter 0.37.0 ve Web 0.14.0 sürümünden itibaren id ile bir seçim olarak geri döner.
Ne zaman kullanılmamalı
Aylar sonrasına ait bir tarih istemek için bunu kullanmayın; çünkü yirmi dört çip bunu karşılamaya yetmez. Kısıt müsaitlik olmadığında, date alanına sahip bir form doğru tercihtir.
Rezervasyonu onaylamak için de kullanmayın. Bir aralık seçildikten sonra, neyin rezerve edildiğinin özeti booking_card bileşenidir.
Props
Her blok ayrıca type ve 1 ila 300 karakter uzunluğunda zorunlu bir fallback_text taşır.
| Prop | Tür | Zorunlu | Kısıtlamalar |
|---|---|---|---|
title | string | Hayır | En fazla 120 karakter. |
slots | array | Evet | 1 ila 24 öğe. |
slots[].id | string | Evet | 1 ila 64 karakter. Alana dokunulduğunda son kullanıcının tercihi olarak geri gönderilir ve alanı işaretlemek için kullanılır. |
slots[].label | string | Evet | 1 ila 60 karakter. Genellikle bir saat bilgisi. |
slots[].starts_at | string | Hayır | UTC biçiminde ISO 8601 (...Z); sayısal bir fark doğrulamadan geçmez. Bunu sağladığınızda zaman aralıkları, cihazın yerel saat diliminde günlere göre gruplanır. |
slots[].available | boolean | Hayır | Yok |
Ağ üzerinde
{
"id": "blk_12",
"type": "datetime_slots",
"fallback_text": "Three fitting slots across 2 and 3 September.",
"props": {
"title": "Fitting at Neon Kicks Amsterdam",
"slots": [
{ "id": "s1", "label": "10:00", "starts_at": "2026-09-02T10:00:00Z" },
{ "id": "s2", "label": "11:30", "starts_at": "2026-09-02T11:30:00Z" },
{ "id": "s4", "label": "09:30", "starts_at": "2026-09-03T09:30:00Z" }
]
}
}Etkileşim
Bir dokunma, aralığı asla bir cümle olarak değil, selection ({ "block_id": "blk_12", "ids": ["s1"] }) biçiminde id ile geri gönderir. Sunucu, id değerini çizdiği bloğa göre kontrol eder ve bloğun sunmadığı bir değeri reddeder. Model bunu Selected on blk_12: 10:00 (s1) olarak okur. Aralık, yalnızca seçim iletildikten sonra seçildi olarak işaretlenir; bu nedenle önceki tur hâlâ açıkken düşen bir dokunma satırı değiştirmez. onSelect değerini null bırakan özel bir RendelDispatcher, aralıkları düz içerik olarak çizer.
Etiketler tabular rakamlarla render edilir; böylece saatlerden oluşan bir satır render işlemleri arasında yeniden düzenlenmez.
Durumlar
| Durum | SDK'nın çizdiği |
|---|---|
| Seçili | Dokunulan çip vurgu rengiyle dolar ve siyaha yakın bir etiketi korur. Dolgu aniden değişmek yerine yumuşak bir geçiş yapar. |
| Zaman damgası yok | Aralıklar gün başlığı olmaksızın tek bir düz grup olarak render edilir. Blok, kendisine verilmeyen bir gruplamayı kendiliğinden üretmez. |
| Boş | Boş bir slots dizisi, plaka içinde fallback_text render eder. |
| Yükleniyor | Bir başlık çubuğu ve 44pt boyutunda dört adet hap yer tutucu. |
Erişilebilirlik
Gün başlıkları altlarındaki çiplerden önce okunur; böylece bir ekran okuyucu kullanıcısı yalın bir saat yerine sırasıyla “Wed 2 Sep, 10:00” ifadesini duyar. Seçilen bir çip “10:00, selected” duyurusu yapar.
fallback_text, kaç aralık olduğunu ve bunların hangi günlere yayıldığını belirtmelidir.