Click here to Skip to main content
12,511,544 members (50,132 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: C# ASP.NET Ajax
Hi all, i am having a problem with the ajaxtoolkit calendar. When the page first loads and i click in the textbox the calendar pops up fine but when i click on the month or year at the top of the calendar it just messes up the whole calendar.

this is on the asp side:

<ajaxToolkit:CalendarExtender ID="calender_start_date" CssClass="red" runat="server" TargetControlID="TextBox1" PopupPosition="Right" Format="yyyy-MM-dd">
<asp:TableCell><asp:TextBox ID="TextBox_name" runat="server" Width="153px">

and the css:

.red .ajax__calendar_container
{
width:190px;
background-color: #ffffff; border:solid 1px #eeeeee;
-moz-border-radius-topleft: 8px/*{cornerRadius}*/; -webkit-border-top-left-radius: 8px/*{cornerRadius}*/; -khtml-border-top-left-radius: 8px/*{cornerRadius}*/; border-top-left-radius: 8px/*{cornerRadius}*/;
-moz-border-radius-topright: 8px/*{cornerRadius}*/; -webkit-border-top-right-radius: 8px/*{cornerRadius}*/; -khtml-border-top-right-radius: 8px/*{cornerRadius}*/; border-top-right-radius: 8px/*{cornerRadius}*/;
-moz-border-radius-bottomleft: 8px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 8px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 8px/*{cornerRadius}*/; border-bottom-left-radius: 8px/*{cornerRadius}*/;
-moz-border-radius-bottomright: 8px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 8px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 8px/*{cornerRadius}*/; border-bottom-right-radius: 8px/*{cornerRadius}*/;
}
.red .ajax__calendar_body
{
width:180px;
height:150px;
background-color: #ffffff; border: solid 1px #eeeeee;
}
.red .ajax__calendar_header
{
background-color: #CC0505; margin-bottom: 8px;
-moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/;
-moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/;
-moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/;
-moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
.red .ajax__calendar_title
{
color: #ffffff; padding-top: 3px;
}
.red .ajax__calendar_next,
.red .ajax__calendar_prev
{
border:solid 2px #ffffff;
background-color: #ffffff;
-moz-border-radius-topleft: 18px/*{cornerRadius}*/; -webkit-border-top-left-radius: 18px/*{cornerRadius}*/; -khtml-border-top-left-radius: 18px/*{cornerRadius}*/; border-top-left-radius: 18px/*{cornerRadius}*/;
-moz-border-radius-topright: 18px/*{cornerRadius}*/; -webkit-border-top-right-radius: 18px/*{cornerRadius}*/; -khtml-border-top-right-radius: 18px/*{cornerRadius}*/; border-top-right-radius: 18px/*{cornerRadius}*/;
-moz-border-radius-bottomleft: 18px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 18px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 18px/*{cornerRadius}*/; border-bottom-left-radius: 18px/*{cornerRadius}*/;
-moz-border-radius-bottomright: 18px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 18px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 18px/*{cornerRadius}*/; border-bottom-right-radius: 18px/*{cornerRadius}*/;
}
.red .ajax__calendar_hover .ajax__calendar_next,
.red .ajax__calendar_hover .ajax__calendar_prev
{
border:solid 2px #f7f7f7;
background-color: #ffffff;
-moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/;
-moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/;
-moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/;
-moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
.red .ajax__calendar_dayname
{
text-align:center; margin-bottom: 4px; margin-top: 2px;
color:#000000;
}
.red .ajax__calendar_day,
.red .ajax__calendar_month,
.red .ajax__calendar_year
{
margin:1px 1px 1px 1px;
text-align:center;
border:solid 1px #eeeeee;
color:#000000;
background-color: #f3f3f3;
}
.red .ajax__calendar_hover .ajax__calendar_day,
.red .ajax__calendar_hover .ajax__calendar_month,
.red .ajax__calendar_hover .ajax__calendar_year
{
color: #ffffff; font-weight:bold; background-color: #328BC8;border:solid 1px #328BC8;
}
.red .ajax__calendar_active .ajax__calendar_day,
.red .ajax__calendar_active .ajax__calendar_month,
.red .ajax__calendar_active .ajax__calendar_year
{
color: #ffffff; font-weight:bold; background-color: #F7B64A;
}
.red .ajax__calendar_today .ajax__calendar_day
{
color: #CC0505; font-weight:bold; background-color: #ffffff;
}
.red .ajax__calendar_other,
.red .ajax__calendar_hover .ajax__calendar_today
{
color: #ffffff;
font-weight:bold;
}
.ajax__calendar_days
{
background-color: #ffffff;
}
Posted 2-Oct-12 2:19am
Ruwaldo735
Updated 2-Oct-12 2:30am
v2
Comments
Ruwaldo 2-Oct-12 8:31am
   
I added the code in
gladiatron 2-Oct-12 8:31am
   
"messes up the whole calendar"??? what do you mean?
Ruwaldo 2-Oct-12 8:38am
   
all the navigation of the calendar. There are no next or previous buttons showing and when i click on the top to view the months, the months show but the days still show too, and when i click on the years the months and days move down but still all three are shown and they don't fill the container anymore.
gladiatron 2-Oct-12 9:58am
   
is your main content of the form in an update panel?
Ruwaldo 2-Oct-12 10:11am
   
no and i am using a master page does this make a difference?
gladiatron 2-Oct-12 10:17am
   
it should not actually. Can you try removing the CSS formatting from the Calendar control and see if it works in its bare-bones layout? Sounds like a CSS issue more than anything else, because changing of months, dates, and years is a client side operation.
Ruwaldo 2-Oct-12 10:21am
   
tried removing the css still has the same problem...
gladiatron 2-Oct-12 10:58am
   
I just tried using the exact same code as yours except I didn't use <asp:TableCell>, it works perfectly. What is <asp:TableCell>?? why do you need it ?

UPDATE: just tried with TableCell as well, it still works without a problem!
gladiatron 2-Oct-12 11:02am
   
one other thing, the PopupPosition is either "BottomLeft, BottomRight, TopLeft or TopRight". I couldn't find "Right" as you have done in your code. Can you perhaps try changing Right to "TopRight" or "BottomRight"?
Ruwaldo 3-Oct-12 6:35am
   
Thanks for your help but i ended up using a javascript JsDatePick instead works great.
niranjan479 5-Oct-12 3:31am
   
I think u assigned wrong Id to TargetControlID of calendar.just check that u assigned the right control ID of textbox to TargetControlID property..

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.160929.1 | Last Updated 2 Oct 2012
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100