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;}
