使用CalendarExtender控件显示错位解决

如果你使用CalendarExtender控件后出现了错位现状!则在你的页面加上这两句CSS代码!

.ajax__calendar {
    position: relative;
    left: 0px !important;
    top: 0px !important;
    visibility: visible; 
    display: block;
}
.ajax__calendar iframe {
    left: 0px !important;
    top: 0px !important;
}

如果加上这两句依旧没有解决问题: 再加上以下的CSS code!

.ajax__calendar_container{padding:4px;position:absolute;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}
.ajax__calendar_body{height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}
.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years{top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}
.ajax__calendar_container TABLE {font-size:11px;}
.ajax__calendar_header{height:20px;width:100%;}
.ajax__calendar_prev{cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url(WebResource.axd?d=x6lt9HfG5Si8NZjMNt1DLcY6US8hUl3G4muzIFtahMQFZTbwxJ00qsx5N8jeAW90ZvGxZ6SJJh48yx62JKItzQ2&t=633053122925312500);}
.ajax__calendar_next{cursor:pointer;width:15px;height:15px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url(WebResource.axd?d=x6lt9HfG5Si8NZjMNt1DLcY6US8hUl3G4muzIFtahMQFZTbwxJ00qsx5N8jeAW90HZemRms4wXOo1BZWTwWtNQ2&t=633053122925312500);}
.ajax__calendar_title{cursor:pointer;font-weight:bold;}
.ajax__calendar_footer{height:15px;}
.ajax__calendar_today{cursor:pointer;padding-top:3px;}
.ajax__calendar_dayname{height:17px;width:17px;text-align:right;padding:0 2px;}
.ajax__calendar_day{height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}
.ajax__calendar_month{height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
.ajax__calendar_year{height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}

.ajax__calendar .ajax__calendar_container{border:1px solid #646464;background-color:#ffffff;color:#000000;}
.ajax__calendar .ajax__calendar_footer{border-top:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_dayname{border-bottom:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_day{border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_month{border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_year{border:1px solid #ffffff;}

.ajax__calendar .ajax__calendar_active .ajax__calendar_day{background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_month{background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_year{background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

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

.ajax__calendar .ajax__calendar_hover .ajax__calendar_day{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_month{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_year{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_title{color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_today{color:#0066cc;}

如果的日历控件显示在其他层下面： 那么在 .ajax__calendar .ajax__calendar_containe 里面设置 z-index 值来解决! 如果是要本地化，在ScriptManager中添加EnableScriptGlobalization="true" EnableScriptLocalization="true"即可。

 

如果日历控件和其他样式发生了冲突,如显示不全! 则可以调 .ajax__calendar_container 的width属性!