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
|
2nd. Calendar, weekend can be noticed
|
3rd. Calendar with Day/Week/Month selection facility
|
4th. Calendar with Event added
|
|
// 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>
|