Source view of CALENDAR.ASPX
DotNet Funda: Code Viewer
calendar.aspx | calendar.aspx.cs
Close Window  
<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">&nbsp;</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 &lt;table&gt;, &lt;tr&gt; and &lt;td&gt; HTML tag.
        Its properties like <span class="DemoCP">BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. </span>
        are implemented through style properites of &lt;table&gt;, &lt;tr&gt; and &lt;td&gt; 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
                &lt;asp:Calendar ID="CalendarSimple" runat="server"&gt;&lt;/asp:Calendar&gt;        
                                                
                // 2nd. Calendar, weekend can be noticed
                &lt;asp:Calendar ID="CalendarWeekend" runat="Server" OnDayRender="MarkWeekEnd"&gt;&lt;/asp:Calendar&gt;

                //  3rd. Calendar with Day/Week/Month selection facility
                &lt;asp:Calendar ID="CalendarMultipleSelction" runat="server" SelectionMode="DayWeekMonth"
                 OnSelectionChanged="WriteMultipleSelectedDates"&gt;&lt;/asp:Calendar&gt;
                &lt;asp:Literal ID="litMultiple" runat="Server" EnableViewState="False"&gt;&lt;/asp:Literal&gt;
                
                // 4th. Calendar with Event added
                &lt;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%"&gt;
                    &lt;SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" /&gt;
                    &lt;TodayDayStyle BackColor="#FFCC66" ForeColor="White" /&gt;
                    &lt;SelectorStyle BackColor="#FFCC66" /&gt;
                    &lt;OtherMonthDayStyle ForeColor="#CC9966" /&gt;
                    &lt;NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" /&gt;
                    &lt;DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" /&gt;
                    &lt;TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /&gt;
                    &lt;DayStyle VerticalAlign="Top" BorderWidth="1" HorizontalAlign="left" Height="50" /&gt;
                &lt;/asp:Calendar&gt;
                    
                    </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