how to add styles for radcalendar asp.net in the javascript

[Dhana]

how to add styles for radcalendar asp.net in the javascript

<style type="text/css">

 .RadCalendar .rcTitlebar .rcTitle

    {

      color:#1F3E74 !important;

    }

</style>

 

This same style i have to give inside javascript during checkbox click..dont know how to continue below

<script type="text/javascript">
        function validate() {
            if (document.getElementById('cricket').checked) {
                alert("checked")
                var calendar = document.getElementById("Calendarmain").className

                document.getElementById("Calendarmain").style  (..dont know how to give the same style above here ?????)

                           }

        }

    </script>

<input id="test" title="test" name="test" type="checkbox" onclick="validate()" />

         

[Vasko]

Hello Dhana,

When it comes to applying styles to elements using JavaScript, the best approach is to have pre-defined CSS styles and assign the class name to the elements. This approach is easy to maintain, and in case you want to remove the styles, you only have to take care of a single CSS class name.

Here is one example of changing the color of the RadCalendar's title text:

• Create a specific CSS class selector with the desired color: 

  .RadCalendar.my-class .rcTitlebar .rcTitle {
      color: red;
  }

• In the <script> tag, get a reference to the component's element and add the "my-class" to it. 

  <script type="text/javascript">
      function validate() {
          var calendar1 = $get("<%= RadCalendar1.ClientID %>"); // Get a referrence to the component
  
          if (document.getElementById('cricket').checked) {
              alert("checked")
              $(calendar1).addClass("my-class") // Add the class when it's checked
          }
          else {
              $(calendar1).removeClass("my-class") // Remove the class when it's unchecked
          }
      }

To find more information about the code and approach used above, check out the following articles:

• Getting Client-Side References to Control Objects
• jQuery.addClass()
• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;
• CSS !important: Don’t Use It. Do This Instead

I hope this method helps you out.

Kind regards,
Vasko
Progress Telerik

[Dhana]

Hi Vasko ,

Thank you for the response

I have tried the above it is working for normal class ..but for the below scenario i need the same solution

i have 2 more questions kindly respond it will help me lot..thanks in advance :)

1. The below style i have to trigger during checkbox check status change

<style type="text/css">
    table.RadCalendar_Default .rcRow .rcSelected
    {
        background: red;
    }
</style>

Need to give this style inside javascrit

 

2. I need to change the same radcalendar hover colour change when the checkbox status change

checkbox1 ✅️

radcalendar control

I have to change the radcalendar date hovering to red if i check the checkbox and normal colour if unchecked

 

Thanks,

Dhana

[Vasko]

Hello Dhana,

Assuming that you already have the previous implemented where the checkbox will add a CSS class to the Calendar, all you need to do is, to create a few CSS selectors that will target the respective elements.

Here is an example:

    <style type="text/css">
        .RadCalendar.my-class .rcSelected a, 
        .RadCalendar.my-class .rcSelected span {
            background-color: red;
        }

        .RadCalendar.my-class .rcHover a,
        .RadCalendar.my-class .rcHover span {
            background-color: red;
            color: white;
        }
    </style>

For further customization, please refer to the links I shared in my previous post.

Kind regards,
Vasko
Progress Telerik