aspnet07-10.htm

tutorialssss.... for everybody!!!!!!!!!!!!!!!!!!!

            displayed.</td></tr></tbody></table></td></tr>
  <tr>
    <td><span class="code">NextPrevFormat</span></td>
    <td>Format of the next and previous month navigation elements in the title 
      section of the Calendar control. Values are:<br><br>
      <table style="border-collapse: collapse;" border="1">
        <tbody>
        <tr style="background-color: rgb(240, 240, 240);">
          <th style="font-size: 8pt; font-family: arial;">Value</th>
          <th style="font-size: 8pt; font-family: arial;">Description</th></tr>
        <tr style="vertical-align: top;">
          <td class="code" style="font-size: 8pt; font-family: courier new;">CustomText</td>
          <td style="font-size: 9pt;">Custom text format for the month 
            navigation controls on the Calendar.</td></tr>
        <tr style="vertical-align: top;">
          <td class="code" style="font-size: 8pt; font-family: courier new;">FullMonth</td>
          <td style="font-size: 9pt;">Full month name format for the month 
            navigation controls on the Calendar. For example, "January".</td></tr>
        <tr style="vertical-align: top;">
          <td class="code" style="font-size: 8pt; font-family: courier new;">ShortMonth</td>
          <td style="font-size: 9pt;">Abbreviated month name format for the 
            month navigation controls on the Calendar. For example, 
        "Jan".</td></tr></tbody></table></td></tr>
  <tr>
    <td><span class="code">NextMonthText</span></td>
    <td>Text displayed for the next month navigation control.</td></tr>
  <tr>
    <td><span class="code">PrevMonthText</span></td>
    <td>Text displayed for the previous month navigation control.</td></tr>
  <tr>
    <td><span class="code">SelectedDate</span></td>
    <td>The selected date.</td></tr>
  <tr>
    <td><span class="code">SelectedDates</span></td>
    <td>Collection of Date objects that represent the selected dates on the 
      Calendar control.</td></tr>
  <tr>
    <td><span class="code">SelectMonthText</span></td>
    <td>Text displayed for the month selection element in the selector 
    column.</td></tr>
  <tr>
    <td><span class="code">SelectWeekText</span></td>
    <td>Text displayed for the week selection element in the selector 
    column.</td></tr>
  <tr>
    <td><span class="code">TodaysDate</span></td>
    <td>Value for today's date.</td></tr>
  <tr>
    <td><span class="code">VisibleDate</span></td>
    <td>Date that specifies the month to display on the Calendar 
  control.</td></tr></tbody></table>
<div class="figure"><b>Figure 7-39. </b>Properties of the Calendar control.</div>
<p class="head2">Scripting a Calendar</p>
<p>As noted, Calender days are, by default, displayed as links. A click on a day 
link raises an event that can be trapped by the Calendar control's <span class="code"><b>OnSelectionChanged</b></span> event handler and scripted in a 
subprogram whose signature includes an <span class="code"><b>EventArgs</b></span> 
argument. Usually, clicking on a day displays information about events taking 
place on that day.</p>
<p>Data from an external data source cannot be bound to a Calendar control; 
however, calendar information still can be stored in a database or file, and 
retrieved for display when a day selection is made. The following example shows 
a calendar with selectable days and with pertinent information presented for the 
day chosen. Example event listings are provided for the <b>9th</b>, <b>18th</b>, 
and <b>28th</b> of January, 2006. Other clicked days present only a date 
heading.</p>
<div class="page">
<table id="Calendar" title="Calendar" style="border: 1px solid ; float: left; margin-right: 15px; border-collapse: collapse;" border="1" cellpadding="3" cellspacing="0" rules="all">
  <tbody>
  <tr>
    <td style="background-color: rgb(153, 51, 51);" colspan="7">
      <table style="font-weight: bold; width: 100%; color: white; font-family: Arial; border-collapse: collapse;" border="0" cellspacing="0">
        <tbody>
        <tr>
          <td style="width: 15%; color: white;"><a title="Go to the previous month" style="color: white;" href="javascript:__doPostBack('Calendar','V2161')">&lt;</a></td>
          <td style="width: 70%;" align="center">January 2006</td>
          <td style="width: 15%; color: white;" align="right"><a title="Go to the next month" style="color: white;" href="javascript:__doPostBack('Calendar','V2223')">&gt;</a></td></tr></tbody></table></td></tr>
  <tr>
    <th style="font-size: 8pt; color: white; font-family: Arial; background-color: rgb(153, 51, 51);" scope="col" abbr="Sunday" align="center">Sun</th>
    <th style="font-size: 8pt; color: white; font-family: Arial; background-color: rgb(153, 51, 51);" scope="col" abbr="Monday" align="center">Mon</th>
    <th style="font-size: 8pt; color: white; font-family: Arial; background-color: rgb(153, 51, 51);" scope="col" abbr="Tuesday" align="center">Tue</th>
    <th style="font-size: 8pt; color: white; font-family: Arial; background-color: rgb(153, 51, 51);" scope="col" abbr="Wednesday" align="center">Wed</th>
    <th style="font-size: 8pt; color: white; font-family: Arial; background-color: rgb(153, 51, 51);" scope="col" abbr="Thursday" align="center">Thu</th>
    <th style="font-size: 8pt; color: white; font-family: Arial; background-color: rgb(153, 51, 51);" scope="col" abbr="Friday" align="center">Fri</th>
    <th style="font-size: 8pt; color: white; font-family: Arial; background-color: rgb(153, 51, 51);" scope="col" abbr="Saturday" align="center">Sat</th></tr>
  <tr>
    <td style="width: 14%; color: white; background-color: white;" align="right"><a title="December 25" style="color: white;" href="javascript:__doPostBack('Calendar','2185')">25</a></td>
    <td style="width: 14%; color: white; background-color: white;" align="right"><a title="December 26" style="color: white;" href="javascript:__doPostBack('Calendar','2186')">26</a></td>
    <td style="width: 14%; color: white; background-color: white;" align="right"><a title="December 27" style="color: white;" href="javascript:__doPostBack('Calendar','2187')">27</a></td>
    <td style="width: 14%; color: white; background-color: white;" align="right"><a title="December 28" style="color: white;" href="javascript:__doPostBack('Calendar','2188')">28</a></td>
    <td style="width: 14%; color: white; background-color: white;" align="right"><a title="December 29" style="color: white;" href="javascript:__doPostBack('Calendar','2189')">29</a></td>
    <td style="width: 14%; color: white; background-color: white;" align="right"><a title="December 30" style="color: white;" href="javascript:__doPostBack('Calendar','2190')">30</a></td>
    <td style="width: 14%; color: white; background-color: white;" align="right"><a title="December 31" style="color: white;" href="javascript:__doPostBack('Calendar','2191')">31</a></td></tr>
  <tr>
    <td style="width: 14%; color: red;" align="right"><a title="January 01" style="color: red;" href="javascript:__doPostBack('Calendar','2192')">1</a></td>
    <td style="width: 14%;" align="right"><a title="January 02" style="color: black;" href="javascript:__doPostBack('Calendar','2193')">2</a></td>
    <td style="width: 14%;" align="right"><a title="January 03" style="color: black;" href="javascript:__doPostBack('Calendar','2194')">3</a></td>
    <td style="width: 14%;" align="right"><a title="January 04" style="color: black;" href="javascript:__doPostBack('Calendar','2195')">4</a></td>
    <td style="width: 14%;" align="right"><a title="January 05" style="color: black;" href="javascript:__doPostBack('Calendar','2196')">5</a></td>
    <td style="width: 14%;" align="right"><a title="January 06" style="color: black;" href="javascript:__doPostBack('Calendar','2197')">6</a></td>
    <td style="width: 14%; color: red;" align="right"><a title="January 07" style="color: red;" href="javascript:__doPostBack('Calendar','2198')">7</a></td></tr>
  <tr>
    <td style="width: 14%; color: red;" align="right"><a title="January 08" style="color: red;" href="javascript:__doPostBack('Calendar','2199')">8</a></td>
    <td style="width: 14%;" align="right"><a title="January 09" style="color: black;" href="javascript:__doPostBack('Calendar','2200')">9</a></td>
    <td style="width: 14%;" align="right"><a title="January 10" style="color: black;" href="javascript:__doPostBack('Calendar','2201')">10</a></td>
    <td style="width: 14%;" align="right"><a title="January 11" style="color: black;" href="javascript:__doPostBack('Calendar','2202')">11</a></td>
    <td style="width: 14%;" align="right"><a title="January 12" style="color: black;" href="javascript:__doPostBack('Calendar','2203')">12</a></td>
    <td style="width: 14%;" align="right"><a title="January 13" style="color: black;" href="javascript:__doPostBack('Calendar','2204')">13</a></td>
    <td style="width: 14%; color: red;" align="right"><a title="January 14" style="color: red;" href="javascript:__doPostBack('Calendar','2205')">14</a></td></tr>
  <tr>
    <td style="width: 14%; color: red;" align="right"><a title="January 15" style="color: red;" href="javascript:__doPostBack('Calendar','2206')">15</a></td>
    <td style="width: 14%;" align="right"><a title="January 16" style="color: black;" href="javascript:__doPostBack('Calendar','2207')">16</a></td>
    <td style="width: 14%;" align="right"><a title="January 17" style="color: black;" href="javascript:__doPostBack('Calendar','2208')">17</a></td>
    <td style="width: 14%;" align="right"><a title="January 18" style="color: black;" href="javascript:__doPostBack('Calendar','2209')">18</a></td>
    <td style="width: 14%;" align="right"><a title="January 19" style="color: black;" href="javascript:__doPostBack('Calendar','2210')">19</a></td>
    <td style="width: 14%;" align="right"><a title="January 20" style="color: black;" href="javascript:__doPostBack('Calendar','2211')">20</a></td>
    <td style="width: 14%; color: red;" align="right"><a title="January 21" style="color: red;" href="javascript:__doPostBack('Calendar','2212')">21</a></td></tr>
  <tr>
    <td style="width: 14%; color: red;" align="right"><a title="January 22" style="color: red;" href="javascript:__doPostBack('Calendar','2213')">22</a></td>
    <td style="width: 14%;" align="right"><a title="January 23" style="color: black;" href="javascript:__doPostBack('Calendar','2214')">23</a></td>
    <td style="width: 14%;" align="right"><a title="January 24" style="color: black;" href="javascript:__doPostBack('Calendar','2215')">24</a></td>
    <td style="width: 14%;" align="right"><a title="January 25" style="color: black;" href="javascript:__doPostBack('Calendar','2216')">25</a></td>
    <td style="width: 14%;" align="right"><a title="January 26" style="color: black;" href="javascript:__doPostBack('Calendar','2217')">26</a></td>
    <td style="width: 14%;" align="right"><a title="January 27" style="color: black;" href="javascript:__doPostBack('Calendar','2218')">27</a></td>
    <td style="width: 14%; color: red;" align="right"><a title="January 28" style="color: red;" href="javascript:__doPostBack('Calendar','2219')">28</a></td></tr>
  <tr>
    <td style="width: 14%; color: red;" align="right"><a title="January 29" style="color: red;" href="javascript:__doPostBack('Calendar','2220')">29</a></td>
    <td style="width: 14%;" align="right"><a title="January 30" style="color: black;" href="javascript:__doPostBack('Calendar','2221')">30</a></td>
    <td style="width: 14%;" align="right"><a title="January 31" style="color: black;" href="javascript:__doPostBack('Calendar','2222')">31</a></td>
    <td style="width: 14%; color: white; background-color: white;" align="right"><a title="February 01" style="color: white;" href="javascript:__doPostBack('Calendar','2223')">1</a></td>
    <td style="width: 14%; color: white; background-color: white;" align="right"><a title="February 02" style="color: white;" href="javascript:__doPostBack('Calendar','2224')">2</a></td>
    <td style="width: 14%; color: white; background-color: white;" align="right"><a title="February 03" style="color: white;" href="javascript:__doPostBack('Calendar','2225')">3</a></td>
    <td style="width: 14%; color: white; background-color: white;" align="right"><a title="February 04" style="color: white;" href="javascript:__doPostBack('Calendar','2226')">4</a></td></tr></tbody></table>
<div style="border: 1px solid silver; padding: 3px; overflow-y: scroll; width: 280px; height: 205px;">
<div style="padding: 3px; font-weight: bold; font-size: 10pt; color: white; font-family: Arial; background-color: rgb(153, 51, 51);"><span id="Heading">Daily Events</span> </div><br><span id="Events" style="font-size: 9pt; font-family: Arial;"></span></div><br></div>
<div class="figure"><b>Figure 7-40. </b>A selectable Calendar control.</div>
<p>Events for the previous Calendar are stored in a <span class="code"><b>Calendar.mdb</b></span> database containing a single <span class="code"><b>Events</b></span> table with three fields whose layout is shown in 
Figure 7-41.</p>

<b>Events </b>(Table) <b>Layout</b><br>
<table id="Events" border="1" cellpadding="3">
  <tbody>
  <tr style="background-color: rgb(240, 240, 240);">
    <th>Field Name</th>
    <th>Data Type</th>
    <th>Size</th></tr>
  <tr>
    <td>E_Date</td>
    <td>Date/Time</td>
    <td>&nbsp;</td></tr>
  <tr>
    <td>E_Title</td>
    <td>Text</td>
    <td>12</td></tr>
  <tr>
    <td>E_Event</td>
    <td>Memo</td>
    <td>&nbsp;</td></tr></tbody></table>
<div class="figure"><b>Figure 7-41. </b>Design of <span class="code">Events</span> 
table of <span class="code">Calendar.mdb</span> database.</div>
<p>The contents of the <span class="code">Events</span> table used for the above 
Calendar application is given in Figure 7-42. Note that the <span class="code">E_Title</span> field is not used in this application. It appears in a 
later Calendar example.</p>

<b>Events </b>(Table) <b>Contents</b><br>
<div>
<table id="CalendarView" style="border-collapse: collapse;" border="1" cellpadding="3" cellspacing="0" rules="all">
  <tbody>
  <tr>
    <th scope="col">E_Date</th>
    <th scope="col">E_Title</th>
    <th scope="col">E_Event</th></tr>
  <tr>
    <td>1/5/2005 12:00:00 AM</td>
    <td>Jan Event 1</td>
    <td>This is the first event on 1/5/2005.</td></tr>
  <tr>
    <td>1/18/2005 12:00:00 AM</td>
    <td>Jan Event 2</td>
    <td>This is the first event on 1/18/2005.</td></tr>
  <tr>
    <td>1/18/2005 12:00:00 AM</td>
    <td>Jan Event 3</td>
    <td>This is the second event on 1/18/2005.</td></tr>
  <tr>
    <td>1/28/2005 12:00:00 AM</td>
    <td>Jan Event 4</td>
    <td>This is the first event on 1/28/2005</td></tr></tbody></table></div>
<div class="figure"><b>Figure 7-42. </b>Contents of <span class="code">Events</span>