How to apply css for radcalendar

[Saimadhukar]

Hello,

Recently i am working with radcalendar control ,it works well but our requirement is to change the css  of radcalendar like the image i have attached below ,is it possible to do like that ,how to do that ,please respond if u have any idea about it.

[Princy]

Hello,

Try the following CSS.
CSS:

<style type="text/css">
//changing the month change image
 .rcNext
   {
      background:url("../Images/monthdropdown.gif") !important;
   }
// to set the footer color.
 .RadCalendar .rcFooter
  {
    background-color:#CBDBEE  !important;
  }
    </style>

ASPX:

<telerik:RadCalendar ID="cal" runat="server" SelectedDate="2011/12/12" Skin="WebBlue">
    <SelectedDayStyle BorderColor="Red" /> //to set border color for today's date.
    <FooterTemplate>
       <center>
       <asp:Button ID="Button1" runat="server" Height="25px" Text="Today" />
     </center>
   </FooterTemplate>
</telerik:RadCalendar>

Thanks,
Princy.

[Saimadhukar]

Hello Princy,

thanks that works fine  i had set the button in footer,sorry i had made  a mistake i am using rad datepicker not calendar but the code u sent is applied for raddatepicker too  after writing it under claendar tag of date picker. In the image  send in the attachments   they applied color code(#1F3E74) to raddatepicker header( i have marked it in image) where Month name should be there how to apply  that same color to raddatepicker/Calendar in  header(where moth name is there).thanks again.

Regards,
Madhukar.

[Princy]

Hello,

Try the following CSS to set color to header.
CSS:

<style type="text/css">
 .RadCalendar .rcTitlebar .rcTitle
    {
      color:#1F3E74 !important;
    }
</style>

Thanks,
Princy.

[Saimadhukar]

Hello Princy ,

Thanks that worked fine, actually i have a text box where i placed this radpicker ,now what i want is we have placed previously a button in radpickers footer called Today, iwant to write a  javascript to that so that when i click on that today button todays date should be displayed in textbox.i had written  button click event for that button manually but since it is in radpanel its serverside click event is not working ,so i wanted to use javascript in javascript datepicker undefined error is showing how to do this, iam attaching my javascript and design code.

<rad:RadDatePicker ID="rdpStartDate" Skin="Customized" EnableEmbeddedSkins="false"   runat="server" Culture="en-US">
                                                                        <Calendar ShowRowHeaders="false" runat="server">
                                                                            <SelectedDayStyle BorderColor="Red" />
                                                                            <FooterTemplate>
                                                                                <center>
                                                                                    <asp:Button ID="btntoday"  runat="server" OnClientClick="btntoday();"
                                                                                        Font-Names="Tahoma" Height="25px" Font-Size="12px" Width="50px" Text="Today" />

                                                                                </center>
                                                                            </FooterTemplate>
                                                                        </Calendar>
                                                                        <DateInput ID="DateInput1" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy"
                                                                            runat="server">
                                                                        </DateInput>
                                                                    </rad:RadDatePicker>

javascript:

 <script type="text/javascript">
        function btntoday() {

          var txt = document.getElementById('rdpStartDate').value;
           var dt = new Date();
          document.getElementById('rdpStartDate').value = dt;
           datepicker.set_selectedDate(dt);
        }
    </script>

Regards,
madhukar. 

[Princy]

Hello,

Try the following code snippet to set today's date in TextBox.

JS:

function OnClientClick()
   {
       var calendar = $find("<%= Radcalendar1.ClientID %>");
       var currentTime = new Date();
       var month = currentTime.getMonth() + 1;
       var day = currentTime.getDate();
       var year = currentTime.getFullYear();
       var t = month + "/" + day + "/" + year;
       var txt = document.getElementById('txt1');
       txt.value = t;
   }

Thanks,
Princy.

[Saimadhukar]

<rad:RadDatePicker ID="rdpStartDate" Skin="Customized" EnableEmbeddedSkins="false" runat="server">
                                                                          <Calendar ID="Calendar1" ShowRowHeaders="false" runat="server">
                                                                        <SelectedDayStyle BorderColor="SkyBlue" />

                                                                            <FooterTemplate>

                                                                                <center>
                                                                                    <asp:Button ID="Button1" runat="server" Text="Today" OnClientClick="OnClientClick();" />
                                                                                </center>
                                                                            </FooterTemplate>
                                                                        </Calendar>
                                                                        <DateInput ID="DateInput1" DisplayDateFormat="dd/MM/yyyy" EnabledStyle-BorderColor="#7F9dB9" EnabledStyle-BorderWidth="1px" EnabledStyle-PaddingBottom="0px" CssClass="inlinestyle" DateFormat="dd/MM/yyyy"
                                                                            runat="server">
                                                                        </DateInput>
                                                                    </rad:RadDatePicker>


javascriptcode

 <script type="text/javascript">
         function OnClientClick() {
             var datepic = document.getElementById('ctl00_ContentPlaceHolder1_radPanelPurDataTab_i0_i0_rdpStartDate_dateInput_text');
            // var datepic = $find("<%= rdpStartDate.ClientID %>");
             var dt = new Date();
             dt = dt.format("dd/MM/yyyy");

             datepic.value = dt;
              }

              </script>

Hello Princy,
thanks for code but its not working in my application ,actually client id is not geting in my application if i write like that it is prompting radcalendar is undefined (rdpStartdate in undefined in my case) so i got the id of Picker by searching its id through F12,but its not generalised one  all the pickers shouldn't have same id, i dont know why client id is not coming ,isthere any other way to do this in javascript, i am sending u the code .i request u to  verify once if u r not busy.

on datepicker footer button(Todaybutton)  if i clicked on button date is coming in datepickers date textbox but when i clicked on textbox the  today's date disappeared and previously selected date is appearing how to change  radpickers selected date to today when we clicked on button .

Regards
Madhukar.