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

‏ • Sela

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

ASPNET - פקד 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 התואם את אותו חודש.

תגיות: , , , ,

IdoFlatow

יועץ ומרצה בקבוצת סלע לתחומי Web ו-Data. עוסק בתחומים Asp.Net, WCF, Silverlight, IIS ו-Entity Framework.כותב הקורס הרשמי של מיקרוסופט ל-WCF וכן שותף בכתיבת הספר ASP.NET Programmer's Reference (ISBN 978-0470505458)

תגובות בפייסבוק

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!