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
<December 2017>
SunMonTueWedThuFriSat
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456
2nd. Calendar, weekend can be noticed
<December 2017>
SunMonTueWedThuFriSat
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456
3rd. Calendar with Day/Week/Month selection facility
<December 2017>
>>SunMonTueWedThuFriSat
>262728293012
>3456789
>10111213141516
>17181920212223
>24252627282930
>31123456

4th. Calendar with Event added
<December 2017>
SuMoTuWeThFrSa
262728293012
34
Event 1st
56789
10
Event 1st
Event 2nd
111213141516
17181920212223
24
Event 1st
252627282930
31123456
                // 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>