Wednesday 9 May 2012

Ajax Calender Extender Control

Ajax Calender Extender Control
     
Ajax Calender Extender Control: Its a Light weight 
control and works fine!




For that you have to drag  Ajax's ToolkitScriptManager and required a TextBox and Ajax's CalendarExtender

Below is the css for CalendarExtender,and the Textbox where we need to control CalendarExtender


  <style type="text/css">
 .cal_Theme1 .ajax__calendar_container   {
        background-color: #e2e2e2; 
        border:solid 1px #cccccc;
    }
    
    .cal_Theme1 .ajax__calendar_header  {
        background-color: #ffffff; 
        margin-bottom: 4px;
    }
    
    .cal_Theme1 .ajax__calendar_title,
    .cal_Theme1 .ajax__calendar_next,
    .cal_Theme1 .ajax__calendar_prev    {
        color: #004080; 
        padding-top: 3px;
    }
    
    .cal_Theme1 .ajax__calendar_body    {
        background-color: #e9e9e9; 
        border: solid 1px #cccccc;
    }
    
    .cal_Theme1 .ajax__calendar_dayname {
        text-align:center; 
        font-weight:bold; 
        margin-bottom: 4px; 
        margin-top: 2px;
    }
    
    .cal_Theme1 .ajax__calendar_day {
        text-align:center;
    }
    
    .cal_Theme1 .ajax__calendar_hover .ajax__calendar_day,
    .cal_Theme1 .ajax__calendar_hover .ajax__calendar_month,
    .cal_Theme1 .ajax__calendar_hover .ajax__calendar_year,
    .cal_Theme1 .ajax__calendar_active  {
        color: #004080; 
        font-weight: bold; 
        background-color: #ffffff;
    }
    
    .cal_Theme1 .ajax__calendar_today   {
        font-weight:bold;
    }
    
    .cal_Theme1 .ajax__calendar_other,
    .cal_Theme1 .ajax__calendar_hover .ajax__calendar_today,
    .cal_Theme1 .ajax__calendar_hover .ajax__calendar_title {
        color: #bbbbbb;
    }
                            </style>
                    <br />


                    <asp:TextBox ID="TextBoxDate" runat="server" ></asp:TextBox>
                     <asp:CalendarExtender 
    CssClass="cal_Theme1" 
    ID="CalendarExtender1" 
    runat="server" 
    PopupButtonID="Image1"
    PopupPosition="Right"
    TargetControlID="TextBoxDate">
                       </asp:CalendarExtender>


You may also like

 Best css style for autocomplete.
 Autocomplete Extender Control.
Ajax Progress Bar.







No comments:

Post a Comment

Print Only Grid View in ASP.net

ASP.net How to Print Only GridView < div id ="gridviewDiv" >   < asp:GridView ID ="gridViewToPri...