<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
<table width="100%" cellpadding="2" cellspacing="0">
<tr valign="top" class="ArticleTitle">
<td style="padding-left:10px;" valign="middle">
asp:Calendar control</td>
</tr>
<tr>
<td class="ArticleContents">
Calendar control is used to display one month calendar and allows to navigate backword & forward through dates, and months.
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
<div class="ArticleContents">
Ideally Calendar control is used to display calendar for a month and allows to navigate backward & forward through days, and months.
This control is highly customizable in terms of functionality and appearance.
When it is rendered on the page, it is implemented through combination of <table>, <tr> and <td> HTML tag.
Its properties like <span class="DemoCP">BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. </span>
are implemented through style properites of <table>, <tr> and <td> tags.
<br /><br />
There are many properties of Calendar control to customize the functionality and appearance. However, these are some important properties that are very useful.
<table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
<tr>
<td class="DemoCP">FirstDayOfWeek</td>
<td>
Gets or sets first day of a Week.
</td>
</tr>
<tr>
<td class="DemoCP">NextPrevFormat</td>
<td>
FullMonth/ShortMonth/CustomText. Gets or sets the format of the next and previous month navigation element.
</td>
</tr>
<tr>
<td class="DemoCP">OnSelectionChanged</td>
<td>
Sets the event that fires when any day is clicked.
</td>
</tr>
<tr>
<td class="DemoCP">SelectionMode</td>
<td>
Day/DayWeek/DayWeekMonth/None. Gets or sets the date selection mode.
</td>
</tr>
<tr>
<td class="DemoCP">SelectedDate</td>
<td>
Gets or sets the selceted date.
</td>
</tr>
<tr>
<td class="DemoCP">DayNameFormat</td>
<td>
FirstLetter/FirstTwoLetter/Full/Short/Shorted. Gets or sets the name format of the days of the week.
</td>
</tr>
</table>
<!-- START - Demo Section -->
<table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
<tr>
<td class="DemoTitle">
DEMO : Calendar
</td>
<td align="right">
<a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/controls/calendar.aspx" target="_blank">Show Source Code</a>
</td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr valign="Top" align="center">
<td>
1st: Simple Calendar
<asp:Calendar ID="CalendarSimple" runat="server"></asp:Calendar>
</td>
<td>
2nd. Calendar, weekend can be noticed
<asp:Calendar ID="CalendarWeekend" runat="Server" OnDayRender="MarkWeekEnd"></asp:Calendar>
</td>
<td>
3rd. Calendar with Day/Week/Month selection facility
<asp:Calendar ID="CalendarMultipleSelction" runat="server" SelectionMode="DayWeekMonth"
OnSelectionChanged="WriteMultipleSelectedDates"></asp:Calendar>
<asp:Literal ID="litMultiple" runat="Server" EnableViewState="False"></asp:Literal>
</td>
</tr>
<tr>
<td colspan="2">
<br />
4th. Calendar with Event added
<asp:Calendar ID="CalendarWithEvent" runat="Server" OnDayRender="CheckForEvents" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana"
Font-Size="12pt" ForeColor="#663399" Height="200px" ShowGridLines="True" Width="100%">
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
<SelectorStyle BackColor="#FFCC66" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
<DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
<DayStyle VerticalAlign="Top" BorderWidth="1" HorizontalAlign="left" Height="50" />
</asp:Calendar>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<!-- START - Server Side Code -->
<pre>
// 1st: Simple Calendar
<asp:Calendar ID="CalendarSimple" runat="server"></asp:Calendar>
// 2nd. Calendar, weekend can be noticed
<asp:Calendar ID="CalendarWeekend" runat="Server" OnDayRender="MarkWeekEnd"></asp:Calendar>
// 3rd. Calendar with Day/Week/Month selection facility
<asp:Calendar ID="CalendarMultipleSelction" runat="server" SelectionMode="DayWeekMonth"
OnSelectionChanged="WriteMultipleSelectedDates"></asp:Calendar>
<asp:Literal ID="litMultiple" runat="Server" EnableViewState="False"></asp:Literal>
// 4th. Calendar with Event added
<asp:Calendar ID="CalendarWithEvent" runat="Server" OnDayRender="CheckForEvents" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana"
Font-Size="12pt" ForeColor="#663399" Height="200px" ShowGridLines="True" Width="100%">
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
<SelectorStyle BackColor="#FFCC66" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
<DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
<DayStyle VerticalAlign="Top" BorderWidth="1" HorizontalAlign="left" Height="50" />
</asp:Calendar>
</pre>
<!-- END - Server Side Code -->
</td>
</tr>
</table>
<!-- END - Demo Section -->
</div>
<br />
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>
Go Top