با سلام به شمادوستان گرامی، وبمستران عزیز حالتون که خوبه؟ با اموزش دیگری در خدمتتون هستم در مورد کنترل های Asp ، کنترلی داریم به نام calender که درمورد آن میخوام توضیح بدم.کنترل Calendar در واقع یک کنترل وب بسیار غنی از لحاظ قابلیت می باشد. کنترل مزبور برای نمایش یک تقویم بر روی صفحه بکار می رود. این تقویم، تاریخ ماه جاری را در قالب ۶ هفته برای کاربر به نمایش می گذارد. می توان بین روزها و ماه ها حرکت کرده و تاریخ مورد نظر خود را انتخاب یا مشاهده کرد. تاریخ نمایش داده شده، در واقع با تاریخ جاری سرویس دهنده (server) مطابق خواهد بود.
کنترل تقویم مبتنی بر شی DateTime در ASP.Netساخته شده و طیف گسترده ای از تاریخ را پشتیبانی می کند.
قابلیت های گوناگونی که این کنترل در اختیار شما قرار می دهد به ترتیب زیر می باشد.
نمایش ماه
امکان انتخاب روز، هفته و یا یک ماه
انتخاب طیف وسیعی از روزها
حرکت از یک ماه به ماه دیگر
کنترل نمایش روزها به صورت programmatically (به صورت برنامه ای)
نحوه ی نگارش (syntax) کلی کنترل Calender به شرح زیر می باشد.
<asp:Calender ID=”Calendar1″ runat=”server”>
</asp:Calender>
خواص و رخدادهای کنترل Calender
کنترل نام برده دارای خاصیت ها و رخدادهای فراوانی است که با استفاده از آن ها می توانید ظاهر و عملیاتی که این کنترل قادر به انجام آن خواهد بود را سفارشی تنظیم کنید. جدول زیر برخی از این خواص (property) را فهرست می کند.
| خاصیت | شرح |
| Caption | یک مقدار متنی خوانده (get) و مقداردهی (set) می کند که به عنوان یک caption (عنوان) برای تقویم نمایش داده می شود.
Caption به منظور ارائه ی توصیفی مختصر درباره ی نوع جدول بکار می رود. |
| CaptionAlign | مکان قرار گیری متن عنوان (caption) کنترل تقویم را تعیین می کند. |
| CellPadding | مقدار فضای خالی (فاصله) بین داده و خط حاشیه ی cell (یک خانه از جدول) را خوانده و مقداردهی می کند (این خاصیت حاشیه درونی خانه هایی که تاریخ های روزها را نمایش می دهند، مشخص می کند(. |
| CellSpacing | فاصله ی بین خانه های جدول را تنظیم می کند (این خاصیت فاصله بیرونی خانه هایی که تاریخ های روزها را نمایش می دهند، مقداردهی می کند). |
| DayHeaderStyle | Style propertyهای بخش نمایش دهنده ی روزهای هفته در کنترل تقویم را برمی گرداند (با استفاده از این خاصیت می توان سبک یا استایل بخش نمایش دهنده ی روزهای هفته را تعیین کرد). |
| DayNameFormat | قالب یا فرمت نمایش اسم روزهای هفته (اینکه اسم روز مورد نظر به صورت کامل یا به اختصار نمایش داده شود) در کنترل تقویم را خوانده و مقداردهی می کند. |
| DayStyle | به وسیله ی این خاصیت می توان style روزهای ماه نمایش داده شده را مشخص کرد. |
| FirstDayOfWeek | روز هفته ای که در اولین ستون نمایش داده می شود را خوانده و مقداردهی می کند. |
| NextMonthText | متنی که برای کنترل پیمایش (nav control) ماه بعدی نمایش داده می شود را خوانده و مقداردهی می کند. مقدار پیش فرض >می باشد. |
| NextPrevFormat | قالب بندی یا فرمت المان های پیمایش (nav element) ماه قبلی و بعدی را در بخش عنوان (title section) کنترل Calendar خوانده و مقدار دهی می کند.
فرمت کنترل پیمایش (navigation control) ماه قبلی و بعدی را تعیین می کند. |
| OtherMonthDayStyle | به وسیله این خاصیت می توان style روزهای کنترل تقویم که در ماه جاری ( نمایش داده شده) موجود نیستند را تعیین کرد. |
| PrevMonthText | متنی که برای کنترل پیمایش (nav control) ماه قبلی نمایش داده می شود را خوانده و مقداردهی می کند. مقدار پیش فرض < می باشد. |
| SelectedDate | روز انتخاب شده را خوانده یا مقداردهی می کند. |
| SelectedDates | آرایه ای از اشیا DateTime که نشانگر تاریخ های انتخاب شده هستند برمی گرداند. |
| SelectedDayStyle | مقدار style تاریخ انتخابی را بازیابی می کند. |
| SelectionMode | به وسیله ی این خاصیت می توان selection mode را تنظیم کرد. Selection mode تعیین می کند آیا کاربر اجازه دارد تنها یک روز یا هفته و یا یک ماه کامل را انتخاب کند یا خیر. |
| SelectMonthText | نام ماه انتخابی کاربر را در ستون selector تنظیم و یا بازیابی می نماید. |
| SelectorStyle | مقدار style را برای selector هفته و ماه بازیابی می نماید. |
| SelectWeekText | در ستون selector به وسیله ی این property می توان متن مورد نمایش را تنظیم و یا بازیابی کرد. |
| ShowDayHeader | به وسیله ی این خصوصیت می توان تعیین نمود که آیا سرستون نام روز هفته نمایش داده شود یا خیر. |
| ShowGridLines | این خاصیت تعیین می کند، آیا خطوط راهنما و درونی کنترل نمایش داده شود یا خیر. یکی از مقادیر true یا false را می تواند داشته باشد. |
| ShowNextPrevMonth | به وسیله ی این property می توان تعیین نمود آیا گزینه ی قبلی و بعدی برای گزینشگر ماه نمایش داده شود یا خیر. |
| ShowTitle | توسط این property می توان تعیین نمود که آیا عنوان (title) نمایش داده شود یا خیر. |
| TitleFormat | فرمت دهی بخش عنوان کنترل Calendar را خوانده و تنظیم می کند. |
| TodayDayStyle | مقدار style تاریخ جاری را در calendar بازیابی می کند. |
| TodaysDate | شماره (مقدار) تاریخ روز جاری را خوانده و مقداردهی می کند. |
| VisibleDate | (مقدار( تاریخی که تعیین کننده ی ماه نمایش داده شده می باشد را خوانده و مقداردهی می کند. |
| WeekendDayStyle | مقدار style property را برای روزهای تعطیل آخر هفته بازیابی می نماید. |
کنترل Calendar دارای سه رویداد است که زیر فهرست شده.
| رخداد | شرح |
| SelectionChanged | زمانی فعال می شود که یک روز، هفته یا یک ماه کامل انتخاب شده باشد. |
| DayRender | هنگامی روی می دهد / فعال می شود که تمامی خانه ها یا cell های کنترل تقویم بارگذاری شده و به نمایش گذاشته شود (render). |
| VisibleMonthChanged | زمانی رخ می دهد که کاربر ماه را انتخاب کند. |
کار با کنترل Calendar
قرار دادن یک کنترل Calender که فقط دارای اجزای اصلی بوده و هیچ code-behind ای نداشته باشد، صرفا یک تقویم ساده در اختیار سایت قرار می دهد که تنها روز، ماه و سال را نشان می دهد و همچنین امکان حرکت بین ماه ها را فراهم می کند.
کنترل Calendar به کاربر اجازه می دهد روز، هفته و ماه را مطابق میل انتخاب کند. این کار با استفاده از خاصیت SelectionMode امکان پذیر می باشد. خاصیت مذکور دارای مقادیر زیر می باشد.
| خاصیت | شرح |
| Day | با تخصیص این مقدار به خاصیت Selection mode می توان فقط روز را انتخاب کرد. |
| DayWeek | با تخصیص این مقدار به خاصیت مزبور می توان یک روز یا یک هفته را انتخاب کرد. |
| DayWeekMonth | مقداری که با تخصیص آن به خاصیت Selection mode می توان یک روز، هفته یا ماه را انتخاب کرد. |
| None | هنگامی که خاصیت Selection mode روی مقدار none تنظیم شده باشد، امکان انتخاب هیچ یک از موارد بالا وجود ندارد. |
دستور نگارش (syntax)
<asp:Calender ID=”Calendar1″ runat=”server” SelectionMode=”DayWeekMonth”>
</asp:Calender>
هنگامی که خاصیت selection mode روی مقدار DayWeekMonth تنظیم می شود، ستونی با علامت > ظاهر می شود که امکان انتخاب ماه را فراهم می کند، همچنین علامت >> در سمت چپ اسم روز پدیدار می شود که اجازه ی انتخاب ماه را به کاربر می دهد.
مثال
مثال زیر نحوه ی انتخاب روز و نشان دادن آن در label را نمایش می دهد.
content file code
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Calendars.aspx.cs” Inherits=”Asp_Net_Calendars.Calendars” %>
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>
Untitled Page
</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<h3> Your Birthday:</h3>
<asp:Calendar ID=”Calendar1″ runat=”server” SelectionMode=”DayWeekMonth” onselectionchanged=”Calendar1_SelectionChanged”>
</asp:Calendar>
</div>
<p>Todays date is:
<asp:Label ID=”lblday” runat=”server”></asp:Label>
</p>
<p>Your Birday is:
<asp:Label ID=”lblbday” runat=”server”></asp:Label>
</p>
</form>
</body>
</html>
مدیریت کننده ی رخداد (event handler) SelectionChanged
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
lblday.Text = Calendar1.TodaysDate.ToShortDateString();
lblbday.Text = Calendar1.SelectedDate.ToShortDateString();
}
پس از اجرای فایل، خروجی زیر را مشاهده خواهید کرد.
