آموزش ASP.Net > کنترل های استاندارد ASP.Net > کنترل Calendar
سفارشی کردن روزها و نحوه نمایش آنها در کنترل تقویم Calendar
مقدمه :
به صورت پیش فرض ، روزها در کنترل تقویم به صورت شماره نمایش داده می شوند . اگر هم
امکان انتخاب نمودن روزها در کنترل فعال باشد ، شماره ها به صورت لینک در می آیند .
اما شما می توانید نمایش روزها را در کنترل تقویم را سفارشی کرده و تنظیمات بیشتری
را به آنها اعمال نمایید . برای مثال می توان به موراد زیر اشاره نمود :
- به صورت برنامه ریزی شده روزهای خاصی را در تقویم را مثل روزهای تعطیل ، با یک پس زمینه
رنگی متقاوت نشان دهید .
- به صورت برنامه ریزی شده تعیین نمایید آیا یک تاریخ خاص یا یک روز ، به صورت تکی می
تواند انتخاب شود یا خیر .
- اطلاعات اضافه ای را برای نمایش در روزها اضافه نمایید ، مثل مناسبت ها یا قرارهای
کاری و ... .
- لینکی که کاربر با کلیک بر روی آن می تواند روزها را انتخاب نماید ، را سفارشی کنید
.
هنگامی که کنترل Calendar در صفحه در حال ایجاد و تولید خروجی آن به مرورگر است ، رویدادی
به نام DayRender را اجرا می کند . کنترل ، این رویداد را برای هر روزی که در تقویم
می خواهد نمایش دهد ، یکبار اجرا نموده و به این وسیله شما در هر لحظه می توانید با
کد مورد نظر خود متوجه شوید ، جه روزی در حال ساخته شدن بوده و آن را سفارشی نمایید
.
نکته : رویداد DayRender دو پارامتر یا آرگومان دریافت می کند . اولی
اشاره به کنترل Calendar ای دارد که رویداد را فراخوانی کرده و دومی یک شی از نوع DayRenderEventArgs
است .
شی DayRenderEventArgs ، امکان دسترسی به دو شی متفاوت را فراهم می کند :
- Cell : که یک شی از نوع خانه جدول TableCell بوده که به وسیله
آن می توانید ظاهر هر روز در کنترل تقویم را سفارشی نمایید .
- Day : از این شی می توانید برای دریافت اطلاعات روزی که در
حال اضافه شدن ( Render ) به کنترل است ، استفاده نموده و اطلاعات اضافه ای را به آن
الحاق نمایید .
شی Day خود دارای خواص زیادی است که می توانید از آن برای کار با این شی استفاده نمایید
( مثل IsSelected یا IsToday ).
نحوه سفارشی کردن ظاهر یک روز مجزا در کنترل تقویم :
- برای این منظور یک مدیریت کننده رویداد ( event handler ) را برای رویداد DayRender
کنترل Calendar بنویسید .
- درون رویداد ، خواص لازم را برای شی Cell ، که به وسیله پارامتر DayRenderEventArgs
به آن دسترسی دارید ، تعیین نمایید . همانند مثال زیر .
مثال عملی : در مثال زیر ، نحوه سفارشی کردن نمایش روزهای خاص را
در کنترل تقویم نشان داده ایم .
در این مثال روزهای تعطیل رسمی با پس زمینه زرد و روزهای تعطیل آخر هفته با رنگ سبز
متمایز شده اند . به کد مثال دقت نمایید .
هر جا که لازم بوده ، توضیحات مورد نیاز ارائه شده است :
کد کنترل
بر روی صفحه
|
<asp:Calendar ID="Calendar1" runat="server" OnDayRender="Calendar1_DayRender"
></asp:Calendar>
|
VB کد
در فایل کد
|
Protected Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As DayRenderEventArgs)
Handles Calendar1.DayRender
' نمایش روزهای تعطیل با پس زمینه زرد و حاشیه
صورتی
Dim vacationStyle As New Style()
With vacationStyle
.BackColor = System.Drawing.Color.Yellow
.BorderColor = System.Drawing.Color.Purple
.BorderWidth = New Unit(3)
End With
' نمایش روزهای آخر هفته با پس زمینه سبز
Dim weekendStyle As New Style()
weekendStyle.BackColor = System.Drawing.Color.Green
' Nov
23, 2005 to Nov 30, 2005 روزهای تعطیل عبارتند از
If ((e.Day.Date >= New Date(2005, 11, 23)) And (e.Day.Date
<= New Date(2005, 11, 30))) Then
e.Cell.ApplyStyle(vacationStyle)
ElseIf (e.Day.IsWeekend) Then
e.Cell.ApplyStyle(weekendStyle)
End If
End Sub
|
C# کد
در فایل کد
|
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
// نمایش روزهای تعطیل با پس زمینه
زرد و حاشیه صورتی
Style vacationStyle = new Style();
vacationStyle.BackColor = System.Drawing.Color.Yellow;
vacationStyle.BorderColor = System.Drawing.Color.Purple;
vacationStyle.BorderWidth = 3;
// نمایش روزهای آخر هفته با پس زمینه
سبز
Style weekendStyle = new Style();
weekendStyle.BackColor = System.Drawing.Color.Green;
if ((e.Day.Date >= new DateTime(2000,11,23))
&& (e.Day.Date <= new DateTime(2000,11,30)))
{
// اعمال استایل به روزهای
تعطیل
e.Cell.ApplyStyle(vacationStyle);
}
else if (e.Day.IsWeekend)
{
// اعمال استایل به روزهای
آخر هفته
e.Cell.ApplyStyle(weekendStyle);
}
}
|
|
خروجی
|
|
فراهم نمودن امکان انتخاب یک روز تنها در کنترل تقویم :
- در متد رویداد DayRender کنترل تقویم ، مشخص کنید چه روزی در حال ساخته شدن ( Render
) بر روی صفحه بوده و اطلاعات لازم درباره آن را توسط خاصیت Date شی Day بدست بیاورید
.
- مقدار خاصبیت IsSelectable شی Day را بر روی true تنظیم نمایید . با این کار روز مورد
نظر ، قابل انتخاب می شود .
مثال عملی : در مثال زیر کدی را نوشته ایم که فقط روز اول اکتبر 2013
در کنترل تفویم قابل انتخاب نموده و سایر روزه ، غیر قایل انتخاب هستند :
کد کنترل
بر روی صفحه
|
<asp:Calendar ID="Calendar2" runat="server" OnDayRender="Calendar2_DayRender"
></asp:Calendar>
|
VB کد
در فایل کد
|
Protected Sub Calendar2_DayRender(ByVal sender As Object, _
ByVal e As DayRenderEventArgs) Handles Calendar2.DayRender
Dim myAppointment As Date = New Date(2013,
10, 1)
If (e.Day.Date = myAppointment)
Then
e.Day.IsSelectable = True
Else
e.Day.IsSelectable = False
End If
End Sub
|
C# کد
در فایل کد
|
protected void Calendar2_DayRender(object sender, DayRenderEventArgs e)
{
DateTime myAppointment = new
DateTime(2013, 10, 1);
if (e.Day.Date == myAppointment)
{
e.Day.IsSelectable
= true;
}
else
{
e.Day.IsSelectable
= false;
}
}
|
|
خروجی
|
| | Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|
| 26 | 27 | 28 | 29 | 30 | 31 | 1 | | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | 9 | 10 | 11 | 12 | 13 | 14 | 15 | | 16 | 17 | 18 | 19 | 20 | 21 | 22 | | 23 | 24 | 25 | 26 | 27 | 28 | 29 | | 30 | 31 | 1 | 2 | 3 | 4 | 5 |
|
نحوه اضافه کردن اطلاعات توضیحاتی به یک تاریخ معین در کنترل تقویم :
برای اضافه کردن اظلاعات و توضیحات بیشتر به روزهای کنترل تقویم ، بایستی کد HTML یا
کنترل ASP.Net ای که می خواهید به واسطه آنها ، اطلاعات را نمایش دهید ، را به مجموعه
Controls شی Day اضافه نمایید .
برای این منظور بایستی کد موزد نظر را در مدیریت کننده رویداد DayRender کنترل Calendar
قرار داد . همانند مثال زیر .
مثال عملی : در مثال زیر ، کنترل تقویم تعطیلات را نمایش می دهد .
لیست تعطیلات به صورت یک آرایه دو بعدی در هنگام Page_Load ایجاد می شود . توضیحات
تعطیلات به المنت های مرتبط با آنها بر حسب اطلاعات تعیین شده ، اضافه می شود . در
رویداد DayRender کنترل Calendar ، هر روز با لیست روزهای تعطیلات در آرایه مقایسه
می شود .
اگر روز مورد نظر در لیست باشد ، مقدار توضیح متناظر با آن خوانده شده و توسط یک کنترل
Label به مجموعه Controls آن روز اضافه می شود .
به کد مثال دقت نمایید ، هر جا که توضیح لازم بوده ، اضافه شده است .
نکته : در مثال های زیر روزهای اول
ژوئن ( 01 / 01 ) و چهاردم فوریه ( 14 / 02 ) ، جز تعطیلات بوده و خروجی بر روی آنها
اعمال می شود .
کد کنترل
بر روی صفحه
|
<asp:Calendar ID="Calendar3" runat="server" OnDayRender="Calendar3_DayRender"
></asp:Calendar>
|
VB کد
در فایل کد
|
Dim holidays(13, 32) As String
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
holidays(1, 1) = "Birthday"
holidays(2, 14) = "Anniversary"
End Sub
Protected Sub Calendar3_DayRender(ByVal sender As Object, _
ByVal e As DayRenderEventArgs) Handles Calendar3.DayRender
If e.Day.IsOtherMonth Then
e.Cell.Controls.Clear()
Else
Dim aDate As Date = e.Day.Date
Dim aHoliday As String = holidays(aDate.Month,
aDate.Day)
If (Not aHoliday Is Nothing) Then
Dim aLabel As Label = New Label()
aLabel.Text = "<br>" & aHoliday
e.Cell.Controls.Add(aLabel)
End If
End If
End Sub
|
C# کد
در فایل کد
|
string[,] holidays = new String[13, 32];
protected void Page_Load(object sender, EventArgs e)
{
holidays[1,
1] = "Birthday";
holidays[2, 14] = "Anniversary";
}
protected void Calendar3_DayRender(object sender, DayRenderEventArgs e)
{
string aHoliday;
DateTime theDate = e.Day.Date;
aHoliday = holidays[theDate.Month, theDate.Day];
if (aHoliday != null)
{
Label aLabel = new Label();
aLabel.Text = "" + aHoliday;
e.Cell.Controls.Add(aLabel);
}
}
|
|
خروجی
|
|
نحوه سفارشی کردن لینک نمایش داده شده برای روزها در کنترل تقویم :
- در رویداد DayRender کنترل Calendar ، مقدار خاصیت SelectUrl پارامتر DayRenderEventArgs
را بخوانید . خاصیت SelectUrl ، کد جاوا اسکریپتی که باعث Postback شدن صفحه در هنگام
کلیک کاربر بر روی لینک می شود ، را بر می گرداند .
- در مرحله بعد یک لینک HTML ایجاد نمایید که از مقدار خاصیت SelectUrl ، به عنوان آدرس
مقصد خود ( href ) استفاده نماید .
- لینک ایجاد شده را به عنوان یک خاصیت Text به شی خانه جدول اضافه نمایید . همانند مثال
زیر .
مثال عملی : کنترل تقویم مثال زیر ، روزهای تعطیل را نشان می دهد
. لیست روزهای تعطیل ، به صورت یک آرایه دو بعدی در هنگام لود صفحه در رویداد Page_Load
ایجاد می شوند . توضیجات مرتبط با روزهای تعطیل ، به المنت های مرتبط با آن در کنترل
اضافه می شود . در هنگام اجرای رویداد DayRender کنترل ، روزهای ماه با لیست روزهای
تعطیل مقایسه شده و در صورت وجود آن روز در لیست تعطیلات ، متن Text لینک مقصد خوانده
شده و به جای شماره روز ، آن متن به جای شماره روز نشان داده می شود :
نکته : در مثال های زیر روزهای اول
ژوئن ( 01 / 01 ) و چهاردم فوریه ( 14 / 02 ) ، جز تعطیلات بوده و خروجی بر روی آنها
اعمال می شود .
کد کنترل
بر روی صفحه
|
<asp:Calendar ID="Calendar3" runat="server" OnDayRender="Calendar4_DayRender"
></asp:Calendar>
|
VB کد
در فایل کد
|
Dim holidays(13, 32) As String
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
holidays(1, 1) = "Birthday"
holidays(2, 14) = "Anniversary"
End Sub
Protected Sub Calendar4_DayRender(ByVal sender As Object, _
ByVal e As DayRenderEventArgs) Handles Calendar4.DayRender
If e.Day.IsOtherMonth Then
e.Cell.Controls.Clear()
Else
Dim aDate As Date = e.Day.Date
Dim aHoliday As String = holidays(aDate.Month,
aDate.Day)
If (Not aHoliday Is Nothing) Then
e.Cell.Text = _
"<a href=" & e.SelectUrl & ">"
& aHoliday & "</a>"
End If
End If
End Sub
|
C# کد
در فایل کد
|
string[,] holidays = new String[13, 32];
protected void Page_Load(object sender, EventArgs e)
{
holidays[1,
1] = "Birthday";
holidays[2, 14] = "Anniversary";
}
protected void Calendar4_DayRender(object sender, DayRenderEventArgs e)
{
string aHoliday;
DateTime theDate = e.Day.Date;
aHoliday = holidays[theDate.Month, theDate.Day];
if (aHoliday != null)
{
e.Cell.Text
= "<a href=" + e.SelectUrl + ">" +
aHoliday
+ "</a>";
}
}
|
|
خروجی
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :