Monday, March 26, 2012

My Calendar (AJAX asp.net) get NUTS? Only shows 5 days, instead of 7 days

Hi,

the problem is that my calendar shows only 5 days instead of 7 days. Any IDEAS? There is no (code-behind) code in CS file that does hide weekend.

here is a code

<asp:TextBox runat="server" ID="TBsearchFrom" Columns="10" />
<asp:TextBox runat="server" ID="TBsearchTo" Columns="10" />
<ajaxToolkit:CalendarExtender ID="cldFrom" runat="server"
TargetControlID="TBsearchFrom"
CssClass="MyCalendar"
Format="MM/dd/yy"
OnClientDateSelectionChanged = "function(e){calendar_hide(e);}"
FirstDayOfWeek="Monday"

/>
<ajaxToolkit:CalendarExtender ID="cldTo" runat="server"
TargetControlID="TBsearchTo"
CssClass="MyCalendar"
Format="MM/dd/yy"
OnClientDateSelectionChanged = "function(e){calendar_hide(e);}"
FirstDayOfWeek="Monday"
/>
<br/>


I had this same issue. The problem was that the calendar was picking up on CSS set for my site, which didn't have the right padding for each of the calendar's components. What I did was copy the calendar's padding properties in the CSS from the example in the toolkit and paste it into my CSS file, and customized the colors from there.

Hi there,

I am having the same kind of problem, my calendar control is contained within a detailsview. I have added the css to look like this

.MyCalendar.ajax__calendar_container {

border:1pxsolid#646464;

background-color:#ffffff;

color:#000000;

}

.MyCalendar

.ajax__calendar_footer {border-top:1pxsolid#f5f5f5;

}

.MyCalendar

.ajax__calendar_dayname {border-bottom:1pxsolid#f5f5f5;

}

.MyCalendar

.ajax__calendar_day {border:1pxsolid#ffffff;

}

.MyCalendar

.ajax__calendar_month {border:1pxsolid#ffffff;

}

.MyCalendar

.ajax__calendar_year {border:1pxsolid#ffffff;

}

.MyCalendar

.ajax__calendar_active.ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_active.ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_active.ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_other.ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;

}

.MyCalendar

.ajax__calendar_other.ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;

}

.MyCalendar

.ajax__calendar_hover.ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_hover.ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_hover.ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;

}

.MyCalendar

.ajax__calendar_hover.ajax__calendar_title {color:#0066cc;

}

.MyCalendar

.ajax__calendar_hover.ajax__calendar_today {color:#0066cc;

}

But whenever I open the calender I am only presented with 8 days of the month (the 1st 4 and last 4) I think its a padding issue but I dont know what else to change


Never mind my last post.

But if anyone is having the same problem all you need to do is add some extra css for the body of the calendar.

In my case I had mine within a td

.MyCalendar

td

{

padding:0px,0px,0px,0px;border-spacing:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;

}

No comments:

Post a Comment