Yazar: Hasan Mansur

Kategori: ASP.NET

Eklenme Tarihi: 22.05.2007 01:57:26

Merhaba; bu makalemde yine ToolBox nesnelerinden Calendar (takvim) kontolü üzerinde duracagiz. Calendar kontrolünü kullanarak basit anlamda bir ajanda yapacagiz.Istenilen günlere istenildigi gibi notlar yerlestirecegiz.

ASP.NET 2.0 Calendar Kontrolü ile Ajanda

Calendar (takvim) kontrolü sizinde bildiginiz üzere herhangi bir zamani seçme , ay, gün , yil gibi veya listelemeye yarayan bir kontroldür.Çogu zaman bu kontrolü kullanicidan tarih bilgisini almak üzere kullaniriz. Bazi sitelerde örnegin bir yazar blogu sitesinde arsiv listesini görüntülemek için takvim kontrolü kullanilir.Takvim günlerinden , arsiv dosyasina sahip olan gün digerlerinden farklı gösterilerek o tarihte dosyalarin bulundugu anlatilmak istenir.

Gün seçimi , ay ve yil seçimlerinde (SelectionChanged , VisibleMonthChanged) Calendar kontrolü sayfanin Postback olmasina neden olur. Calendar kontrolü olusturulurken HTML table olarak render edilir ve sayfada bu sekilde görüntülenir.

Calendar nesnesinin hiyerarsik yapisi asagidaki seklide net olarak görünmektedir.

Bu örnegimizde istedigimiz güne istedigimiz yaziyi , notu ekletebilmemiz için Calendar kontrolünün DayRender event ‘ini kullanacagiz. Calendar’ in günleri olusturulurken Label kullanarak notumuzu ekletecegiz.

Calendar kontrolünün property ‘ lerini tanimlamaya çalisalim :

Property	Açiklmasi
Caption	Calendar kontrolünün tepesinde yazilan baslik bilgisi
Caption Align	Baslik olarak yazilan yazinin hizalanmasi
CellPadding	Tablo hücreleri ile çerçeve arasindaki bosluk
CellSpacing	Hücreler arasi bosluk
DayHeaderStyle	Haftanin günlerine uygulanacak stil bilgisi
DayNameFormat	Haftanin günlerinin nasıl yazdirilacagi
DayStyle	Haftanin günlerine ait default stil bilgisi
FirstDayOfWeek	Haftanin ilk gününü seçememizi saglar
NextMonthText	Bir sonraki ayin text ‘i nasıl yazdirilacak seçimi
NextPrevFormat	Önceki ve sonraki aylarin nasıl görüntülenecegi
NextPrevStyle	Next ve Prev in görünümü hakkında ayarlamalar
OtherMonthDayStyle	Diger aylara ait günlerin nasıl görüntülenecegini belirler
PrevMonthText	Önceki ayin adinin nasıl yazilacagini belirler
SelectedDate	Seçili günü belirler
SelectedDates	DateTime veri türünden olusan bir dizi günün takvimde seçili olarak belirlenmesini saglar.
SelectedDayStyle	Seçili olan günün stilini ayarlar
SelectionMode	Takvim üzerindeki seçimin neye göre yapilacagini belirler.Aldigi değerler : Day ,DayWeek,DayWeekMonth, None
SelectMonthText	Seçilen ayin adinin görünümünü ayarlar
SelectorStyle	Week ve Month seçimi stili
SelectWeekText	Seçilen haftanin adinin görümünü ayarlar
ShowDayHeader	Günlerin adlari ya da bas harflerinin listelenmesini ayarlar
ShowGridLines	Yatay ve düsey çizgilerin görünümünü ayarlar
ShowNextPrevMonth	Önceki ve sonraki aylarin adlarinin görünme ayari
ShowTitle	Yazilan notlarin , yazilarin görünümü
TitleFormat	Title hakkındaki format bilgisi
TitleStyle	Title stil bilgisi
TodayDayStyle	Bugünün nasıl görünecegini ayarlar
TodaysDate	Bugüne ait tarih bilgisi
UseAccessibleHeader	True yapildiginda DayHeader için <th> , false seçilince <td> eklentisini türetir.
VisibleDate	Takvimde hangi aylarin listelenecegini ayarlar
WeekendDayStyle	Hafta sonlarinin görünümünü ayarlar

Takvimde seçim yaparken normalde (default olarak) sadece gün seçimi yapabilirsiniz.Ancak SelectionMode properties’ ini degistirerek istenilen seçim saglanabilir.SelectiomMOde properties’ lerini biraz daha detayli incelersek :

· Day : Sadece tek gün seçimi saglar.

· DayWeek : Bir gün ya da tüm haftayi seçmemizi saglar.

· DayWeekMonth : Bir gün , bir haftanin tümünü ya da bir ayin tümünü seçememizi saglar.

· None : Herhangi bir tarih seçimine izin vermez

Evet , çogumuz Calendar kontrolünün sadece tarih seçmek için kullanıldığını düsünüyor olabiliriz.Bu örnegimizde aslinda Calendar nesnesinin bir ajanda gibi kullanilabilecegini görecegiz.

Visual Studio .NET i açarak bir web site açalim ve form içine ToolBoxtan bir adet Calendar kontrolü ekleyerek , ekledigimiz Calendar kontrolü alt kösesinden çekerek en ve boy olarak büyütelim. Günler yeterince büyük kareler halinde görünmeli. Daha sonra bu kontrole sag tiklayarak “Auto Format” i seçerek buradan hazir olan bazi görünümlerden herhangi birini uygulayabiliriz.

Benim hazirlamis oldugum örnegin HTML tarafini kodu su sekildedir :

HTML Source Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Hasan Mansur -- Calendar demo</title>

</head>

<body>

<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="Black"

DayNameFormat="Shortest" Font-Names="Trebuchet MS" Font-Size="11px" ForeColor="Black"

Height="50%" NextPrevFormat="FullMonth" OnDayRender="Calendar1_DayRender" OnSelectionChanged="Calendar1_SelectionChanged"

OnVisibleMonthChanged="Calendar1_VisibleMonthChanged" TitleFormat="Month" Width="80%">

<SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Trebuchet MS" Font-Size="11px"

ForeColor="#333333" Width="1%" />

<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" ForeColor="#333333"

Height="11px" />

<TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt" ForeColor="White"

Height="14pt" />

</asp:Calendar>

</div>

</form>

</body>

</html>

Örnegimizin simdide code behind tarafina su kodlari ekleyelim :

Code Behind :

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Collections;

public partial class _Default : System.Web.UI.Page

{

Hashtable schedule = new Hashtable();

protected void Page_Load(object sender, EventArgs e)

{

GetSchedule();

Calendar1.Style.Add("position", "absolute");

Calendar1.Style.Add("left", "5px");

Calendar1.Style.Add("top", "50px");

Calendar1.Caption = "Special Days";

Calendar1.FirstDayOfWeek = FirstDayOfWeek.Monday;

Calendar1.NextPrevFormat = NextPrevFormat.FullMonth;

Calendar1.TitleFormat = TitleFormat.MonthYear;

Calendar1.ShowGridLines = true;

Calendar1.DayStyle.HorizontalAlign = HorizontalAlign.Left;

Calendar1.DayStyle.VerticalAlign = VerticalAlign.Top;

Calendar1.DayStyle.Height = new Unit(75);

Calendar1.DayStyle.Width = new Unit(100);

Calendar1.OtherMonthDayStyle.BackColor = System.Drawing.Color.WhiteSmoke;

Calendar1.DayNameFormat = DayNameFormat.Full;

Calendar1.DayStyle.Font.Size = new FontUnit(FontSize.XSmall);

Calendar1.DayHeaderStyle.Font.Size = new FontUnit(FontSize.Small);

//Calendar1.DayStyle.Font.Bold = true;

Calendar1.DayStyle.Font.Name = "Trebuchet MS";

Calendar1.TodaysDate = new DateTime(2007, 04, 04);

Calendar1.VisibleDate = Calendar1.TodaysDate;

}

private void GetSchedule()

{

schedule["06.01.2007"] = "My official wedding date";

schedule["01.04.2007"] = "The world's joke day";

schedule["09.04.2007"] = "Today";

schedule["01.05.2007"] = "Isçi Bayrami";

schedule["19.05.2007"] = "Gençlik Bayrami";

schedule["13.06.2007"] = "Toplanti";

}

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)

{

Literal lit = new Literal();

lit.Visible = true;

lit.Text = "<br />";

e.Cell.Controls.Add(lit);

if (schedule[e.Day.Date.ToShortDateString()] != null)

{

Label lbl = new Label();

lbl.Visible = true;

lbl.Text = (string)schedule[e.Day.Date.ToShortDateString()];

e.Cell.Controls.Add(lbl);

}

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

Response.Write("Selection changed to: " + Calendar1.SelectedDate.ToShortDateString());

}

protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)

{

Response.Write("Month changed to: " + e.NewDate.ToShortDateString());

}

Programa ait çiktilar :

Sonuç olarak ; kodumuzda yazmis oldugumuz GetSchedule() fonksiyonunda bazi günlere ait notlar belirledik.Calendar in DayRender eventinde dikkat ettiyseniz render edilecek gün ile “schedule” diye tanimladığımız HasTable daki değer birbirini tutuyorsa yani yaratilacak gün schedule daki elemanlardan biri ile eslesirse ; o gün için olusturulan hücreye bir label eklemekte ve label ‘in textine de shedule da uygun olan indexin sahip oldugu değeri yazdiriyoruz.

Bu durumda Calendar kontrolünün table olarak render edildigini ve table için uyguladigimiz olaylari burada da uygulayabiliriz.Calendar kontrolünde bunu gibi degisik uygulamalari yapabilmek için makalemde sizlere detayli bir sekilde açiklamalrda bulunmaya çalistim.

HASAN MANSUR

Kaynaklar :

W3Schools.com http://www.w3schools.com/aspnet/control_calendar.asp

MSDN

Yazar Hakkında 1 Yorum Yorum Yaz Yazara ait diğer Makaleler