aspnet07-10.htm

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

table of <span class="code">Calendar.mdb</span> database.</div>
<p>Code for the calendar application in Figure 7-40 is shown below.</p><pre class="divcode"><span class="script">&lt;%@ Import Namespace="System.Data.OleDb" %&gt;

&lt;SCRIPT Runat="Server"&gt;

Sub Get_Day_Events (Src As Object, Args As EventArgs)

  Heading.Text = String.Format("{0:D}", Calendar.SelectedDate)
  Events.Text = ""
	
  Dim DBConnection = New OleDbConnection( _
    "Provider=Microsoft.Jet.OLEDB.4.0;" &amp; _
    "Data Source=" &amp; Server.MapPath("../Databases/Calendar.mdb"))
  DBConnection.Open()
  Dim SQLString As String = "SELECT * FROM Events WHERE E_Date = #" &amp; _
                             Calendar.SelectedDate &amp; "#"
  Dim DBCommand = New OleDbCommand(SQLString, DBConnection)
  Dim DBReader As OleDbDataReader = DBCommand.ExecuteReader()
  While DBReader.Read()
    Events.Text &amp;= DBReader("E_Event") &amp; "&lt;br/&gt;&lt;br/&gt;"
  End While
  DBReader.Close()
  DBConnection.Close()

End Sub

&lt;/SCRIPT&gt;
</span>
&lt;form Runat="Server"&gt;

&lt;asp:Calendar id="Calendar" Runat="Server"
  Style="float:left; margin-right:15px"
  VisibleDate="1/1/2006"
  ShowGridLines="True"
  CellPadding="3"
  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"
  DayStyle-HorizontalAlign="Right"
  TodayDayStyle-BackColor="SkyBlue"
  WeekendDayStyle-ForeColor="Red"
  SelectedDayStyle-BackColor="LightGray"
  SelectedDayStyle-ForeColor="Black"
    <b>OnSelectionChanged="Get_Day_Events"</b>
/&gt;

&lt;asp:Panel Runat="Server" Height="205px" Width="280px" BorderStyle="Solid"
BorderWidth="1px" BorderColor="#C0C0C0" ScrollBars="Vertical" 
style="padding:3px"&gt;

  &lt;asp:Panel Runat="Server" BackColor="#993333" ForeColor="White" 
  Font-Bold="True" Font-Name="Arial" Font-Size="10pt" Style="padding:3px"&gt;
    &lt;asp:Label id="Heading" Text="Daily Events"/&gt;
  &lt;/asp:Panel&gt;&lt;br/&gt;

  &lt;asp:Label id="Events" Font-Name="Arial" Font-Size="9pt" Runat="Server"/&gt;

&lt;/asp:Panel&gt;

&lt;/form&gt;
</pre>
<div class="listing"><b>Listing 7-37. </b>Code for a styled Calendar 
control.</div>
<p>Styling of the calendar is very similar to the previous example except that 
the <span class="code">SelectionMode</span> has not been turned off so as to make 
the days clickable. Also, a <span class="code"><b>VisibleDate</b>="1/1/2006"</span> property is set so the calendar 
always opens to a display of January, the month with example day events.</p>
<p>Calendar days are formatted as links that respond to mouse clicks. These 
clicks are trapped with the <span class="code"><b>OnSelectionChanged</b></span> 
event handler that calls subprogram <span class="code">Get_Day_Events</span> to 
extract and display associated events from the <span class="code">Calendar.mdb</span> database. In the subprogram, any of the Calendar 
object's properties can be tested, probably the most useful of which is the 
<span class="code"><b>SelectedDate</b></span> property to determine the date 
associated with the day that is clicked. The subprogram uses this property to 
locate events in the database to display along side the calendar.</p>
<p>Irrespective of whether there are events in the database associated with the 
clicked day, the subprogram displays a formatted date in the output header. This 
date is produced by the statement,</p><pre class="script">  Heading.Text = String.Format("{0:D}", Calendar.SelectedDate)
</pre>
<p>which takes the Calendar's <span class="code">SelectedDate</span> property, 
converts it to Long Date string format, and assigns it to the <span class="code">&lt;asp:Label&gt;</span> control in the output area.</p>
<p>Next, the subprogram extracts all database records with an <span class="code">E_Date</span> field that matches the selected date, </p><pre class="script">  "SELECT * FROM Events WHERE E_Date = #" &amp; Calendar.SelectedDate &amp; "#"
</pre>
<p>and displays the field in a second <span class="code">&lt;asp:Label&gt;</span> 
control reserved for their display.</p>
<p class="head2">Loading a Calendar</p>
<p>In the previous example, there is no visual indication that particular days 
of the month have events associated with them. It is not apparent which days can 
be clicked to show events. It would be helpful if event-related days had a 
special styling appearance to solicit clicking.</p>
<p>This type of event styling, though, cannot be hard-coded as style properties 
of the Calendar. Eventful days may not be known in advance, and they are likely 
to change as the calendar database is updated. Rather, dynamic styling needs to 
be applied to the eventful days as the Calendar itself is built. While the 
Calendar is loading on the page, particular days are styled in particular ways 
if there are events associated with them. This special styling is shown in the 
following Calendar, which has background colors on days with events attached; 
other days are non-selectable.</p>
<div class="page">
<table id="Calendar4" 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('Calendar4','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('Calendar4','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">25</td>
    <td style="width: 14%; color: white; background-color: white;" align="right">26</td>
    <td style="width: 14%; color: white; background-color: white;" align="right">27</td>
    <td style="width: 14%; color: white; background-color: white;" align="right">28</td>
    <td style="width: 14%; color: white; background-color: white;" align="right">29</td>
    <td style="width: 14%; color: white; background-color: white;" align="right">30</td>
    <td style="width: 14%; color: white; background-color: white;" align="right">31</td></tr>
  <tr>
    <td style="width: 14%; color: red;" align="right">1</td>
    <td style="width: 14%;" align="right">2</td>
    <td style="width: 14%;" align="right">3</td>
    <td style="width: 14%;" align="right">4</td>
    <td style="width: 14%;" align="right">5</td>
    <td style="width: 14%;" align="right">6</td>
    <td style="width: 14%; color: red;" align="right">7</td></tr>
  <tr>
    <td style="width: 14%; color: red;" align="right">8</td>
    <td style="width: 14%; background-color: khaki;" align="right"><a title="January 09" style="color: black;" href="javascript:__doPostBack('Calendar4','2200')">9</a></td>
    <td style="width: 14%;" align="right">10</td>
    <td style="width: 14%;" align="right">11</td>
    <td style="width: 14%;" align="right">12</td>
    <td style="width: 14%;" align="right">13</td>
    <td style="width: 14%; color: red;" align="right">14</td></tr>
  <tr>
    <td style="width: 14%; color: red;" align="right">15</td>
    <td style="width: 14%;" align="right">16</td>
    <td style="width: 14%;" align="right">17</td>
    <td style="width: 14%; background-color: khaki;" align="right"><a title="January 18" style="color: black;" href="javascript:__doPostBack('Calendar4','2209')">18</a></td>
    <td style="width: 14%;" align="right">19</td>
    <td style="width: 14%;" align="right">20</td>
    <td style="width: 14%; color: red;" align="right">21</td></tr>
  <tr>
    <td style="width: 14%; color: red;" align="right">22</td>
    <td style="width: 14%;" align="right">23</td>
    <td style="width: 14%;" align="right">24</td>
    <td style="width: 14%;" align="right">25</td>
    <td style="width: 14%;" align="right">26</td>
    <td style="width: 14%;" align="right">27</td>
    <td style="width: 14%; color: red; background-color: khaki;" align="right"><a title="January 28" style="color: red;" href="javascript:__doPostBack('Calendar4','2219')">28</a></td></tr>
  <tr>
    <td style="width: 14%; color: red;" align="right">29</td>
    <td style="width: 14%;" align="right">30</td>
    <td style="width: 14%;" align="right">31</td>
    <td style="width: 14%; color: white; background-color: white;" align="right">1</td>
    <td style="width: 14%; color: white; background-color: white;" align="right">2</td>
    <td style="width: 14%; color: white; background-color: white;" align="right">3</td>
    <td style="width: 14%; color: white; background-color: white;" align="right">4</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="Heading4">Daily Events</span> </div><br><span id="Events4" style="font-size: 9pt; font-family: Arial;"></span></div><br></div>
<div class="figure"><b>Figure 7-43. </b>A selectable Calendar control.</div>
<p class="head3">The DayRender Event</p>
<p>While the Calendar is being built on the page, a <b>DayRender</b> event is 
raised for each day of the month. This event can be trapped with an <span class="code"><b>OnDayRender</b></span> event handler attached to the Calendar. The 
called subprogram can produce special styling for the day being rendered. This 
subprogram has the <span class="code"><b>DayRenderEventArgs</b></span> 
argument.</p>
<p>A Calendar <span class="code"><b>Cell</b></span> object and a Calendar <span class="code"><b>Day</b></span> object are passed to the called subprogram for each 
day rendered. The <span class="code">Cell</span> object is a reference to the 
"table cell" within which the day is displayed; the <span class="code">Day</span> 
object is a reference to the day appearing in the cell. The <span class="code">Cell</span> object can be styled just like any table cell; the <span class="code">Day</span> object provides properties of the day that can be tested. 
These <span class="code">Day</span> properties are shown in the following table. 
The three properties鈥