آموزش ASP.Net > کنترل های استاندارد ASP.Net > کنترل Calendar
سفارشی کردن روزها و نحوه نمایش آنها در کنترل تقویم Calendar

Skip Navigation Links.

مقدمه :

به صورت پیش فرض ، روزها در کنترل تقویم به صورت شماره نمایش داده می شوند . اگر هم امکان انتخاب نمودن روزها در کنترل فعال باشد ، شماره ها به صورت لینک در می آیند .
اما شما می توانید نمایش روزها را در کنترل تقویم را سفارشی کرده و تنظیمات بیشتری را به آنها اعمال نمایید . برای مثال می توان به موراد زیر اشاره نمود :

  • به صورت برنامه ریزی شده روزهای خاصی را در تقویم را مثل روزهای تعطیل ، با یک پس زمینه رنگی متقاوت نشان دهید .
  • به صورت برنامه ریزی شده تعیین نمایید آیا یک تاریخ خاص یا یک روز ، به صورت تکی می تواند انتخاب شود یا خیر .
  • اطلاعات اضافه ای را برای نمایش در روزها اضافه نمایید ، مثل مناسبت ها یا قرارهای کاری و ... .
  • لینکی که کاربر با کلیک بر روی آن می تواند روزها را انتخاب نماید ، را سفارشی کنید .

هنگامی که کنترل Calendar در صفحه در حال ایجاد و تولید خروجی آن به مرورگر است ، رویدادی به نام DayRender را اجرا می کند . کنترل ، این رویداد را برای هر روزی که در تقویم می خواهد نمایش دهد ، یکبار اجرا نموده و به این وسیله شما در هر لحظه می توانید با کد مورد نظر خود متوجه شوید ، جه روزی در حال ساخته شدن بوده و آن را سفارشی نمایید .
نکته : رویداد DayRender دو پارامتر یا آرگومان دریافت می کند . اولی اشاره به کنترل Calendar ای دارد که رویداد را فراخوانی کرده و دومی یک شی از نوع DayRenderEventArgs  است .
شی DayRenderEventArgs ، امکان دسترسی به دو شی متفاوت را فراهم می کند :

  • Cell : که یک شی از نوع خانه جدول TableCell بوده که به وسیله آن می توانید ظاهر هر روز در کنترل تقویم را سفارشی نمایید .
  • Day : از این شی می توانید برای دریافت اطلاعات روزی که در حال اضافه شدن ( Render ) به کنترل است ، استفاده نموده و اطلاعات اضافه ای را به آن الحاق نمایید .
    شی Day خود دارای خواص زیادی است که می توانید از آن برای کار با این شی استفاده نمایید ( مثل IsSelected یا IsToday ).

نحوه سفارشی کردن ظاهر یک روز مجزا در کنترل تقویم :

  1. برای این منظور یک مدیریت کننده رویداد ( event handler ) را برای رویداد DayRender کنترل Calendar بنویسید .
  2. درون رویداد ، خواص لازم را برای شی 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);
        }

  }
خروجی
<January 2017>
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
2930311234

فراهم نمودن امکان انتخاب یک روز تنها در کنترل تقویم :

  1. در متد رویداد DayRender کنترل تقویم ، مشخص کنید چه روزی در حال ساخته شدن ( Render ) بر روی صفحه بوده و اطلاعات لازم درباره آن را توسط خاصیت Date شی Day بدست بیاورید .
  2. مقدار خاصبیت 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;
       }

  }
خروجی
<January 2017>
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
2930311234

نحوه اضافه کردن اطلاعات توضیحاتی به یک تاریخ معین در کنترل تقویم :

برای اضافه کردن اظلاعات و توضیحات بیشتر به روزهای کنترل تقویم ، بایستی کد 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);
          }

    }

خروجی
<January 2017>
SunMonTueWedThuFriSat
25262728293031
1
Birthday
234567
891011121314
15161718192021
22232425262728
2930311234

نحوه سفارشی کردن لینک نمایش داده شده برای روزها در کنترل تقویم :

  1. در رویداد DayRender کنترل Calendar ، مقدار خاصیت SelectUrl پارامتر DayRenderEventArgs را بخوانید . خاصیت SelectUrl ، کد جاوا اسکریپتی که باعث Postback شدن صفحه در هنگام کلیک کاربر بر روی لینک می شود ، را بر می گرداند .
  2. در مرحله بعد یک لینک HTML ایجاد نمایید که از مقدار خاصیت SelectUrl ، به عنوان آدرس مقصد خود ( href ) استفاده نماید .
  3. لینک ایجاد شده را به عنوان یک خاصیت 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>";
          }

    }

خروجی
<January 2017>
SunMonTueWedThuFriSat
25262728293031
Birthday234567
891011121314
15161718192021
22232425262728
2930311234


Skip Navigation Links.

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1