Ajax contorl toolkit Calendar Demonstration
Calendar is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox
control. It provides client-side date-picking functionality with customizable date
format and UI in a popup control. You can interact with the calendar by clicking
on a day to set the date, or the "Today" link to set the current date.
In addition, the left and right arrows can be used to move forward or back a month.
By clicking on the title of the calendar you can change the view from Days in the
current month, to Months in the current year. Another click will switch to Years
in the current Decade. This action allows you to easily jump to dates in the past
or the future from within the calendar control.
The page uses the culture setting English (United States)
which was specified by the browser. The page properties have Culture="auto" and
UICulture="auto" set to enable the same. See this
MSDN article
for more information. The ScriptManager on this Calendar demo page has EnableScriptGlobalization="true"
and EnableScriptLocalization="true".
The calendar associated with a button has been initialized with this code. The properties
in italic are optional:
<ajaxToolkit:Calendar runat="server"
TargetControlID="Date1"
CssClass="ClassName"
Format="MMMM d, yyyy"
PopupButtonID="Image1" />
- TargetControlID - The ID of the TextBox to extend with the calendar.
- CssClass - Name of the CSS class used to style the calendar. See
the Calendar Theming section for more information.
- Format -
Format string used to display the selected date.
- PopupButtonID - The ID of a control to show the calendar popup
when clicked. If this value is not set, the calendar will pop up when the textbox
receives focus.
- PopupPosition - Indicates where the calendar popup should appear
at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox.
- SelectedDate - Indicates the date the Calendar extender is
initialized with.
-
StartDate - Indicates start date for range that available for selection.
-
EndDate - Indicates end date for range that available for selection.
You can change the look and feel of Calendar using the Calendar CssClass property.
Calendar has a predefined set of CSS classes that can be overridden. It has a default
style which is embedded as a WebResource and is a part of the Toolkit assembly that
has styles set for all the sub-classes. You can find them in the Toolkit solution,
in the
"AjaxControlToolkit\Calendar\Calendar.css" file. If your
CssClass does not provide values for any of those then it falls back to the default
value. To customize the same the user would have to set the CssClass property to
the name of the CSS style and define the styles for the individual classes so that
the various elements in a Calendar control can be styled accordingly. The second
calendar in the demo above uses the "MyCalendar" style. which sets the Calendar
container style as follows.
.MyCalendar .ajax__calendar_container {
border:1px solid #646464;
background-color: lemonchiffon;
color: red;
}
Calendar Css Classes
- .ajax__calendar_container : The outer rectangular container that
supplies the border around the calendar element. Child Css classes: .ajax__calendar_header,.ajax__calendar_body,.ajax__calendar_footer.
- .ajax__calendar_header : A container element that holds the next
and previous arrows and the title of the current view. Child Css classes: .ajax__calendar_prev,
.ajax__calendar_title, .ajax__calendar_next.
- .ajax__calendar_prev : An element that displays the arrow to view
the previous set of data in the view(previous month/year/decade). Child Css classes:
none.
- .ajax__calendar_title : An element that displays the title of the
current view (month name, year, decade). Child Css classes: none.
- .ajax__calendar_next : An element that displays the arrow to view
the previous set of data in the view (previous month/year/decade). Child Css classes:
none.
- .ajax__calendar_body : A container element that holds the days,
months, and years panes. Also provides a fixed rectangle with hidden overflow that
is used for transitioning between views (next/previous month, or days/months/years).Child
Css class: .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years.
- .ajax__calendar_days : A container element that holds the layout for
the days in a month. Child Css classes: .ajax__calendar_dayname, .ajax__calendar_day
- .ajax__calendar_dayname : An element that displays the short name of the
day of the week. Child Css classes: none.
- .ajax__calendar_day : An element that displays the day of the month.
Child Css classes: none
- .ajax__calendar_months : A container element that holds the layout for the months
in a year. Child Css classes: .ajax__calendar_month.
- .ajax__calendar_month : An element that displays the month of the year.
Child Css classes: none
- .ajax__calendar_years : A container element that holds the layout for the
years in a decade. Child Css classes: .ajax__calendar_year.
- .ajax__calendar_year : An element that displays the year in a decade.
Child Css classes: none
- .ajax__calendar_footer : A container element that holds the current date.
Child Css classes: .ajax__calendar_today.
- .ajax__calendar_today : An element that displays the current date.
Child Css classes: none.
- .ajax__calendar_hover : This is applied to an element in the DOM above a day,
month or year and is used
to apply CSS attributes that show a hover state. Child Css classes: .ajax__calendar_day,
.ajax__calendar_month, .ajax__calendar_year
- .ajax__calendar_active : This is applied to an element in the DOM above a day, month or year and is used
to apply CSS attributes that show the currently selected value. Child Css classes: .ajax__calendar_day,
.ajax__calendar_month, .ajax__calendar_year.
- .ajax__calendar_other : This is applied to an element in the DOM above a day or year that is outside of
the current view (day not in the visible month, year not in the visible decade).
Child Css classes: .ajax__calendar_day, .ajax__calendar_year.
Ajax control toolkit Calendar example with demo in asp .net
In this asp .net tuotiral you will learn about
ajax control toolkit calendar,ajax control toolkit calendar always visible,ajax control toolkit calendar kullanımı,ajax control toolkit calendar javascript,ajax control toolkit 3.5 calendarextender,ajax control toolkit calendar css,ajax control toolkit calendar image,ajax control toolkit 4.0 calendar,ajax control toolkit calendar extender,ajax control toolkit calendar sample,ajax control toolkit calendar range,ajax control toolkit calendar properties,ajax control toolkit calendar with time,ajax control toolkit calendar hide today,ajax control toolkit calendar button,ajax control toolkit calendar validation,ajax control toolkit month calendar,ajax control toolkit calendar get selected date,ajax control toolkit calendar onclientdateselectionchanged,ajax control toolkit calendar not working,ajax control toolkit calendar date format,ajax control toolkit calendar time,using ajax control toolkit calendar extender,ajax control toolkit calendar format,ajax control toolkit calendar language,ajax control toolkit calendarextender readonly textbox,ajax control toolkit calendar style,ajax control toolkit calendarextender language,ajax control toolkit calendar extender javascript,ajax control toolkit calendarextender onclientdateselectionchanged,ajax control toolkit calendar extender sample,ajax control toolkit calendar week,using ajax control toolkit calendar,ajax control toolkit calendar french,ajax control toolkit calendar client events,ajax control toolkit calendar globalization,ajax control toolkit calendar highlight today,ajax control toolkit calendar in mvc,ajax control toolkit calendar not showing saturday,ajax control toolkit calendar position,ajax control toolkit calendar disable dates,ajax control toolkit calendarextender validation,ajax control toolkit add calendar,ajax control toolkit calendar tutorial