Problem with <ajaxToolkit:CalendarExtender>

Posted on 2009-12-20
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
    LVL 2

    Accepted Solution

    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


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

    Author Comment

    The reason I am asking this is because when you view source then you won't see any class called ajax__calendar
    LVL 2

    Expert Comment

    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


    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


    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


    Any Updates
    LVL 14

    Assisted Solution

    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

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Join & Write a Comment

    The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API ( has made its way into the popular lexicon of the English language.  A few years ago, …
    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
    This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor ( If you're looking for how to monitor bandwidth using netflow or packet s…

    733 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now