Introduction
Here I will explain how change the appearance of ajax calendar using CSS Styles.
Description
In so many situations I have used calendar control but I didn’t tried to change CSS style of calendar control in one project I got requirement like to match calendar control style to project default colors at that time I changed calendar control style by using following CSS style classes.
First add Ajax tollkit reference to your project and register that ajax referece like this in your aspx page
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
After that design your aspx like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
/*Calendar Control CSS*/
.cal_Theme1 .ajax__calendar_container {
background-color: #DEF1F4;
border:solid 1px #77D5F7;
}
.cal_Theme1 .ajax__calendar_header {
background-color: #ffffff;
margin-bottom: 4px;
}
.cal_Theme1 .ajax__calendar_title,
.cal_Theme1 .ajax__calendar_next,
.cal_Theme1 .ajax__calendar_prev {
color: #004080;
padding-top: 3px;
}
.cal_Theme1 .ajax__calendar_body {
background-color: #ffffff;
border: solid 1px #77D5F7;
}
.cal_Theme1 .ajax__calendar_dayname {
text-align:center;
font-weight:bold;
margin-bottom: 4px;
margin-top: 2px;
color: #004080;
}
.cal_Theme1 .ajax__calendar_day {
color: #004080;
text-align:center;
}
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_day,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_month,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_year,
.cal_Theme1 .ajax__calendar_active {
color: #004080;
font-weight: bold;
background-color: #DEF1F4;
}
.cal_Theme1 .ajax__calendar_today {
font-weight:bold;
}
.cal_Theme1 .ajax__calendar_other,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_today,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_title {
color: #bbbbbb;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox SkinID="txtboxCustomizedMSkin" ID="tbEndDate" runat="server" CausesValidation="true"ReadOnly="true" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="tbEndDate"CssClass= " cal_Theme1" />
</div>
</form>
</body>
</html>
|
Demo
 |
Thank you for visiting this site
ReplyDeleteIt seems you are so busy in last month. The detail you shared about your work and it is really impressive that's why i am waiting for your post because i get the new ideas over here and you really write so well.
Selenium training in Chennai
Extraordinary post! I am really preparing to over this data, It's exceptionally useful for this blog.Also incredible with the majority of the significant data you have Keep up the great work you are progressing admirably.
ReplyDeleteDevOps Training | Certification in Chennai | DevOps Training | Certification in anna nagar | DevOps Training | Certification in omr | DevOps Training | Certification in porur | DevOps Training | Certification in tambaram | DevOps Training | Certification in velachery
Thanks first of all for the useful info.
ReplyDeletethe idea in this article is quite different and innovative please update more.Thanks lot!!
Android Training in Chennai
Android Online Training in Chennai
Android Training in Bangalore
Android Training in Hyderabad
Android Training in Coimbatore
Android Training
Android Online Training