| The Calendar control enables you to display a calendar. You can use the calendar as a date picker or you can use the calendar to display a list of upcoming events. The page in Listing 4.7 displays a simple calendar with the Calendar control (see Figure 4.4). Figure 4.4. Displaying a calendar with the Calendar control. 
Listing 4.7. ShowCalendar.aspx| [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR  /xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Show Calendar</title> </head> <body> <form runat="server"> <div> <asp:Calendar Runat="server" /> </div> </form> </body> </html>
|
The Calendar control supports the following properties (this is not a complete list): DayNameFormatEnables you to specify the appearance of the days of the week. Possible values are FirstLetter, FirstTwoLetters, Full, Short, and Shortest. NextMonthTextEnables you to specify the text that appears for the next month link. NextPrevFormatEnables you to specify the format of the next month and previous month link. Possible values are CustomText, FullMonth, and ShortMonth. PrevMonthTextEnables you to specify the text that appears for the previous month link. SelectedDateEnables you to get or set the selected date. SelectedDatesEnables you to get or set a collection of selected dates. SelectionModeEnables you to specify how dates are selected. Possible values are Day, DayWeek, DayWeekMonth, and None. SelectMonthTextEnables you to specify the text that appears for selecting a month. SelectWeekTextEnables you to specify the text that appears for selecting a week. ShowDayHeaderEnables you to hide or display the day names at the top of the Calendar control. ShowNextPrevMonthEnables you to hide or display the links for the next and previous months. ShowTitleEnables you to hide or display the title bar displayed at the top of the calendar. TitleFormatEnables you to format the title bar. Possible values are Month and MonthYear. TodaysDateEnables you to specify the current date. This property defaults to the current date on the server. VisibleDateEnables you to specify the month displayed by the Calendar control. This property defaults to displaying the month that contains the date specified by TodaysDate.
The Calendar control also supports the following events: DayRenderRaised as each day is rendered. SelectionChangedRaised when a new day, week, or month is selected. VisibleMonthChangedRaised when the next or previous month link is clicked.
Notice that the SelectionMode property enables you to change the behavior of the calendar so that you can not only select days, but also select weeks or months. The page in Listing 4.8 illustrates how you can use the SelectionMode property in conjunction with the SelectedDates property to select multiple dates (see Figure 4.5). Figure 4.5. Selecting weeks and months with a Calendar control. 
Listing 4.8. CalendarSelectionMode.aspx| [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub btnSubmit_Click(sender As Object, e As EventArgs) bltResults.DataSource = Calendar1.SelectedDates bltResults.DataBind() End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Calendar SelectionMode</title> </head> <body> <form runat="server"> <div> <asp:Calendar SelectionMode="DayWeekMonth" runat="server" /> <br /><br /> <asp:Button Text="Submit" OnClick="btnSubmit_Click" Runat="server" /> <hr /> <asp:BulletedList DataTextFormatString="{0:d}" Runat="server" /> </div> </form> </body> </html>
|
When you select a date, or group of dates, from the Calendar control in Listing 4.8, the set of selected dates are displayed in a BulletedList control. Creating a Pop-up Date Picker You can use a Calendar control to create a fancy pop-up date picker if you are willing to add a little JavaScript and some Cascading Style Sheet rules to a page. The page in Listing 4.9 contains a TextBox and Calendar control (see Figure 4.6). Listing 4.9. CalendarJS.aspx| [View full width] <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Sub calEventDate_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs) txtEventDate.Text = calEventDate.SelectedDate.ToString("d") End Sub Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs) lblResult.Text = "You picked: " & txtEventDate.Text End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <script type="text/javascript"> function displayCalendar() { var datePicker = document.getElementById('datePicker'); datePicker.style.display = 'block'; } </script> <style type="text/css"> #datePicker { display:none; position:absolute; border:solid 2px black; background-color:white; } .content { width:400px; background-color:white; margin:auto; padding:10px; } html { background-color:silver; } </style> <title>Calendar with JavaScript</title> </head> <body> <form runat="server"> <div > <asp:Label Text="Event Date:" AssociatedControl Runat="server" /> <asp:TextBox Runat="server" /> <img src="/books/3/444/1/html/2/Calendar.gif" onclick="displayCalendar()" /> <div > <asp:Calendar OnSelectionChanged="calEventDate_SelectionChanged" Runat="server" /> </div> <br /> <asp:Button Text="Submit" Runat="server" OnClick="btnSubmit_Click" /> <hr /> <asp:Label Runat="server" /> </div> </form> </body> </html>
|
Figure 4.6. Displaying a pop-up calendar. 
The Calendar control is hidden until you click the calendar image. The #datePicker style sheet rules sets the display property to none. When you click the image of the calendar, the JavaScript displayCalendar() function executes and sets the CSS display property to the value block. When you select a date from the calendar, the page is posted back to the server and the SelectionChanged server-side event is raised. The SelectionChanged event handler updates the TextBox control with the selected date. Rendering a Calendar from a Database Table You also can use the Calendar control to display events in a calendar. In this section, we build a simple schedule application that enables you to insert, update, and delete calendar entries. Each schedule entry is highlighted in a Calendar control (see Figure 4.7). Figure 4.7. Displaying a calendar from a database. 
The code for the schedule application is contained in Listing 4.10. Listing 4.10. CalendarDatabase.aspx| [View full width] <%@ Page Language="VB" ValidateRequest="false" %> <%@ Import Namespace="System.Data" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Private schedule As New DataView() Sub Page_Load() If calSchedule.SelectedDate = DateTime.MinValue Then calSchedule.SelectedDate = calSchedule.TodaysDate End If End Sub Sub Page_PreRender() schedule = CType(srcCalendar.Select(DataSourceSelectArguments.Empty), DataView) schedule.Sort = "EntryDate" End Sub Sub calSchedule_DayRender(ByVal sender As Object, ByVal e As DayRenderEventArgs) If schedule.FindRows(e.Day.Date).Length > 0 Then e.Cell.BackColor = System.Drawing.Color.Yellow End If End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Calendar Database</title> </head> <body> <form runat="server"> <div> <asp:Calendar OnDayRender="calSchedule_DayRender" Runat="server" /> <br /> <asp:FormView AllowPaging="True" DataKeyNames="EntryDate" DataSource Runat="server"> <EmptyDataTemplate> <asp:LinkButton Text="Add Entry" CommandName="New" Runat="server" /> </EmptyDataTemplate> <ItemTemplate> <h1><%# Eval("EntryDate", "{0:D}") %></h1> <%# Eval("Entry") %> <br /><br /> <asp:LinkButton Text="Edit Entry" CommandName="Edit" Runat="server" /> <asp:LinkButton Text="Delete Entry" CommandName="Delete" OnClientClick="return confirm('Delete entry?');" Runat="server" /> </ItemTemplate> <EditItemTemplate> <asp:Label Text="Entry:" AssociatedControl Runat="server" /> <br /> <asp:TextBox Text='<%#Bind("Entry") %>' TextMode="MultiLine" Columns="40" Rows="8" Runat="server" /> <br /> <asp:LinkButton Text="Update" CommandName="Update" Runat="server" /> </EditItemTemplate> <InsertItemTemplate> <asp:Label Text="Entry:" AssociatedControl Runat="server" /> <br /> <asp:TextBox Text='<%#Bind("Entry") %>' TextMode="MultiLine" Columns="40" Rows="8" Runat="server" /> <br /> <asp:Button Text="Insert" CommandName="Insert" Runat="server" /> </InsertItemTemplate> </asp:FormView> <asp:SqlDataSource ConnectionString="Server=.\SQLExpress;Integrated Security=True; AttachDbFileName=|DataDirectory|ScheduleDB.mdf;User Instance=True" SelectCommand="SELECT EntryDate,Entry FROM Schedule WHERE EntryDate=@EntryDate" InsertCommand="INSERT Schedule (EntryDate,Entry) VALUES (@EntryDate,@Entry)" UpdateCommand="UPDATE Schedule SET Entry=@Entry WHERE EntryDate=@EntryDate" DELETECommand="DELETE Schedule WHERE EntryDate=@EntryDate" Runat="server"> <SelectParameters> <asp:ControlParameter Name="EntryDate" Control PropertyName="SelectedDate" /> </SelectParameters> <InsertParameters> <asp:ControlParameter Name="EntryDate" Control PropertyName="SelectedDate" /> </InsertParameters> </asp:SqlDataSource> <asp:SqlDataSource ConnectionString="Server=.\SQLExpress;Integrated Security=True; AttachDbFileName=|DataDirectory|ScheduleDB.mdf;User Instance=True" SelectCommand="SELECT EntryDate FROM Schedule" Runat="server"> </asp:SqlDataSource> </div> </form> </body> </html>
|
The page in Listing 4.10 saves and loads entries from a SQL Express database named ScheduleDB. The contents of the schedule are contained in a table named Schedule which has the following schema: Column Name | Data Type |
|---|
EntryDate | DateTime | Entry | Nvarchar(max) |
The tricky part in Listing 4.10 is the code for highlighting the current entries in the calendar. In the Page_PreRender event handler, a list of all the current entries is retrieved from the database. The list is represented by a DataView object. The DayRender event is raised when the Calendar renders each day (table cell). In the DayRender event handler in Listing 4.10, if there is an entry in the database that corresponds to the day being rendered, then the day is highlighted with a yellow background color. |
