וובמאסטר - תיכנות ובניית אתרים

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

IdoFlatow ,‏ מכללת סלע‏ ‏/‏ 3 פברואר, 2011
F+
F-

פקד 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)
תגיות: ASP.NET‏  /  .net‏  /  צד שרת‏  /  מדריך‏  /  פיתוח‏  

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

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות