aspnet07-10.htm

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

    <td><span class="code">None</span></td>
    <td>No dates can be selected.</td></tr></tbody></table>
<div class="figure"><b>Figure 7-36. </b>Calendar mode properties.</div>
<p>Scripting of a calendar through date selections is discussed later. For now, 
several typical style properties are applied to the following Calendar. In this 
case, <span class="code">SelectionMode="None"</span> is coded to remove underlined 
links from the days in order to display a simple reference calendar. Also, 
styling indicates the current day by assigning a background color to the day 
cell. Coding for this styled Calendar is shown in Listing 7-36.</p>
<div class="page">
<table id="Calendar2" title="Calendar" style="border: 1px solid ; border-collapse: collapse;" border="1" cellpadding="2" 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('Calendar2','V2953')">&lt;</a></td>
          <td style="width: 70%;" align="center">March 2008</td>
          <td style="width: 15%; color: white;" align="right"><a title="Go to the next month" style="color: white;" href="javascript:__doPostBack('Calendar2','V3013')">&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; text-decoration: none;" align="center">24</td>
    <td style="width: 14%; color: white; background-color: white; text-decoration: none;" align="center">25</td>
    <td style="width: 14%; color: white; background-color: white; text-decoration: none;" align="center">26</td>
    <td style="width: 14%; color: white; background-color: white; text-decoration: none;" align="center">27</td>
    <td style="width: 14%; color: white; background-color: white; text-decoration: none;" align="center">28</td>
    <td style="width: 14%; color: white; background-color: white; text-decoration: none;" align="center">29</td>
    <td style="width: 14%; color: red; text-decoration: none;" align="center">1</td></tr>
  <tr>
    <td style="width: 14%; color: red; text-decoration: none;" align="center">2</td>
    <td style="width: 14%; text-decoration: none;" align="center">3</td>
    <td style="width: 14%; text-decoration: none;" align="center">4</td>
    <td style="width: 14%; text-decoration: none;" align="center">5</td>
    <td style="width: 14%; text-decoration: none;" align="center">6</td>
    <td style="width: 14%; text-decoration: none;" align="center">7</td>
    <td style="width: 14%; color: red; text-decoration: none;" align="center">8</td></tr>
  <tr>
    <td style="width: 14%; color: red; text-decoration: none;" align="center">9</td>
    <td style="width: 14%; text-decoration: none;" align="center">10</td>
    <td style="width: 14%; text-decoration: none;" align="center">11</td>
    <td style="width: 14%; text-decoration: none;" align="center">12</td>
    <td style="width: 14%; text-decoration: none;" align="center">13</td>
    <td style="width: 14%; text-decoration: none;" align="center">14</td>
    <td style="width: 14%; color: red; text-decoration: none;" align="center">15</td></tr>
  <tr>
    <td style="width: 14%; color: red; text-decoration: none;" align="center">16</td>
    <td style="width: 14%; text-decoration: none;" align="center">17</td>
    <td style="width: 14%; text-decoration: none;" align="center">18</td>
    <td style="width: 14%; text-decoration: none;" align="center">19</td>
    <td style="width: 14%; text-decoration: none;" align="center">20</td>
    <td style="width: 14%; text-decoration: none;" align="center">21</td>
    <td style="width: 14%; color: red; text-decoration: none;" align="center">22</td></tr>
  <tr>
    <td style="width: 14%; color: red; text-decoration: none;" align="center">23</td>
    <td style="width: 14%; text-decoration: none;" align="center">24</td>
    <td style="width: 14%; text-decoration: none;" align="center">25</td>
    <td style="width: 14%; text-decoration: none;" align="center">26</td>
    <td style="width: 14%; text-decoration: none;" align="center">27</td>
    <td style="width: 14%; text-decoration: none;" align="center">28</td>
    <td style="width: 14%; color: red; background-color: lightgrey; text-decoration: none;" align="center">29</td></tr>
  <tr>
    <td style="width: 14%; color: red; text-decoration: none;" align="center">30</td>
    <td style="width: 14%; text-decoration: none;" align="center">31</td>
    <td style="width: 14%; color: white; background-color: white; text-decoration: none;" align="center">1</td>
    <td style="width: 14%; color: white; background-color: white; text-decoration: none;" align="center">2</td>
    <td style="width: 14%; color: white; background-color: white; text-decoration: none;" align="center">3</td>
    <td style="width: 14%; color: white; background-color: white; text-decoration: none;" align="center">4</td>
    <td style="width: 14%; color: white; background-color: white; text-decoration: none;" align="center">5</td></tr></tbody></table><br></div>
<div class="figure"><b>Figure 7-37. </b>A styled Calendar control.</div><pre class="divcode">&lt;asp:Calendar id="Calendar" Runat="Server"
  SelectionMode="None"
  ShowGridLines="True"
  TitleStyle-BackColor="#993333"
  TitleStyle-ForeColor="White"
  TitleStyle-Font-Name="Arial"
  TitleStyle-Font-Bold="True"
  NextPrevStyle-ForeColor="White"
  DayHeaderStyle-BackColor="#993333"
  DayHeaderStyle-ForeColor="White"
  DayHeaderStyle-Font-Name="Arial"
  DayHeaderStyle-Font-Size="8pt"
  OtherMonthDayStyle-BackColor="White"
  OtherMonthDayStyle-ForeColor="White"
  TodayDayStyle-BackColor="LightGray"
  WeekendDayStyle-ForeColor="Red"
/&gt;
</pre>
<div class="listing"><b>Listing 7-36. </b>Code for a styled Calendar 
control.</div>
<p>You can also show or hide different parts of the Calendar. The following 
table lists the properties that control which parts are shown or hidden. Note 
that <span class="code">ShowGridLines="True"</span> appears in the previous 
Calendar control.</p>
<table class="standard" cellpadding="3">
  <tbody>
  <tr>
    <th>Property</th>
    <th>Description</th></tr>
  <tr>
    <td><span class="code">ShowDayHeader</span></td>
    <td>Shows or hides the section that displays the days of the week.</td></tr>
  <tr>
    <td><span class="code">ShowGridLines</span></td>
    <td>Shows or hides the gridlines between the days of the month.</td></tr>
  <tr>
    <td><span class="code">ShowNextPrevMonth</span></td>
    <td>Shows or hides the navigation controls to the next or previous 
    month.</td></tr>
  <tr>
    <td><span class="code">ShowTitle</span></td>
    <td>Shows or hides the title section.</td></tr></tbody></table>
<div class="figure"><b>Figure 7-38. </b>Properties to hide and show Calendar 
parts.</div>
<p class="head2">Calendar Properties</p>
<p>There are numerous other Calendar properties that can be applied. These 
properties are listed in the following table, and several are described and 
illustrated below in conjunction with Calendar scripting.</p>
<table class="standard" cellpadding="3">
  <tbody>
  <tr>
    <th>Property</th>
    <th>Description</th></tr>
  <tr>
    <td><span class="code">Caption</span></td>
    <td>Text value that is rendered as a caption for the calendar.</td></tr>
  <tr>
    <td><span class="code">CaptionAlign</span></td>
    <td>Alignment of the text that is rendered as a caption for the 
    calendar.</td></tr>
  <tr>
    <td><span class="code">CellPadding</span></td>
    <td>Amount of space between the contents of a cell and the cell's 
    border.</td></tr>
  <tr>
    <td><span class="code">CellSpacing</span></td>
    <td>Amount of space between cells.</td></tr>
  <tr>
    <td><span class="code">DayNameFormat</span></td>
    <td>Name format for days of the week. 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;">FirstLetter</td>
          <td style="font-size: 9pt;">Displayed with just the first letter. For 
            example, <span class="code"><b>M</b></span> represents Monday.</td></tr>
        <tr style="vertical-align: top;">
          <td class="code" style="font-size: 8pt; font-family: courier new;">FirstTwoLetters</td>
          <td style="font-size: 9pt;">Displayed with just the first two 
            letters. For example, <span class="code"><b>Mo</b></span> represents 
            Monday.</td></tr>
        <tr style="vertical-align: top;">
          <td class="code" style="font-size: 8pt; font-family: courier new;">Full</td>
          <td style="font-size: 9pt;">Displayed in full format. For example, 
            Monday.</td></tr>
        <tr style="vertical-align: top;">
          <td class="code" style="font-size: 8pt; font-family: courier new;">Short</td>
          <td style="font-size: 9pt;">Displayed in abbreviated format. For 
            example, Mon represents Monday.</td></tr>
        <tr style="vertical-align: top;">
          <td class="code" style="font-size: 8pt; font-family: courier new;">Shortest</td>
          <td style="font-size: 9pt;">Displayed in the shortest abbreviation 
            format possible.</td></tr></tbody></table></td></tr>
  <tr>
    <td><span class="code">FirstDayOfWeek</span></td>
    <td>Day of the week to display in the first day column 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;">Default</td>
          <td style="font-size: 9pt;">Indicates that the first day of the week 
            is specified by the system settings.</td></tr>
        <tr style="vertical-align: top;">
          <td class="code" style="font-size: 8pt; font-family: courier new;">Sunday<br>Monday<br>Tuesday<br>Wednesday<br>Thursday<br>Friday<br>Saturday<br></td>
          <td style="font-size: 9pt;">Indicates the first day of the week