آموزش ASP.Net

آموزش ASP.Net - کنترل تقویم

کنترل Calendar در واقع یک کنترل وب بسیار غنی از لحاظ قابلیت می باشد. قابلیت های گوناگونی که این کنترل در اختیار شما قرار می دهد به ترتیب زیر می باشد.

  • نمایش ماه
  • امکان انتخاب روز، هفته و یا یک ماه
  • انتخاب طیف وسیعی از روزها
  • حرکت از یک ماه به ماه دیگر
  • کنترل نمایش روزها به صورت programmatically (به صورت برنامه ای)

نحوۀ نگارش (syntax) کلی کنترل Calender به شرح زیر می باشد:

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

خواص و رخدادهای کنترل Calender

کنترل  Calender دارای خواص و رخدادهای فراوان می باشد که با استفاده از آن می توانید action (اقدامات) و display  (نمایش) ، کنترل را سفارشی کنید. جدول زیر برخی از خواص مهم کنترل Calender را فراهم می کند:

خواص

شرح

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 را خوانده و تنظیم می کند.

Titlestyle

Style property عنوان (title) هدینگ برای کنترل calendar را دریافت می کند.

TodayDayStyle

مقدار style تاریخ جاری را در calendar بازیابی می کند.

TodaysDate

شماره (مقدار) تاریخ روز جاری را خوانده و مقداردهی می کند.

UseAccessibleHeader

مقداری که نشان دهنده رندر جدول المان HTML <th> در هدر های روز به جای جدول داده های <td> است را get یا set می کند.

VisibleDate

(مقدار) تاریخی که تعیین کنندۀ ماه نمایش داده شده می باشد را خوانده و مقداردهی می کند.

WeekendDayStyle

مقدار style property را برای روزهای تعطیل آخر هفته بازیابی می نماید.

 

کنترل Calendar دارای سه رویداد است که به توسعه دهندگان برای برنامه ریزی کنترل Calenda کمک می کند. جدول زیر را ببینید:

رخدادها

شرح

SelectionChanged

زمانی فعال می شود که یک روز، هفته یا یک ماه کامل انتخاب شده باشد.

DayRender

هنگامی روی می دهد / فعال می شود که تمامی خانه ها یا cell های کنترل تقویم بارگذاری شده و به نمایش گذاشته شود (render).

VisibleMonthChanged

زمانی رخ می دهد که کاربر ماه را انتخاب کند.

 

کار با کنترل Calendar

قرار دادن یک کنترل Calender که فقط دارای اجزای اصلی بوده و هیچ code-behind ای نداشته باشد، صرفا یک تقویم ساده در اختیار سایت قرار می دهد که تنها روز، ماه و سال را نشان می دهد و همچنین امکان حرکت بین ماه ها را فراهم می کند.

calendar

کنترل Calendar به کاربر اجازه می دهد روز، هفته و ماه را مطابق میل انتخاب کند. این کار با استفاده از خاصیت SelectionMode امکان پذیر می باشد. خاصیت مذکور دارای مقادیر زیر می باشد.

خواص

شرح

Day

با تخصیص این مقدار به خاصیت Selection mode می توان فقط روز را انتخاب کرد.

DayWeek

با تخصیص این مقدار به خاصیت مزبور می توان یک روز یا یک هفته را انتخاب کرد.

DayWeekMonth

مقداری که با تخصیص آن به خاصیت Selection mode می توان یک روز، هفته یا ماه را انتخاب کرد.

None

هنگامی که خاصیت Selection mode روی مقدار none تنظیم شده باشد، امکان انتخاب هیچ یک از موارد بالا وجود ندارد.

دستور نگارش (syntax)برای انتخاب روزها (selecting days):

<asp:Calender ID = "Calendar1" runat = "server" SelectionMode="DayWeekMonth">
</asp:Calender>

هنگامی که خاصیت selection mode روی مقدار DayWeekMonth تنظیم می شود، ستونی با علامت >  ظاهر می شود که امکان انتخاب ماه را فراهم می کند، همچنین علامت >>  در سمت چپ اسم روز پدیدار می شود که اجازۀ انتخاب ماه را به کاربر می دهد.

calendar 2

 

مثال

مثال زیر نحوۀ انتخاب روز و نشان دادن آن در label را نمایش می دهد:


content file code:

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

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

<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();
}

پس از اجرای فایل، خروجی زیر را مشاهده خواهید کرد.

calendar 3

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش ASP.Net

Learn ASP.Net

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...