How to change the colors of the Schedule Control

[dsapo]

Hi Support:

By default the schedule control is displaying the views based on white and blue colors, how can I change the blue to green, for example for the view buttons, the appointment cell in the month view, the background color in the Day View header, etc.

Thanks in advanced

David

[Nevitha Ravi]

Hi David, 

 

Thanks for contacting Syncfusion support. 

 

There are three possible ways to achieve your scenario to change the default blue color. 

 

1.       Using built-in themes: 

 

You can change the theme from default-theme to flat-lime  (for green) . Several built-in themes are available, you can refer it from our documentation link. (https://help.syncfusion.com/js/theming-in-essential-javascript-components). 

 

2.       Using cssClass API: 

 

     We have prepared the sample to meet your requirement using cssClass, which can be downloaded in the below link. 

 

        Download     

      

     1. In the above sample,  we have changed the background color by using cssClass API,  which accepts custom CSS class name within which the user-defined styles are defined. 

 

     <code> 

 

<style  type="text/css"> 

.e-customClass .e-activeview,.e-customClass .e-appointinnertext {  

background: green !important; // applied to the active elements and appointment cells 

} 

       .e-customClass .e-commonviewbutton:hover { 

background-color: lightgreen  !important; // applies on the view buttons 

       }     

</style> 

 

</code> 

 

2.Assign the above defined custom CSS class name to the cssClass property as below –  

 

<code> 

        <ej-schedule id="Schedule1" width="100%" height="525px" current-date="new DateTime(2014, 12, 10)"  css-class="e-customClass"> 

       </code> 

 

3.       Using QueryCellInfo Event: 

 

You can also customize each and every elements of the scheduler using QueryCellInfo event based on the element type. To know more about QueryCellInfo event, kindly refer below links. 

 

UG Reference - https://help.syncfusion.com/aspnetmvc/schedule/customization#scheduler-customization-using-querycellinfo 

 

Sample Reference - http://mvc.syncfusion.com/demos/web/schedule/querycell 

 

Kindly check the above cases and let us know, if you need further assistance in it. 

 

Regards, 

Nevitha 

[dsapo]

Thanks for the help.

David

[Karthigeyan Krishnamurthi]

Hi David,  

  

Thanks for your update. 

Please let us know if you any other need further assistance. 

Regards, 

Karthigeyan