Calendar elementi, kullanıcıların belirli tarihleri veya tarih aralıklarını seçmelerini sağlayan bir takvim yapısıdır. Takvim üzerinden seçilen tarihler uygulama içindeki işlemlerde kullanılabilir. Özellikle çoklu tarih seçimi veya belirli dönemlere ait etkinliklerin yönetilmesi gereken senaryolarda tercih edilir.

Kullanım Alanları

• Etkinlik planlama ve görüntüleme,
• Toplantı, randevu veya görev takibi,
• Proje zaman çizelgesi oluşturma,
• Tatil, izin ya da vardiya planlarının yönetimi.

Calendar elementi yalnızca web uygulamalarında desteklenir.

Etkinlik Planlama Senaryosu

Bir proje yönetim uygulamasında, ekip üyelerinin toplantı ve görevlerini takip edebilmesi için Calendar elementi kullanılır. Kullanıcı, takvim üzerinde ilgili tarihleri görebilir, etkinliklerin başlangıç ve bitiş tarihlerini inceleyebilir. Etkinlikler farklı renklerle (ör. mavi → toplantı, yeşil → görev, turuncu → izin) gösterilerek daha kolay ayrım yapılabilir.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables başlığı yanındaki + ikonuna tıklayın ve tabloya CalendarEvents ismini verin.
3. Aşağıdaki alanları oluşturun:

4. SQL Actions bölümünden CalendarEvents adında aksiyon tanımlayın.

INSERT INTO CalendarEvents (Id, EventTitle, StartDate, EndDate, EventColorHex)VALUES(NEWID(), 'Sprint Planning', '2025-09-15 09:00:00', '2025-09-15 10:30:00', '#007bff'),(NEWID(), 'Team Retrospective', '2025-09-17 14:00:00', '2025-09-17 15:00:00', '#28a745'),(NEWID(), 'Client Meeting', '2025-09-20 11:00:00', '2025-09-20 12:00:00', '#ffc107'),(NEWID(), 'Product Demo', '2025-09-22 16:00:00', '2025-09-22 17:30:00', '#17a2b8'),(NEWID(), 'Company Holiday', '2025-09-29 00:00:00', '2025-09-29 23:59:59', '#dc3545');SELECT * FROM CalendarEvents;

‍

5. Page Init aşamasında SELECT sorgusunu çalıştırarak verileri takvime yansıtın.

UI Design Modülü işlemleri

• Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın. 
• Ardından Custom > CalendarEvents’i seçin. 

Özelliklerin Senaryo Bağlamında Kullanılması

• Options
  
  • Calendar’da gösterilecek verilerin kaynağını belirler.
  • Event Id Field
    
    • Etkinliğe özel kimlik alanı.
  • Event Title
    
    • Takvim üzerinde etkinlik başlığı.
  • Start Date
    
    • Etkinliğin başlangıç tarihini ve saatini gösterir.
  • End Date
    
    • Etkinliğin bitiş tarihini ve saatini gösterir.
  • Event Color Hex
    
    • Etkinliklerin hangi renkte görüneceğini belirler.
  • Event Height
    
    • Takvimde etkinlik kutusunun yüksekliğini ayarlar. 
  • Font Color
    
    • Etkinlik metninin rengini belirler.
    • Örn. #000000 siyah, #ffffff beyaz.
  • Font Family
    
    • Etkinlik başlığı yazı tipini ayarlar.
    • Kullanım: Arial, Roboto, Times New Roman vb.
  • Font Size
    
    • Etkinlik başlığının yazı boyutunu ayarlar.
    • Kullanım: Örn. 12px, 14px.
  • Font Weight
    
    • Yazının kalınlığını ayarlar.
    • Kullanım: Normal, Bold.
• CalendarStart
  
  • Takvimde görüntülenecek başlangıç tarihini belirler.
  • Kullanım: Örn. 2025-09-01.
• CalendarEnd
  
  • Takvimde görüntülenecek bitiş tarihini belirler.
  • Kullanım: Örn. 2025-09-30.
• Panel
  
  • Takvimin görünümünü belirler.
  • Seçenekler: Günlük, Haftalık, Aylık.
• Display Event Time
  
  • Takvimdeki etkinliklerin tarih ve saat bilgilerinin gösterilip gösterilmeyeceğini kontrol eder.

Senaryo Adımı Tamamlandığında

• Takvim üzerinde gün/hafta/ay bazlı etkinlikler listelenir.
• Kullanıcı etkinliklerin adını, tarihini ve süresini görebilir.
• Etkinlikler belirlenen renk kodlarıyla görselleştirilir.
• Panel geçişleri sayesinde kullanıcı istediği zaman aralığını görüntüleyebilir.

Kısıtlamalar

• Sadece web uygulamalarında çalışır.
• Veri kaynağı tanımlanmadan Calendar üzerinde etkinlik yapılandırılamaz.

İpuçları ve Best Practices

• Tarih alanlarını mutlaka datetime formatında tutun.
• Farklı etkinlik türleri için kontrast renkler seçin.
• Kullanıcı deneyimi için haftalık görünüm, yoğun takvimlerde daha okunaklıdır.