Calender hide onBlur problem

I know that the calendar extender is suppose to hide when you click outside of the control, but it's not for me. I'm using the calendar control in association with a button. Both the button and the control are being added dynamically to the page. The follow is the code used to build these controls.

oNewImage =New Image

oNewImage.EnableViewState =True

oNewImage.TabIndex = 0

oNewImage.CssClass ="CalendarPopup"

oNewImage.ID ="CalendarPopup" &CInt(glintCountCalendarImage)

oNewImage.ImageUrl ="..\images\CALENDAR.ICO"

oNewImage.Visible =True

oNewAjaxCalendar =New AjaxControlToolkit.CalendarExtender

oNewAjaxCalendar.TargetControlID = oNewTextBox.ID.ToString

oNewAjaxCalendar.OnClientShowing ="showingCalendar"

oNewAjaxCalendar.PopupButtonID = oNewImage.ID.ToString

oNewAjaxCalendar.Format ="MMddyy"

oNewAjaxCalendar.CssClass ="icmsCalendar"

oNewAjaxCalendar.PopupPosition = AjaxControlToolkit.CalendarPosition.BottomRight

oNewAjaxCalendar.ID ="AJAXCALENDAR" &CInt(glintCountCalendarImage)

oNewAjaxCalendar.OnClientDateSelectionChanged ="hideCalendar"

oNewTextBox.Attributes.Add("JUSTIFY","RJ")

oWebForm.Controls.Add(oNewImage)

oWebForm.Controls.Add(oNewAjaxCalendar)

Hi James,

Use an ImageButton instead of an Image!

Let me know how that works out ;)
Kind regards,
Wim

Calender Extender

HI All,

Am having a Calendar Extender inside a FormView and Formview is Inside UpdatePanel.
Problem am facing is that Calendar Comes Messy when it get activated. I tried CssClass but its not working.

Any Solution?

Hi Barrysuku,

To troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.

Best regards,

Jonathan

this is a common issue that has a workaround on codeplex...I dont remember the link but all you need to do is put another calendarextender in your updatepanel and hide it via css

HI Jonathan,

I was able to solve that problem what i did is i added css class for CalenderExtender and its working fine now.

Now am having two issues if you can solve those for me.

First is how dela with FileUpload inside Updatepanel as am not getting filename.But when in scriptManager if i disable EnablepartialRendering to false then it works.Temporary am doing this.

Second how to load TreeView with ObjectDataSource or DataSet

Thanks

Regards

Barry

Hi Barrysuku,

In this thread, we are mainly discussing aboutCalenderExtender ,as indicated by the first post and the title.

Since your new question is not directly related to the original issue, it would be best if you open up a new thread for the new question. In this way, our discussion here will not deviate too much from the original issue. This will make answer searching in the forum easier and be beneficial to other community members as well.

Thank you for your understanding.

Best regards,

Jonathan

CalendarExtenter in a modal popup shows transparent

Hello,

i try to use a calendar extender inside a panle that is shown as a modal dialog using a modal popup extender. When the calendar pops up the displayed caledar is shown transparent (it has no background) and no animations are shown when switching between months.

Using the same outside a modal popup shows the calendar as usual.

Is a caledarextender not supposed to be used inside a modal popup?

Thanks in advance,

Ralf

This sounds like an issue we were having.

When you run the page, check the HTML source for a tag that looks like this:

<link href="http://links.10026.com/?link=/.../WebResource.axd?d=..." type="text/css" rel="stylesheet" /
(There should be alot of characters following the "d=")

If there is no reference made to WebResource, try putting another CalendarExtender control outside of the panel. This should force ASP.NET to add the reference.

Let me know what happens,
FB

I've looked at over a dozen suggestions to fix this issue. Finally you have the one that works. You are great! Thanks!

calendarextender: popupbuttonid

I am trying to call a function on my code behind page after a date has been selected from the calendar. I have tried using the popupbuttonid and the click event for that button and I have tried the text box textchanged event. Nothing seems to work. Does any one know how to do this?

Thanks in advance!

Hi dowens,

You should set the property OnClientDateSelectionChanged of the CalendarExtender.

As value, you should give it a function. But the function should be without brackets or an error will occur (not sure why)

Take a look at the following example:

<%@. Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %><%@. Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function test() { alert('test'); } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <img id="imgCalendar1" height="20" alt="Change From Date" src="Calendar.png" /> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="imgCalendar1" TargetControlID="TextBox1"OnClientDateSelectionChanged="test"> </cc1:CalendarExtender> </div> </form></body></html>

I hope this helps!
Wim

MY BAD .......

The following example call's code behind: (the one in the button's click method on the serverside).

<%@. Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %><%@. Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function test() { var serverButton = document.getElementById('Button1'); serverButton.click(); serverButton = null; } </script> <style type="text/css"> .hide { visibility:hidden; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <img id="imgCalendar1" height="20" alt="Change From Date" src="Calendar.png" /> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="imgCalendar1" TargetControlID="TextBox1" OnClientDateSelectionChanged="test"> </cc1:CalendarExtender> <asp:Button ID="Button1" runat="server" Text="Button" CssClass="hide" /> </div> </form></body></html>

Kind regards,
Wim

deblemewim,

I tried your suggestion and it still won't work. Here is the code for the script function and the calendar extender. If you notice the PopupButtonID is the same button that I am trying to call the click event for. I thought this might be the problem so I removed it and it still doesn't work.

function test()
{
var serverButton = document.getElementById('btnEDate');
serverButton.click();
serverButton =null;
}

<cc1:CalendarExtenderID="ceEdate"runat="server"
TargetControlID="txtEDate"
PopupButtonID="btnEDate"
CssClass="MyCalendar"
OnClientDateSelectionChanged="test">
</cc1:CalendarExtender>

Hi dowens,

Well, I don't see your whole code, but I think the your code is not working because your PopupButtonID is a Button (imagebutton, inputbutton, ordinary asp button, ...).

I don't think that is possible!!

When you look at the ajax toolkit examples, they also use either the control (textbox) itself to let the calendar popup, OR they use an image (<img id="myImage" ... ).

So that is the setup you have to go for!!

Is your calendar poping up? Is is that what isn't working?

In my example, I use an image, so the calendar gets poped up. Then, I've set the property OnClientDateSelectionChanged to trigger a javascript function whenever the date changes in the TargetControlID .

When that happens, the javascript locates an ordinary asp:button on the page (which I have hidden), and it triggers it's click event. That way I get code-behind.

If this still doesn't answer your questions, please let me know what exactly you are willing to achieve.

Kind regards,
Wim

Wim,

I think I may have found the issue. The function "test" is not finding the button. Even if I don't hide the button it still doesn't find it. I think the issue may be that I am using a masterpage. I tried your code on a test page and it works fine. The only difference I can find is the master page. I have placed the function in the <head> of the masterpage and I have also tried it on the content page. Neither one works.

Hi dowens,

Sorry for my late reply...

I did some research (since masterpages are quite new to me ...) and I found the following:http://forums.asp.net/t/1031073.aspx (xplaining about how to call javascript from a masterpage).

Now my example should work!

So, on my content page I have the following:

<%@. Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" title="Untitled Page" %><%@. Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> function test() {var serverButton = document.getElementById("<%= Button1.ClientID%>"); serverButton.click(); serverButton = null; } </script> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <img id="imgCalendar1" height="20" alt="Change From Date" src="Calendar.png" /> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="imgCalendar1" TargetControlID="TextBox1" OnClientDateSelectionChanged="test"> </cc1:CalendarExtender> <asp:Button ID="Button1" runat="server" Text="Button" CssClass="hide" /></asp:Content>

The script is now in the content page, but I guess it should also be possible to place it somewhere else or just use a link to it (haven't tested that ..)

Hope this helps!
Wim

Wim,

It works great!! Thanks for your help.

Dale

CalendarExtender: Popup does not go over elements with overflow:hidden

I've run into a problem whereby the calendar will not appear over html elements with overflow:hidden applied to them. This occurs in FireFox and Opera

Here's the code to replicate it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style type="text/css"> div.row { background-color: #f7f7f7; margin: 0 0 10px 0; overflow: hidden; padding: 4px 0; zoom: 1; } div.row span { float: left; text-align: left; width: 200px; } div.row .controlGroup { width: 300px; float: left; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div class="row"> <asp:Label ID="Label1" Text="Date" runat="server" /> <div class="controlGroup"> <asp:TextBox ID="DateTextBox" runat="server" /> <ajaxToolkit:CalendarExtender ID="CalendarExtender1" TargetControlID="DateTextBox" runat="server" /> </div> </div> <div class="row"> <asp:Label ID="Label2" Text="Text" runat="server" /> <div class="controlGroup"> <asp:TextBox ID="Test6TextBox" runat="server" /> </div> </div> </form></body></html>

Bump, can anyone help on this one, i've tried setting the z-index on the ajax calendar to no avail.

I've managed to fix this issue in Opera with the following, still doesn't show correctly in FireFox though

.ajax__calendar div
{
z-index: 100;
}

Can anyone help on this one, still can't get the Calendar to display correctly in FireFox
Last bump!
This problem also exists on the AutoCompleteExtender

CalendarExtender: close on client selectes date?

Hi,

just wondering how to make the calendar close when a date is selected...

<

asp:Tablerunat="server"ID="CalendarTable"HorizontalAlign="Center"Width="100%"Height="100%"BackColor="LightGray"><asp:TableRow><asp:TableCellVerticalAlign="Top"><asp:Labelrunat="server"ID="fromDateLabel"Text="from:"CssClass="label"></asp:Label><asp:TextBoxrunat="server"ID="fromTB"CssClass="normal"></asp:TextBox><ajaxToolkit:CalendarExtenderrunat="server"ID="fromCalendar"TargetControlID="fromTB"CssClass="MyCalendar"Animated="true"></ajaxToolkit:CalendarExtender><br/></asp:TableCell><asp:TableCellVerticalAlign="Top"><asp:Labelrunat="server"ID="toDateLabel"Text="to:"CssClass="label"></asp:Label><asp:TextBoxrunat="server"ID="toTB"CssClass="normal"></asp:TextBox><ajaxToolkit:CalendarExtenderrunat="server"ID="toCalendar"TargetControlID="toTB"CssClass="MyCalendar"Animated="true"></ajaxToolkit:CalendarExtender></asp:TableCell><asp:TableCell><asp:Buttonrunat="server"ID="calendarQueryButton"CssClass="button"Text="Search"/></asp:TableCell></asp:TableRow></asp:Table>

I solved this problem by putting

PopupButtonID property to the same textBox

dark_angle:

I solved this problem by putting

PopupButtonID property to the same textBox

I had that. Removed it to solve another issue: with that property set as well, clicking anywhere else on the screen did not dismiss the calendar. And clicking on the second TextBox made a 2nd calendar without dismissing the first...

CalendarExtender: Any way to make dates unselectable?

I'd like to make certain dates unselectable (ie Public Holidays)

Anyone know of a way to do it with the new calendar, something along the lines of the DayRender event that we have for the bog standard ASP calendar would be perfec.

thanks.

hi, i have the same problem. i also want to make dates in furure unselectable. this is possible with old asp:Calender, but not with CalenderExtender of AjaxToolkit. if you have found a solution please inform me.

many many thanx. my email:paijyj@.gmail.com

My approach has been to allow them to select it but then use a validator to inform them they can't choose a date in the future/past whenever.

CalendarExtender, want only current month date visible

hi all,

I have a problem, I want to display days of only current month or whichever month a user selects. I mean by default calendar extender shows all dates , even if we have selected November, it will show some days of previous month and some days of next month along with current month's dates. I only want to display current month's dates.

I applied css specified in http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx

but that's changing color of each day. I was thinking by using css somehow i will hide previous and next month days, but of not avail.

please suggest,

thanks...

Hi Forums_user,

As far as I know, it is not supported now unless you modify its source code. CalendarExtender generate all the days , months and years on the client, you can find it in its source code with the name _buildDays,_buildMonths and _buildYears.

I hope this help

Best regards,

Jonathan

CalendarExtender z-Index issue

I am using the calendarExtender on a web form and when the calendar pops out it is underneath my drop down box. I tried changing the z-index but it doesnt help. Can anyone help me get around this issue.

Example:

<%

@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>

<%

@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Untitled Page</title><linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/>

</

head>

<

body><formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"/>

<asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate><div><b>Calendar with an associated button:</b><br/><asp:TextBoxrunat="server"ID="Date5"/><asp:Imagerunat="Server"ID="Image1"ImageUrl="Calendar_scheduleHS.png"/><br/><cc1:CalendarExtenderID="calendarButtonExtender"runat="server"TargetControlID="Date5"PopupButtonID="Image1"CssClass="MyCalendar"/>

<br/><asp:DropDownListID="DropDownList1"runat="server"><asp:ListItem>TEST TEST TEST TEST</asp:ListItem></asp:DropDownList></div></ContentTemplate></asp:UpdatePanel>

</form>

</

body>

</

html>

Thx

Hi claranced,

I just tried this code and it works fine for me. The calendar appears above the dropdown. I'd make sure there's nothing funny going on in your stylesheet.

Thanks,
Ted
I haven't tried your example but I take it your using IE6? This is a bug in IE where by drop down boxes are effectively on a high layer than the web page regardless of z-index (it delegates the drawing of a drop down to Windows). The only work-around I've found is to use an iframe shim behind the element you want to show. A google search for 'iframe shim' will turn turn up plenty of examples.

I am getting the same issue. Did you manage to find a solution? I suspect that my stylesheet may be to blame, as I have done a number of simplified tests and not encountered the same issue.

If you have found a solution, I would be interested to hear what it was.

Regards,

Will Houston

We have a work-around for the IE6 IFRAME thing that should be avoiding a problem here. Ted tried with IE6, so I don't think that's the issue. Could someone please post a simple demonstration of this problem along with the steps necessary to see it? Until we have that, it's hard to say what might be going on.

I havent found a solution. Im using IE6 with SP2. I tried the IFrame workaround but didnt have any luck. I have had multiple people on our team try this with the same result. Here is the simplest example. When I click on the hyperlink the calendar control pops up under the dropdownlist. If anyone has had any luck with the IFrame, I would love to see an example.

<%@. Page Language="VB" AutoEventWireup="false" CodeFile="CalendarTest.aspx.vb" Inherits="CalendarTest" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <style type="text/css"> .PopCal { z-index: 100; } </style></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:HyperLink ID="HyperLink1" runat="server">Click Here</asp:HyperLink> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1" PopupButtonID="HyperLink1" CssClass="PopCal"> </cc1:CalendarExtender> <br /> <asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem>Item One</asp:ListItem> <asp:ListItem>Item Two</asp:ListItem> </asp:DropDownList> </ContentTemplate> </asp:UpdatePanel> </div> </form></body></html>

The above example works for me in IE6 (using the web developer plugin I checked the IFRAME is there), but I have a more complex situation where it doesn't work (the calendar extender is several UpdatePanels deep and inside an animation popup where I've implemented my own IFRAME workaround - the calendar IFRAME is definately there though, just not working as expected).
I checked the IFrame in my browser as well and it is present, but still not pushing the calendar in front of the dropdownlist.

I also just ran across it, and at the worst time: as I was showing my boss the latest bits of the site i am working on..... I've been in IE7 here on my workstation and he is still on IE6.....

I look forward to an updated toolkit where this is addressed :-)

This thread describes the issue (CSS, not Calendar) and suggests a workaround:http://forums.asp.net/thread/1550925.aspx

David...

Trust me that with this post I mean absolutely no disrepect... i know there's tons and tons of hours into the toolkit so far and it really is an amazing set of controls that could give Yahoo's a run for their money...

But with that said, how can a bug/error-in-code like this get through QA? Is there no one testing it on IE6 just because IE7 became a "critical update" so the teams at MS think the whole world is off of IE6 and it's CSS issues? It's very frustrating to experience these as a developer expecially when there is absolutely no mention of "known issues"where they should be

I've been knee deep, and will continue to trudge through, in all this MS Ajax since the June CTP and up until this point I've just chalked these up "oh well, it's beta (or not even!)", but now that the core is RTM level (andyet still with glaring issues like this), we as developers need more stability and less instances of running over issues like this where it appears that not even one QA person thought about checking this stuff across more than FireFox and IE7

Another example of this is thePre-Compilation error of RC1 (i really fail to see how that got through testing as well), i know that's not your area per se, but we're all expecting more from the whole MS Ajax framework

It's hard for me to post something like this because being a programmer of VB and SQL Server and now MS Ajax has been my life both professionally and personally for the past 8 years, but things are getting worse rather than better it seems... i could point out all sorts of problems that just simply shouldn't be there that stop manay developers dead in their tracks...

I know this isn't probably fair to post this in response to your David, as i know you are just on the Toolkit team and i also know from attending your DevConnection's sessions that you are very excited and dedicated to this Toolkit project, but it's issues like this z-index issue that are just super frustrating to run into

MorningZ,

We make every effort to comprehensively test on IE6 as well as on IE7, Firefox, Sarfari, and now Opera. As I currently understand it, the particular issue under discussion here is no more or less a problem on IE6 than on any other browser. It stems from the CSS rules for z-index, specifically as they relate to specially position-ed elements on a page (see the links from my discussion in the related thread (http://forums.asp.net/thread/1550925.aspx)). As such, a web page must be laid out in a fairly specific manner in order to trigger this problem - and that's not one of the types of layouts we'd tried before the 10123 release. Is that unfortunate? Yes. Is it something we could possibly have tried and discovered? Sure. However, we'll never be able to cover every scenario that every user might possibly come up with no matter how much we try. As it happens in this case, the contributor of the Calendar has replied to that thread with a suggestion that can be applied by users to their web page to customize the styling of the Calendar control and address the issue for their specific scenario. If it works well, we'll add mention of it to the Calendar sample page as you suggest. That's not quite as good as avoiding the problem in the first place, but I hope it's close.

You mention a couple of other issues with ASP.NET AJAX itself - I'm not going to address them here since I'm not on that team and don't have the right context to do so. But one of the things my team is doing with the Toolkit project is releasing updates more often so that we can quickly address issues that come up. Our development practices are a little more relaxed than typical Microsoft teams - but we're also quite a bit more agile because of it. In this case, we're planning an update for this Thursday (about 9 days after our last release) to address some of the more annoying issues that have come up on the Forums. The issue you raised was already on the list for this release. :)

We're listening to your feedback and trying to do what we can to address the issues you raise. Thanks for taking the time to bring this to our attention and share your thoughts here!

David Anson:

As I currently understand it, the particular issue under discussion here is no more or less a problem on IE6 than on any other browser.

I'm not meaning to nitpick or start an argument here but I have to disagree with you on this one (and I think this was part of the point MorningZ was trying to get accross). The issue under discussion here (of the calendar appearing under a drop down box) is ONLY an IE6 issue, it does not occur on any other browser and is initially caused by an IE6 bug, and further by IE6s incorrect CSS handling (not CSS itself).

David Anson:

a web page must be laid out in a fairly specific manner in order to trigger this problem

I'll have to agree with you again here - the page has to be laid out in a fairly specific manner not to trigger this problem. The problem appears to be when the calendar extender is placed inside an absolute or fixed positioned element. For some reason doing this breaks the iframe fix.

As an aside (but still related) doing so also causes the overflow property of the container element to function as 'hidden' in both IE6 and IE7.

Thanks for the great work David. I hope to see a fix soon.
I have put up some detailed documentation on how to skin Calendar and Tabs athttp://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx.

CalendarExtender wont display the calendar.

Hello,

I have been trying to get the CalendarExtender control to work in one of my pages work several days now. I used the sample website in the toolkit as a guide. The Calendar.aspx page in the sample website works fine if I add it to my project but when I try to use the extender on one of my pages I get a Javascript error when I click on the textbox that I have attached to the extender. The error reads:

Line: 548

Char: 13

Error: 'this._popupBehavior' is null or is not an object

If anyone out there cares, I found the problem. It would seem that a different datepicker control that I was using had a conflict with the CalendarExtender. I had been using Basic Date Picker Lite because it was the best FREE control that acted like I wanted it to. Once I removed the other control the CalendarExtender worked like a champ. The CalendarExtender even offers me more flexibility than BDPLite. Anyway, I hope that my suffering means that someone else won't have to.

CalendarExtender with a ModalPopupExtender and missing weekdays

Hi

I am trying to use a CalendarExtender inside a Panel being shown as a ModalPopup. The functionality is fine , however the calendar has cropped two days of it the week of a week meaning that I am only seeing fron Sunday till Thursday. How am I to fix this or work around it ?

<asp:LinkButton ID="LinkButton1" runat="server">Godkend</asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="modalBackground" CancelControlID="Button2" runat="server" TargetControlID="LinkButton1" PopupControlID="Panel1">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" style="display:none">
<div >
<fieldset>
<legend>Detajler</legend>
<asp:RadioButtonList ID="RadioButtonList2" runat="server">
<asp:ListItem Value="0" Selected="True">Alle</asp:ListItem>
<asp:ListItem Value="1" >Valgte</asp:ListItem>
</asp:RadioButtonList>


<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Value="2" Selected="True">Godkendt</asp:ListItem>
<asp:ListItem Value="1">Afvist</asp:ListItem>
<asp:ListItem Value="0">Afventer</asp:ListItem>
</asp:RadioButtonList>
<asp:Label ID="Label4" runat="server" Text="Dato"></asp:Label><br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox2" >
</cc1:CalendarExtender>
</fieldset>
<div>
<asp:Button ID="Button1" runat="server" Text="Ok" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Cancel" />
</div>
</div>
</asp:Panel>

Regards

I copied your code and it worked just fine for me. What timezone are you in?

I copied your code and it worked just fine for me. What timezone are you in?

I copied your code and it worked just fine for me. What timezone are you in?

I

I copied your code and it worked just fine for me. What timezone are you in?

I know

I copied your code and it worked just fine for me. What timezone are you in?

...

DisturbedBuddha:

I copied your code and it worked just fine for me. What timezone are you in?

I am in CET +1h. I can see others having experienced this issue also. They have been able to work around with some CSS tricks , but I have not been able to.

http://forums.asp.net/p/1089990/1642856.aspx

CalendarExtender to fill 2 date text boxes

Anybody know of a way for a single CalendarExtender to fill 2 text boxes?

I would like a single calendar to fill both a start and end date. Because the TargetControlID only takes one parameter, I'm not sure how to do this.

Spent some time on google trying to find a solution but came up empty.

Thank you.

I came up with this simple solution.

In Page_Load

If Page.IsPostBack =FalseThen

Me.txtStartDate.Attributes.Add("onchange","FillEndDate()")

End if

<scripttype="text/javascript"language="javascript">

function FillEndDate(){

document.aspnetForm.ctl00_ContentPlaceHolder1_txtEndDate.value = document.aspnetForm.ctl00_ContentPlaceHolder1_txtStartDate.value

}

</script>

CalendarExtender Rendering Problems

Hello,

I'm experiencing some rendering glitches with the CalendarExtender control. The calendar doesn't fit within the panel that it renders. For instance, one of my calendars shows only Sunday-Friday, while another shows only Sunday-Wednesday. There are some other minor glitches when I navigate to different levels. This seems to depend on the padding of the parent control.

I temporarily disabled my theme, and everything works fine, but reapplying the theme reintroduces the problem. I've tried adding the .ajax__calendar styles to my theme with no noticeable effect.

Thanks in advance.

Hi rmuti,

what if you add a cssclas to your calendar extender?

use css class MyCalendar,

 <style type="text/css"> .MyCalendar .ajax__calendar_container { border:1px solid #646464; background-color: lemonchiffon; color: red;}.MyCalendar .ajax__calendar_other .ajax__calendar_day,.MyCalendar .ajax__calendar_other .ajax__calendar_year { color: black;}.MyCalendar .ajax__calendar_hover .ajax__calendar_day,.MyCalendar .ajax__calendar_hover .ajax__calendar_month,.MyCalendar .ajax__calendar_hover .ajax__calendar_year { color: black;}.MyCalendar .ajax__calendar_active .ajax__calendar_day,.MyCalendar .ajax__calendar_active .ajax__calendar_month,.MyCalendar .ajax__calendar_active .ajax__calendar_year { color: black; font-weight:bold;} </style>

Please let me know if this helps ;)

Wim

Nope, that just makes things worse. Now the calendar is transparent for some reason.

damn maybe I gave you the wrong example,

but thats just because not all the styles are applied ...

The real issue was that not all the dates were shown right?
And now they are? Or not?

If this is the case, then we can just ajust the style-tags and you're problem is solved!

Kind regards,
Wim

Nope, Saturday is still cut off.

rmuti:

Nope, Saturday is still cut off.

Hmm, could you replicate this behavior in an example? That way I can look into the problem myself.

Kind regards,
Wim

Hi Rmuti,

Please remove the CSS settings that you added to the CalendarExtender manually and also you should remove the unnecessay parts, then have a test. If the problem is still there, please adjust your time zone. If all these don't work, we suggest that you should download a sample fromhttp://www.asp.net/learn/ajax-videos/ and test the sample. If the sample also doesn't work, you should focus on your system enviroments. For example, Microsoft ASP.NET AJAX Extensions , AJAX Control Toolkit's version etc.

Please feel free to let me know with more information. Sometimes , we really need a workable sample to find out the exact root cause.

Best regards,

Jonathan

OK, I've identified the cause of the issue. The calendar renders the days/months/years in a table, but does not specify the padding for the table cells. As a result, if you place the calendar within a table cell with padding, then the calendar table will inherit the padding from the parent table cell. Here is a simple page that will reproduce the issue:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style type="text/css"> table.myTable tr td { padding: 20px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <table class="myTable"> <tr> <td>Date:</td> <td> <asp:TextBox ID="dateTextbox" runat="server" /> <ajaxToolkit:CalendarExtender ID="dateCalendar" runat="server" TargetControlID="dateTextBox" /> </td> </tr> </table> </form> </body></html>

I've been able to resolve the issue by explicitly specifying the padding for the calendar table as follows:

 
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style type="text/css"> table.myTable tr td { padding: 20px; } .ajax__calendar_body table tr td { padding: 0px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <table class="myTable"> <tr> <td>Date:</td> <td> <asp:TextBox ID="dateTextbox" runat="server" /> <ajaxToolkit:CalendarExtender ID="dateCalendar" runat="server" TargetControlID="dateTextBox" /> </td> </tr> </table> </form> </body></html>
 

Hi Rmuti,

In the first situation, table.myTable tr td { padding: 20px; } has an impact on the CalendarExtender. Thanks for sharing your experience.

Best regards,

Jonathan

Thanks to this post I my calendar renders correctly BUT I am missing hover background shading
has anyone got any ideas what to add and where to get these back? I know they are being overidden by something but I don't know what...

.MyCalendar.ajax__calendar_container {border:1pxsolid#646464;background-color:#10377c;color:#ffffff;font-size:8pt;font-family:Verdana,'Colonna MT';}

.MyCalendar.ajax__calendar_bodytabletrtd {padding:0px;color:#10377c;background-color:#ffffff;}

CalendarExtender question

I have a textbox, an image button and a calendar extender on my form. If I go with the default and don't make an entry for the PopupControlID attribute, the calendar gets displayed when the textbox gets focus and I can select a date from it. If I use the image button as the entry for the PopupControlID attribute, the calendar initially gets displayed but then the whole page posts to the server and returns before a date can be selected. There aren't any AJAX controls on the MasterPage and nothing in it's code-behind that would cause this issue. There also isn't currently any code-behind in my form ... just HTML ... and I'm posting it in its entirety below:

<%@dotnet.itags.org.PageLanguage="VB"MasterPageFile="~/MasterPages/MasterPage.master"AutoEventWireup="false"CodeFile="CalendarTest.aspx.vb"Inherits="Correspondence_CalendarTest"title="Untitled Page" %>
<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

<asp:ScriptManagerrunat="server"></asp:ScriptManager>
<br/><br/>
<asp:TextBoxID="Date1"runat="server"></asp:TextBox>
<asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/Images/Calendar_scheduleHS.png"/>
<cc1:CalendarExtenderID="CalendarExtender1"runat="server"TargetControlID="Date1"PopupButtonID="ImageButton1">
<%--
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Date1">
--%>
</cc1:CalendarExtender>

</asp:Content>

Why does this bloody thing insist on posting back to the server and is there anything I can do to prevent it from occurring?

TIA,

Allen

this is from another issue close to what you have because when you click the button a second time it does a post back as well. there is the solution from another post.

just to say, I've found this can be solved by creating a plain html img tag and assigning the popubbutton id to that instead of an asp imagebutton control

Did you make sure the CAUSESVALIDATION property of the Calendarextender is set to false? There is no problem using an asp:imagebutton control if you have that done. I mean that way when the Calendar control is clicked, all that happens is the control opens and selection is made.

Dollarjunkie

CalendarExtender Problem

Hi,

i have a problem with the CalendarExtender. i am trying to use this calendar in one of my projects and it is working fine excepting when i try to select a date for April. when the April month is selected all the days are 29. I tried to run the calendar from SampleWebSite that came with the Control toll kit and it is not working. it is the same problem.

This is the code that i am using :

<asp:TextBox ID="TextBox18" runat="server" ToolTip="" Style="width: auto; height: auto;"></asp:TextBox>
<asp:ImageButton runat="Server" ID="Image18" ImageUrl="../MediaFiles/Calendar_scheduleHS.png"
 AlternateText="Click to show calendar" /><br />
<ajaxToolkit:CalendarExtender ID="calendarButtonExtender18" runat="server" TargetControlID="TextBox18"
 PopupButtonID="Image18" />

Please help me.  

Hi,

I tried both your code and the sample web site, they worked fine.

Can you make sure that you didn't change related script by any chance? Please download the most recent version and try again.

We are marking this issue as "Answered". If you have any new findings or concerns, please feel free to unmark the issue.

sorry worng post

CalendarExtender positioning problem in wide gridview

Hey all, I place a textbox and a calendarextender within an edititemtemplate of a gridview. Everything works fine, but the calendar popup always appears in the same place regardless of the column. In other words, I have 23 columns in a gridview. If I have calendar extenders in there for columns 3, 9, and 23 the popups always appear at the same place instead of right next to their associated textbox. I can't figure out how to get them to stay put. There's no funky CSS issues here. I'm not absolute positioning anything. Thoughts?

Behold an example:

<asp:TemplateFieldHeaderText="Offload"SortExpression="OFFLOAD"HeaderStyle-BackColor="#87CEEB">

ItemTemplate>

<asp:LabelID="lblOFFLOAD"runat="server"Text='<%#Bind("OFFLOAD","{0:d}")%>'Width="70px"/></ItemTemplate><EditItemTemplate><asp:TextBoxID="txtOFFLOAD"runat="server"Text='<%#Bind("OFFLOAD","{0:d}")%>' /><cc1:CalendarExtenderID="CalOFFLOAD"runat="server"TargetControlID="txtOFFLOAD"/></EditItemTemplate></asp:TemplateField>Anyone? Help!
Anyone? Help! Please? :)

It seems I'm having the same problem you are. I guess we are the only ones with this problem because I can't seem to find an answer anywhere and no one has a solution. If you can find out anything please post a reply with the solution and I will do the same.

Thanks,

Mike

CalendarExtender positioning

When binding the CalendarExtender to an target textbox, the calendar will display immediatly below the textbox.
Is there a way to control the positioning of the calender so it will appear for example abowe the textbox?

Hi,

you can use

PopupPosition="TopRight" / TopLeft / BottomLeft/ BottomRight

in CalendarExtender tag property

hope it helps

Thanks, this answered my question.
Your answer made me realize that didn't have the latest release of the toolbox installed.
The one I had didn't support the PopupPosition attribute.Thanks

CalendarExtender padding within Table

Hi,

I have a Textbox/CalendarExtender in a table, whose td style contains "padding:10px;". When I click in the textbox to open the calendar it appears to be all messed up. On further investigation, it appears to be inheriting the padding from my table. When I remove the "padding:10px;" line from my table style, the calendar displays fine. Has anyone any idea how to override this?

Many thanks,

Simon

What if you set the CssClass property for the CalendarExtender and in the class definition, you set the padding on td:s to 0?

CalendarExtender onclick?

When you click on a date in the ajaxToolkit's Calendar Extender, the calendar doesn't disappear. What can I do so that it disappears on clicking a date?

to close the calendar onClick i set this up in the code behind

//Hide the calendarprotected override void OnLoad(EventArgs e) { Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"hideCalendar", @."function hideCalendar(cb) { cb.hide(); }",true);base.OnLoad(e); }

and this is what the asp code looks like

 <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" OnClientDateSelectionChanged='hideCalendar'>

Great, I had the same issue.

Actually I noticed that you don't need to have any code behind, you can simply put:

OnClientDateSelectionChanged="function hideCalendar(cb) { cb.hide(); }"

And it will work. Works even if you have more than one extender.

Thanks a lot guys! You saved a life today!

Hello..!

Is there anyone who can help me...! Please. I have created a web page with master page then i inserted CalendarExtender in the web page but in running mode when i click on the related textbox it doesnt show the calendar... I dont know why?...
note: i inserted script manager in master page......

So, What is the possible solution..???

Thanks, Waseem

I just had problems with the calendar extender myself so I think i can help... but u'll have to show us what you have already!