Search
Author
ASP.NET Tutorials
Author
Sheo Narayan
Advertisements


Winners

Win Prizes

Social Presence
Like us on Facebook

Silverlight Tutorials | Report a Bug in the Tutorial
asp:Calendar control
Calendar control is used to display one month calendar and allows to navigate backword & forward through dates, and months.
 
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 BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through style properites of <table>, <tr> and <td> tags.

There are many properties of Calendar control to customize the functionality and appearance. However, these are some important properties that are very useful.
FirstDayOfWeek Gets or sets first day of a Week.
NextPrevFormat FullMonth/ShortMonth/CustomText. Gets or sets the format of the next and previous month navigation element.
OnSelectionChanged Sets the event that fires when any day is clicked.
SelectionMode Day/DayWeek/DayWeekMonth/None. Gets or sets the date selection mode.
SelectedDate Gets or sets the selceted date.
DayNameFormat FirstLetter/FirstTwoLetter/Full/Short/Shorted. Gets or sets the name format of the days of the week.
DEMO : Calendar Show Source Code
1st: Simple Calendar
<October 2018>
SunMonTueWedThuFriSat
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
2nd. Calendar, weekend can be noticed
<October 2018>
SunMonTueWedThuFriSat
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
3rd. Calendar with Day/Week/Month selection facility
<October 2018>
>>SunMonTueWedThuFriSat
>30123456
>78910111213
>14151617181920
>21222324252627
>28293031123
>45678910

4th. Calendar with Event added
<October 2018>
SuMoTuWeThFrSa
301234
Event 1st
56
78910
Event 1st
Event 2nd
111213
14151617181920
21222324
Event 1st
252627
28293031123
45678910
                // 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>