Your First ASP

Your First ASP.NET Page

Add a Rich Calendar Server Control to the ASP.NET Page

In this walkthrough, you will add a more advanced ASP.NET server control, the Calendar control, to the ASP.NET page you developed in the previous sections. To accomplish this, please follow the below steps:

Open the myFirstPage.aspx file.
Select the Design tab to view the page in design mode.
From the Web Controls tab in the Toolbox, drag a Calendar control onto the ASP.NET page between the TextBox control and the Button control.
Note The Calendar control displays a single month calendar that allows the user to select dates and move to the next or previous month. This control is more advanced because you can customize the appearance of the Calendar control by setting the properties that control the style for different parts of the control, including the content and formatting of individual date cells. At runtime it emits standard html output -- ensuring that it works against any browser client (IE, Netscape, Opera, etc).
Select the Calendar control with your mouse.
Click the Auto Format link at the bottom of the Properties window (bottom right hand side of the tool).
The Calendar Auto Format dialog box will appear. This dialog box allows you to select from a predefined set of colors, border styles, and other settings (referred to as a scheme) and apply them to the Calendar control.
Select the Simple option in the scheme ListBox. When you select a scheme, the scheme's settings are applied to properties of the control. Note the preview of how the Calendar will look with the scheme applied.
Click OK to select the "Simple" scheme.

Select the HTML tab to display the page in HTML view.

Note The Calendar control's layout schema is persisted as a set of HTML property settings. You can manually update these properties to further customize the control's look and feel. You can also switch back to the design tab and use the property grid to individually modify these properties as well.

<asp:Calendar id="Calendar1" runat="server" BackColor="White" Width="200px"
DayNameFormat="FirstLetter" ForeColor="Black" Height="180px" Font-Size="8pt"
Font-Names="Verdana" BorderColor="#999999" CellPadding="4">
    <TodayDayStyle
        forecolor="Black" backcolor="#CCCCCC">
    </TodayDayStyle>
    <SelectorStyle
        backcolor="#CCCCCC">
    </SelectorStyle>
    <NextPrevStyle
        verticalalign="Bottom">
    </NextPrevStyle>
    <DayHeaderStyle
        font-size="7pt" font-bold="True" backcolor="#CCCCCC">
    </DayHeaderStyle>
    <SelectedDayStyle
        font-bold="True" forecolor="White" backcolor="#666666">
    </SelectedDayStyle>
    <TitleStyle
        font-bold="True" bordercolor="Black" backcolor="#999999"></TitleStyle>
    <WeekendDayStyle 
        backcolor="#FFFFCC">
    </WeekendDayStyle>
    <OtherMonthDayStyle
        forecolor="Gray">
    </OtherMonthDayStyle>
</asp:Calendar>

Select the Design tab and double-click the Button control. ASP.NET Web Matrix will open the Code view at the Button1_Click method.

Update the code in the Button1_Click method that updates the Label control to include the date selected in the Calendar control:

Sub Button1_Click(sender As Object, e As EventArgs)
    Label1.Text = "Hello " & TextBox1.Text & " you selected: " & Calendar1.SelectedDate 
End Sub

Save and run the ASP.NET page (using the start button/menu item or by hitting F5).
Your ASP.NET page will automatically appear in a new instance of your Web browser. Note that the Calendar now implements the formatting options of the Simple scheme. Click a date on the Calendar, type a name in the TextBox and click the Button. The name and date will appear in the welcome message displayed in the Label.

Note The ASP.NET Web Matrix Web Server was already running. Therefore, the Start Web Application dialog did not appear this run. ASP.NET Web Matrix will use the Web Server that was specified the first time you ran the page. ASP.NET Web Matrix will not ask you to specify a Web Server again until you either close and reopen the ASP.NET Web Matrix development environment and run the page again or manually shut down and restart the Web Server.
Close the Web browser instance.

Next Step >>