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
 |
Download sample code attached
Related AJAX calendar control posts
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
6 comments :
Since last 3 months , i show the best example in this site .... Thanks suresh ....
Darshan
Thanks Darshan Keep visiting....
hi suresh..thanks for the best articles..
i want to start writing blog.. can u plz tell me how to add demos like in these articles to my blog..
your website is very helpful. Please give more assignments to work on.
hi suresh ... i have some problem on this issue .....
instead of TODAY, its showing in arabic ... can u please tell me wats the solution?
awesome!