Problem with <ajaxToolkit:CalendarExtender>

Posted on 2009-12-20
Medium Priority
Last Modified: 2013-11-07

I am facing problem using calendarExtension in IE 8

I am using a textbox and calender control in .net

Normally it works in the following scenario when the user clicks on the textbox calendar appears
below the textbox. But in IE 8.0 it is not working properly.

I have searched on internet to find the solution all the blogs and discussion forums gives the same solution i.e. add the following css class

.ajax__calendar_title{width:150px; margin:auto; padding:3px;}

But where to add there is no description for that. Can you help me out in this.
Question by:KaranGupta
  • 5
  • 2

Accepted Solution

vinodsnair2001 earned 1000 total points
ID: 26093828
Create a new style sheet with the following in it:

.ajax__calendar_container {padding:4px;position:absolute;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}

.ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}

.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}

.ajax__calendar_container TABLE {font-size:11px;}

.ajax__calendar_header {height:20px;width:100%;}

.ajax__calendar_title {cursor:pointer;font-weight:bold;}

.ajax__calendar_footer {height:15px;}

.ajax__calendar_today {cursor:pointer;padding-top:3px;}

.ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:0 2px;}

.ajax__calendar_day {height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}

.ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}

.ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}

.ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;}

.ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}

.ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}

.ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}

.ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}

.ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}

.ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}

.ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}


Then add this to the top,

<link href="ajaxcalendarfix.css" rel="stylesheet" type="text/css" />
ajaxcalendarfix.css is the style sheets name.

Then add  ajax__calendar to the calendar extender cssclass property, and then all of the calendars will work.

Pls mark yes if this was helpful to you

Author Comment

ID: 26093862

There is another class input_text that is applied on the textbox should I remove it.

Author Comment

ID: 26093897
The reason I am asking this is because when you view source then you won't see any class called ajax__calendar
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Expert Comment

ID: 26093920
you have to add this as css file and thenadd  ajax__calendar to the calendar extender cssclass property, and then all of the calendars will work.

Author Comment

ID: 26093953

I have added the class in the css file then add the <link> tag on the top of the page. After that I have applied css class in calendar extender control.

But still I am facing the same problem

Am I missing  something. If you want some piece of code then I can give

Author Comment

ID: 26094008

One more thing which I want to share is I am using master page.

When I am using <link> tag in child page. I am getting a warning message

"Cannot switch views: Validations(XHTML 1.0 Transitional): Element link cannot be nested within  element 'div'"

Author Comment

ID: 26094100

Any Updates
LVL 14

Assisted Solution

amar31282 earned 1000 total points
ID: 26137782
you need to use the Content place holder with the id="head" in the master page and then paste the link part in the child page in that contentplaceholder Or alternatively add the link tag into the master page it will be automatically called in child page.

Still not working ???

Paste you aspx part here(content page only + the Css file)

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
In real business world data are crucial and sometimes data are shared among different information systems. Hence, an agreeable file transfer protocol need to be established.
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…
With just a little bit of  SQL and VBA, many doors open to cool things like synchronize a list box to display data relevant to other information on a form.  If you have never written code or looked at an SQL statement before, no problem! ...  give i…
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question