We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the colors of the Schedule Control

Thread ID:





128372 Jan 17,2017 04:45 PM UTC Jan 20,2017 05:02 AM UTC ASP.NET Core 3
Tags: Schedule
Asked On January 17, 2017 04:45 PM UTC

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


Nevitha Ravi [Syncfusion]
Replied On January 18, 2017 01:16 PM UTC

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. 
     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. 
<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 
2.Assign the above defined custom CSS class name to the cssClass property as below –  
        <ej-schedule id="Schedule1" width="100%" height="525px" current-date="new DateTime(2014, 12, 10)"  css-class="e-customClass"> 
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. 
Kindly check the above cases and let us know, if you need further assistance in it. 

Replied On January 19, 2017 03:30 PM UTC

Thanks for the help.


Karthigeyan Krishnamurthi [Syncfusion]
Replied On January 20, 2017 05:02 AM UTC

Hi David,  
Thanks for your update. 

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



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon