Calendar elementi, uygulamanıza tekli, çoklu veya belirli bir tarih aralığı seçimi sunarak randevu yönetimi ve etkinlik planlama gibi zaman bazlı işlemleri kolayca hayata geçirmenizi sağlayan bir elementtir.
Uygulamanızda randevu yönetimi, etkinlik planlama veya zaman bazlı filtrelemeler yapmak istiyorsanız, en ideal çözüm Calendar elementini kullanmaktır. Bu element, tekli, çoklu veya belirli bir dönem için aralık seçimi sunarak süreçlerinizi akıcı hale getirir.
Öncelikle ekranda görmüş olduğunuz tabloyu Data Sources alanından oluşturun. Ardından sol paneldeki New SQL Action ile GetCalendarEventsAll isimli aksiyonu oluşturup sol tarafta tablonuzu bulun. Üç noktaya basın ve Add Select Query alanını seçin. Test edip kaydedin. Aynı işlemleri tıklanan etkinlik içeriğini getirmek için GetCalendarEvent adındaki aksiyon ile Add Select by ID Query tanımlamasını yapın.
UI Design modülüne geçin. Sol yan paneldeki Screens alanından Add Event adında yeni bir sayfa oluşturun. Sayfayı üst panelden mobil boyut olarak ayarlayın.
Sayfaya Add Screen Input butonundan StartDateInput adında ve DateTimeOffset türünde screen input ekleyin. Sayfaya bir Label ekleyin içerisine Create Event yazın Styling panelindeki Style alanından Heading 2 olarak fontu belirleyin. Label altına bir Vertical Stack elementi ekleyin ve içerisine bir Text Input elementi sürükleyin. Placeholder alanında Fixed Value içerisine Enter the Event Name yazın. Text Input elementi altına DateTimeRange ekleyip Start Value alanından Screen Inputs, Start Date Input tanımlamasını gerçekleştirin. Select Box elementini sayfanıza ekleyin. Options alanını Fixed Option List olarak seçin. Çıkan alandaki Add Field butonuna basın, açılan Key ve Text alanına Hex Kodları ve renk isimlerini girin. Sayfaya bir Button elementi ekleyin içerisindeki yazıyı Create olarak değiştirin. Properties panelindeki Icon alanından uygun sembolü buton içerisine ekleyebilir, Styling panelindeki Fill Color alanından butonun rengini değiştirebilirsiniz. Add Action ile onClick, ManageDB, Save Record adımlarını izleyin. Tablonuzu girin. Çıkan bütün seçenekleri seçin. Aksiyon içerisindeki alanlara component kategorisi içerisindeki ilgili alanları bağlayın. EndDate ve StartDate alanları için DateTimeRange1, value, EventTitle alanı için TextInput1, value, EventColorHex alanı için ise SelectBox1, value tanımlamalarını yapın. ID alanı için ise Default, New Guid olarak tanımlayın. Butona onClick, Navigation adımları ile Go Back aksiyonunu ekleyin. Butonun yanındaki boşluğa tıklayın ve Column alanını Styling panelindeki Layout alanından yatayda ve dikeyde ortalayın.
Sol panelden Screens alanından Add Event sayfasını yanındaki Duplicate seçeneğinden klonlayın. Klonladığınız sayfanın adını Event Detail olarak değiştirin. Bu ekrandaki Label içeriğini Event Details olarak güncelleyin. StartDateInput alanındaki Screen Input’u CalendarEventID adında güncelleyin, türü ise Guid olarak seçin. Initial Action olarak sayfaya GetCalendarEvent aksiyonu ekleyin. Açılan ID alanını Screen Inputs, CalendarEventID olarak seçin. Butonu Styling alanından sağa yaslayın ve Column alanı içerisine bir Horizontal Stack elementi ekleyin. Butonu içerisine sürükleyip çoğaltın. İlk buton içerisine Edit yazın ve ikonu değiştirin. Save Record içerisindeki ID alanını Screen Inputs, CalendarEventID olarak değiştirin. İkinci buton içerisine Delete yazın, ikonunuzu belirleyin ve Styling alanındaki Fill alanında rengi kırmızı olarak değiştirin. onClick, ManageDB ile Delete Record aksiyonu ekleyin. Tablo seçimini yapıp açılan ID alanını CalendarEventID olarak tanımlayın. Butona Add Action ile Navigation, Go Back aksiyonu ekleyin. TextInput elementinin Value alanını Action Result, GetCalendarEvent, First, EventTitle adımlarını izleyerek tanımlayın. Date Time Range elementini ise Action Result, GetCalendarEvent, First, StartDate olarak tanımlayın. EndValue alanını ise aynı adımları takip ederek EndDate olarak tanımlayın. HomePage sayfasına gelin. Initial Action ile daha önceden oluşturmuş olduğunuz GetCalendarEventsAll aksiyonunu ekleyin. Bir Label elementi ekleyip içerisine My Calendar yazısını yazın. Styling panelindeki Style alanı ile Heading 2 olarak fontu belirleyin. Calendar elementini sayfaya sürükleyip bırakın. Options alanından Action, Event ID Field, Event Title, StartDate, EndDate, Event Color Hex alanlarını sırasıyla tanımlayın. DisplayEventTime alanını açık olarak seçin. Add Action butonuna basın, onClickDay, Navigation, Navigate seçimlerini yapın. To Screen alanına Add Event sayfanızı tanımlayın. Açılan ikinci alanı CurrentDate olarak tanımlayın ve Open As alanını ise Drawer olarak seçin. Add Action ile onClickEvent, Navigation adımlarını izleyerek Navigate aksiyonu ekleyin. To Screen için Event Detail, CalendarEventID için currentEvent, ID olarak tanımlayın. Open As alanını ise Drawer olarak seçin.
Preview butonuna bastığınızda; etkinliklerinizi tarih aralıklarını belirleyerek oluşturabileceğiniz, etkinlikleri rahatça görebileceğiniz, silip düzenleyebileceğiniz bir ekranla karşılaşacaksınız.
