C# ASP.NET WebForm - Calendar Kullanımı

MERHABA, SERİMİZİN BU VİDEOSUNDA C# ASP.NET İLE BOOTSTRAP HAZIR TEMASINI KULLANARAK CALENDAR ARACININ NE OLDUĞUNDAN VE ARACI NASIL KULLANABİLECEĞİNİZDEN BAHSEDİYORUM.

Button, Visual Studio tarafından bizlere "Toolbox" ya da Türkçe karşılığı ile "Araçlar" sekmesinde bize sunulan özelliklerden bir diğeridir. Bu özellikle birlikte sitelerimizde ziyaretçilerimize takvim üzerinden etkinliklerimizi ve/veya önemli tarihlerimizi aktarabileceğiz. Gelin birlikte "Calendar" aracına bir göz atalım.

Bir müzik grubuna web sitesi hazırladığınızı düşünün ve bu müzik grubunun konser tarihlerini üyelere iletmek istiyorsunuz. Bunu nasıl yapardınız? İnternette birçok javascript kütüphanesi bulunuyor bu işlem için. Özellikle işlerini de gayet iyi yapabiliyorlar. Ancak bugün size bahsedeceğimiz araç bir javascript kütüphanesi değil Visual Studio programının kendisine ait olan Calendar aracıdır. 

Bu yazınımda ve videomda sizlere Calendar aracının nasıl kullanılabileceğinden, ufak tefek birkaç stil ayarıyla aslında çok daha güzel bir görünüm kazandırılabileceğinden ve genellikle kullanılan iki olaydan(event) bahsediyorum.

CALENDAR ARACI:

<asp:Calendar ID="Calendar1" 
              runat="server">
</asp:Calendar>

Bu aracı bu şekilde, hiçbir ayarlama yapmadan kullandığınızda sitenize görseli çok da iyi olmadan bir takvim yerleştirilecektir.

DAYRENDER OLAYI(EVENT):

<asp:Calendar ID="Calendar1" 
              runat="server" 
              OnDayRender="Calendar1_DayRender">
</asp:Calendar>

Bir takvimimiz var ve bu takvimde sadece bir günü işaretlemek istiyorsak ve bu işaretlediğimiz günün stilini üzerinde ayarlar yapmak istiyorsak kodlarımız şu şekilde:

private int baslangicGunu = 4;
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
	if (e.Day.DayNumberText == baslangicGunu.ToString())
	{
		e.Cell.BackColor = System.Drawing.Color.LightBlue;
		e.Cell.Font.Name = "Arial";
		e.Cell.Font.Italic = true;
	}
}

Eğer sitemize yerleştirdiğimiz takvim aracının bir günü değil de verdiğimiz bir tarih aralığını göstermek istiyorsak kodlarımız şu şekilde:

private int baslangicGunu = 4;
private int bitisGunu = 8;
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
	for (int i = baslangicGunu; i <= bitisGunu; i++)
	{
		if (e.Day.DayNumberText == i.ToString())
		{
			e.Cell.BackColor = System.Drawing.Color.LightBlue;
			e.Cell.Font.Name = "Arial";
			e.Cell.Font.Italic = true;
		}
	}
}

Tabi burada biz yerel değişkenlerle işlemlerimizi gerçekleştirdik. Siz bu kodları bir aşama ileriye götürerek veritabanından almış olduğunuz tarih aralıklarıyla yapabilirsiniz.

SELECTIONCHANGED OLAYI(EVENT):

<asp:Calendar ID="Calendar1" 
              runat="server" 
              OnSelectionChanged="Calendar1_SelectionChanged">
</asp:Calendar>

Seçtiğimiz tarihleri gösterebilmek için altına bir tane de Label aracı yerleştiriyorum. Bu aracı da ilerleyen vakitlerde kısaca inceleyeceğiz.

<asp:Label ID="Label1" 
           runat="server">
</asp:Label>

Diyelim ki seçtiğimiz tarihi uzun olarak, yani örneğin; 04 Mart 2020 Çarşamba şeklinde görüntülemek istiyorum. Bunu gerçekleştirebilmek için kod tarafında şu işlemleri yapmamız gerekiyor:

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
	Label1.Text = Calendar1.SelectedDate.ToLongDateString();
}

Ancak takvimde bir başka özellik daha bulunuyor ki, bu özellikle bir haftayı yahut bir ayı tamamen seçebiliyorsunuz. Bu özelliği aktif hale getirebilmek için yazmamız gereken kod "SelectionMode" kodudur. Buyrun inceleyelim:

<asp:Calendar ID="Calendar1" 
              runat="server" 
              OnSelectionChanged="Calendar1_SelectionChanged" 
              SelectionMode="DayWeekMonth">
</asp:Calendar>

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
	for (int i = 0; i < Calendar1.SelectedDates.Count; i++)
	{
		Label1.Text += Calendar1.SelectedDates[i].ToLongDateString() + "<br/>";
	}
}

Evet arkadaşlar bu şekilde de seçtiğimiz aralığın tamamını satır satır olmak üzere Label aracının içerisine ekleyerek karşımıza getirecek. Burada yaptığım işlemlerin tekrardan yerel değişkenler ile olduğunu hatırlatmak istiyorum. Sizler burada vermiş olduğum kodları dinamik hale getirebilir ve daha yararlı bir şekilde kullanabilirsiniz. İyi çalışmalar dilerim.