Calendar (Takvim) Kontrolü İle Popup Pencere Açmak

Geçenlerde Asp.Net sunucu^server kontrollerinden Takvim^Calendar üzerine uygulama geliştiriyorduk. Önemli günleri vurgulamak çok klasik bir örnektir. Bizde bu örnek üzerinden yola çıktık. Farklı olarak, gün seçildiğinde sonuçları popup pencere ile göstermeye karar verdik.

Örneği besleyecek basit bir xml verisi hazırladık ve veriyi kod içinde kullanmayı sağlayan basitte bir class^nesne yazdık. Gerisi Takvim kontrolünü kullanamaya kaldı.

Sonuçları popup pencerede nasıl göstereceğimizi anlamak için Takvim kontrolünü biraz irdelemek gerekir. Kontrol tarayıcı penceresine basıldığında^Render html tarafında bir table etiketine karşılık gelir. Varsayılan olarakta herbir hücredeki^td gün ifadesi anchor^çapa etiketi^tag içinde gösterilir. Hücerelere tıklandığında ise dopostback fonksiyonu tetiklenerek işlem yapılır. Fakat bizim uygulamamızda anchor' a ihtiyaç yok.

O yüzden kontrolün SelectionMode özelliğini None olarak ayarlıyoruz. Böylece hücre içlerine sadece gün değerleri eklenir.

<form id="form1" runat="server">
<div>
    <asp:Calendar runat="server" OnDayRender="Unnamed1_DayRender"
        BackColor="White" BorderColor="#999999"
        CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana"
        Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px"
        SelectionMode="None">
        <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
        <NextPrevStyle VerticalAlign="Bottom" />
        <OtherMonthDayStyle ForeColor="#808080" />
        <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
        <SelectorStyle BackColor="#CCCCCC" />
        <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
        <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
        <WeekendDayStyle BackColor="#FFFFCC" />
    </asp:Calendar>
</div>
</form>
<script type="text/javascript">
    function openPen(id) {
        window.open("showIT.aspx?id=" + id, "show", "width=300px,height=200px");
    }
</script>

Detayları göstereceğimiz popup penceresini açmak için basit bir JavaScript fonksiyonu hazırlıyoruz.

protected void Unnamed1_DayRender(object sender, DayRenderEventArgs e)
{
    foreach (Day day in DayProvider.GetDays())
    {
        if (day.Date.ToString("dd.MM") == e.Day.Date.ToString("dd.MM"))
        {
            e.Cell.Controls.Clear();
            HyperLink link = new HyperLink();
            link.Text = e.Day.Date.Day.ToString();
            link.NavigateUrl = string.Format("javascript:openPen('{0}')",day.Id);
            e.Cell.Controls.Add(link);
        }
    }
}

Önemli günleri vurgulayacak kodlarımızı Takvim kontrolünün DayRender adlı olayına^event yazıyoruz. Bu olay, her bir gün  için bir kez tekrarlanır.
Uygun günü yakaladığımızda, hücre içini temizleyip yerine openPen JavaScript fonksiyonunu çağıran bir HyperLink kontrolü ekliyoruz.
Bundan sonra çeşitlendirmek mümkün.

Uygulamayı daha iyi anlamak için aşağıdaki projeyi indirip bakmanızda fayda var.

Proje