REACT UI MECHANICS
React ile Admin Tool Geliştirelim — Takvim ve Zaman Planlama
React UI Mekanikleri konusunda önceki yazı serisini içerikleri kapsayacak bir senaryo geliştirmeye karar verdim. Bu konuda bir eTicaret sitesinin yönetiminde kullanılacak bir araç tasarlamaya çalışacağız.
Not: Bu yazı daha önce yazılan bir serinin parçası olduğu için, önceki yazılar ile ilgili kapsamı bu yazıdan erişebilirsiniz.
Bu yazımızda ekranda bir takvim üzerinde Google Calendar benzeri zaman planlamaları oluşturmaya çalışalım.
Adım 1 Bunun ekranı için boş bir Scheduling sayfası oluşturalım.
Adım 2 React-Big-Calendar kütüphanesi planlama işlemlerinizin bir çoğunu yapabilmenizi sağlayacak altyapıya sahip. Öncelikle bu kütüphaneyi indirelim.
yarn add react-big-calendar
yarn add momentAdım 3. Zaman Planlaması takvimi oluşturmak için aşağıdaki kodu yani DndCalendar yapısını ekleyelim…
Artık Takvim ve Acendamız hazır.
Adım 4 (Event Ekleme) Kullanıcının takvime Event ekleyebilmesini sağlatalım.. Bunun için selectable seçili hale getirip handleSelectSlot sırasın event yakalayıp bunun için başlık isteyip bunu events listesine yeni bir event olarak ekliyoruz.
Adım 5. (Event Detayı Görüntüleme) Kullanıcı eklenen bir eventin detaylarını görmek istediğinde ise onSelectEvent ilgili eventi yakalarak gelen event objesindeki veriyi ekranda gösteririz.
Adım 6 (Eventi Taşımak). Oluşturduğumuz bir eventi başka bir noktaya taşımak istiyorsak. onEventDrop event gelen Event içerisine bakalım önce…
Gelen verinin içerisinde taşınan Event’in bilgileri ile yeni taşınma bilgileri var. Bu durumda yapmamız gereken önceki Eventi bulup State bunu silecek, daha sonrada yeni tarih aralıkları ile bir Event eklemeyeceğiz. Aşağıdaki kodda bu işlemi yapıyor.
Adım 7(Eventi Tarih Aralığını Genişletmek). Bulunan bir eventin zaman aralığını arttırmak isteyelim. Bileşenin resizable ekleyelim onEventResize yine eski eventi silip, yeni gelen tarih aralıklarını atayalım.
GitHub Kod Örneği
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
