Click here to Skip to main content
Rate this: bad
good
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 3:19am
Ruwaldo733
Edited 2-Oct-12 3:30am
v2
Comments
Ruwaldo at 2-Oct-12 8:31am
   
I added the code in
gladiatron at 2-Oct-12 8:31am
   
"messes up the whole calendar"??? what do you mean?
Ruwaldo at 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 at 2-Oct-12 9:58am
   
is your main content of the form in an update panel?
Ruwaldo at 2-Oct-12 10:11am
   
no and i am using a master page does this make a difference?
gladiatron at 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 at 2-Oct-12 10:21am
   
tried removing the css still has the same problem...
gladiatron at 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 at 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 at 3-Oct-12 6:35am
   
Thanks for your help but i ended up using a javascript JsDatePick instead works great.
niranjan479 at 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
0 Sergey Alexandrovich Kryukov 450
1 OriginalGriff 180
2 DamithSL 130
3 Dave Kreskowiak 120
4 Suvendu Shekhar Giri 110
0 OriginalGriff 7,645
1 DamithSL 5,614
2 Sergey Alexandrovich Kryukov 5,344
3 Maciej Los 4,961
4 Kornfeld Eliyahu Peter 4,539


Advertise | Privacy | Mobile
Web02 | 2.8.141223.1 | Last Updated 2 Oct 2012
Copyright © CodeProject, 1999-2014
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