Photo by Vincent van Zalinge on Unsplash

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.

Google Calendar…

Adım 1 Bunun ekranı için boş bir Scheduling sayfası oluşturalım.

Scheduling Page

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 moment

Adım 3. Zaman Planlaması takvimi oluşturmak için aşağıdaki kodu yani DndCalendar yapısını ekleyelim…

DndCalendar yapısı

Artık Takvim ve Acendamız hazır.

Takvim 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.

Takvim’e Event Ekleme

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.

Takvime Eklenen Eventin Detayı

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…

Event Taşıma

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.

Event Taşımayı State yazalım

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.

Event Tarih Aralıığını Geliştirme / Azaltma

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store