מדריך ASP.NET – פקדים מתקדמים: Calendar

פקד Calendar מצייר לוח שנה על המסך שממנו ניתן לבחור תאריך. לוח השנה יראה באופן הבא:

כל יום בלוח השנה הוא קישור שכאשר הוא נלחץ מתעדכן התאריך הנבחר בשרת.

נתבונן כעת במה שנכתב ב – ASPX על מנת ליצור את לוח השנה:

<asp:Calendar runat="server" ID="myCalendar" 
  SelectedDate="2011-01-17" />

התאריך הנבחר מוגדר במאפיין SelectedDate, כאן הגדרנו שברירת המחדל של הפקד יהיה התאריך 17 בינואר 2011.

עבור הכיתוב הקצר הזה מיוצר ה – HTML הבא:

<table id="Table2" cellspacing="0" cellpadding="2" 
  title="Calendar" style="border-width: 1px; 
  border-style: solid; border-collapse: collapse;">
  <tr>
    <td colspan="7" style="background-color: Silver;">
      <table cellspacing="0" style="width: 100%; 
        border-collapse: collapse;">
       <tr>
         <td style="width: 15%;">
          <a title="Go to the previous month"
            href="javascript:__doPostBack('myCalendar','V3987')" 
            >
             &lt;</a>
         </td>
         <td align="center" style="width: 70%;">
            ינואר 2011
         </td>
         <td align="right" style="width: 15%;">
          <a style="color: Black" title="Go to the next month"
            href="javascript:__doPostBack('myCalendar','V4049')" 
            >
             &gt;</a>
        </td>
       </tr>
      </table>
    </td>
  </tr>
  <tr>
    <th align="center" abbr="יום ראשון" scope="col">
      יום א
    </th>
    <th align="center" abbr="יום שני" scope="col">
      יום ב
    </th>
    <th align="center" abbr="יום שלישי" scope="col">
      יום ג
    </th>
    <th align="center" abbr="יום רביעי" scope="col">
      יום ד
    </th>
    <th align="center" abbr="יום חמישי" scope="col">
      יום ה
    </th>
    <th align="center" abbr="יום שישי" scope="col">
      יום ו
    </th>
    <th align="center" abbr="שבת" scope="col">
      שבת
    </th>
  </tr>
  <tr>
    <td align="center" style="width: 14%;">
      <a href="javascript:__doPostBack('myCalendar','4012')" 
        style="color: Black" title="26 דצמבר">
        26</a>
    </td>
    <td align="center" style="width: 14%;">
      <a href="javascript:__doPostBack('myCalendar','4013')" 
        style="color: Black" title="27 דצמבר">
        27</a>
    </td>
    <td align="center" style="width: 14%;">
      <a href="javascript:__doPostBack('myCalendar','4014')" 
        style="color: Black" title="28 דצמבר">
        28</a>
    </td>
    <td align="center" style="width: 14%;">
      <a href="javascript:__doPostBack('myCalendar','4015')" 
        style="color: Black" title="29 דצמבר">
        29</a>
    </td>
    <td align="center" style="width: 14%;">
      <a href="javascript:__doPostBack('myCalendar','4016')" 
        style="color: Black" title="30 דצמבר">
        30</a>
    </td>
    <td align="center" style="width: 14%;">
      <a href="javascript:__doPostBack('myCalendar','4017')" 
        style="color: Black" title="31 דצמבר">
        31</a>
    </td>
    <td align="center" style="width: 14%;">
      <a href="javascript:__doPostBack('myCalendar','4018')" 
        style="color: Black" title="01 ינואר">
        1</a>
    </td>
  </tr>
  ***
</table>

*** – ה – HTML ארוך לכן איננו מובא במלואו – קיימות עוד שורות עבור שאר השבועות, לצורך ההדגמה מוצגת רק השורה הראשונה.

ניתן לראות שלוח השנה מוצג בצורת טבלה, כאשר בשורה הראשונה מוגדר החודש, בשורה לאחריו ימי השבוע, ובשורות לאחר מכן התאריכים עצמם, כקישורים. לחיצה על כל קישור תבצע Postback לשרת ותעדכן שם את התאריך.

כמו כן, ניתן לראות בשורה (tr) הראשונה בטבלה, שני קישורים עם הסימנים < ו- > (המיוצגים ע"י &gt; ו – &lt; ב – HTML בהתאמה) – אלו מפנים לחודש הבא או הקודם. לחיצה עליהם תביא ליצירת HTML התואם את אותו חודש.