[Solved] Ajax ToolKit CalendarExtender not displaying correctly in ASP.Net

Last Reply 11 months ago By dharmendr

Posted 11 months ago

my calendar not workin properly. when i click dare its showing correctly.. but if i click month and year its not displaying properly. with this i had sent you my css code and my calendar pic. find these atttachment..

Picture

https://imgur.com/a/0zO9XeV

.black .ajax__calendar_container
{
font-family:Calibri;
font-size:16px;
width:260px;
background-color: #ffffff; border:solid 1px #666666;
-moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; -khtml-border-top-left-radius: 8px; border-top-left-radius: 8px;
-moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px; 
-moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; -khtml-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; -khtml-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
}
.black .ajax__calendar_body
{
font-size:16px;
width:250px;
height:180px;
background-color: #ffffff; border: solid 1px #ffffff;
}
.black .ajax__calendar_header
{
    font-size:16px;
background-color: #ffffff; margin-bottom: 8px;
-moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px;
-moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; 
-moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} 
.black .ajax__calendar_title
{
    font-size:16px;
color: #000000; padding-top: 3px;
}
.black .ajax__calendar_next,
.black .ajax__calendar_prev
{
    font-size:16px;
border:solid 4px #ffffff;
background-color: #ffffff;
-moz-border-radius-topleft: 18px; -webkit-border-top-left-radius: 18px; -khtml-border-top-left-radius: 18px; border-top-left-radius: 18px;
-moz-border-radius-topright: 18px; -webkit-border-top-right-radius: 18px; -khtml-border-top-right-radius: 18px; border-top-right-radius: 18px; 
-moz-border-radius-bottomleft: 18px; -webkit-border-bottom-left-radius: 18px; -khtml-border-bottom-left-radius: 18px; border-bottom-left-radius: 18px;
-moz-border-radius-bottomright: 18px; -webkit-border-bottom-right-radius: 18px; -khtml-border-bottom-right-radius: 18px; border-bottom-right-radius: 18px;
}
.black .ajax__calendar_hover .ajax__calendar_next,
.black .ajax__calendar_hover .ajax__calendar_prev
{
    font-size:16px;
border:solid 4px #328BC8;
background-color: #ffffff;
-moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px;
-moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; 
-moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
}
.black .ajax__calendar_dayname
{
font-size:16px;
text-align:center;
color:#000000;
width:35px;
height:30px;
background-color: #ffffff;
} 
.black .ajax__calendar_day,
.black .ajax__calendar_month,
.black .ajax__calendar_year
{
font-size:16px;
width:35px;
height:30px;
text-align:center;
border:solid 0px #ffffff;
color:#000000;
background-color: #ffffff;
}
.black .ajax__calendar_hover .ajax__calendar_day,
.black .ajax__calendar_hover .ajax__calendar_month,
.black .ajax__calendar_hover .ajax__calendar_year
{
font-size:16px; text-decoration:none;
width:35px;
height:30px;
color: #ffffff; font-weight:bold; background-color: #30A5FF;border:solid 1px #30A5FF;
}
.ajax__calendar {
     z-index:10002 !important;
    position: relative;
    left: 490px !important;
    top: 490px !important;
    visibility: visible; display: block;
}
.ajax__calendar iframe
{
    left: 0px !important;
    top: 0px !important;
}
.black .ajax__calendar_active .ajax__calendar_day,
.black .ajax__calendar_active .ajax__calendar_month,
.black .ajax__calendar_active .ajax__calendar_year
{
font-size:16px;

color: #ffffff; font-weight:bold; background-color: #30A5FF;
}
.black .ajax__calendar_today .ajax__calendar_day
{
font-size:16px;
color: #000000; font-weight:bold; background-color: #ffffff; 
}
.black .ajax__calendar_other,
.black .ajax__calendar_hover .ajax__calendar_today
{
font-size:16px;
color: #000000;
font-weight:bold;
}
.black .ajax__calendar_days
{
background-color: #ffffff;
}

 

<cc1:CalendarExtender ID="CalExtfrm" PopupButtonID="txtfromDate" CssClass="black" runat="server" TargetControlID="txtfromDate" Format="MM/dd/yyyy"></cc1:CalendarExtender>
<asp:TextBox ID="txtfromDate" AutoCompleteType="Disabled" Width="90px" CssClass="disable_future_dates" placeholder="From" name="txtfromDate" class="textboxes" Onfocus ="displayCalendar(this,'mm/dd/yyyy',this)" runat="server" ></asp:TextBox>

 

Posted 11 months ago
sambath says:
.black .ajax__calendar_day,
.black .ajax__calendar_month,
.black .ajax__calendar_year
{
font-size:16px;
width:35px;
height:30px;
text-align:center;
border:solid 0px #ffffff;
color:#000000;
background-color: #ffffff;
}

Replace the above css with the below and adjust according to your need.

.black .ajax__calendar_day
{
    font-size: 16px;
    width: 35px;
    height: 30px;
    text-align: center;
    border: solid 0px #ffffff;
    color: #000000;
    background-color: #ffffff;
}
        
.black .ajax__calendar_month, .black .ajax__calendar_year
{
    font-size: 16px;
    width: 62px !important;
    height: 40px !important;
    text-align: center !important;
    border: solid 0px #ffffff;
    color: #000000;
    background-color: #ffffff;
}