Customize Your Scheduler Skin

Anticipating the release of a new skin for our web-control, we decided to remind you of the free available skins that can make your scheduler more attractive.

At the moment the Scheduler .NET has two skins – classic and modern (glossy). By default, both of them have a yellow blue color scheme:  pale yellow or bright yellow event boxes on the white blue striped background of the calendar.

If you would like to have a different color of scheduler to match your project page, you can check the collection of color presets created with the online DHMTLX Skin Builder.

Below you will find some of the most popular color schemes:

Classic skin options (stickers, winter, forest) 

 class skin calendar

Skins to download: 

  1. Stickers
  2. Winter                                       
  3. Forest

Modern skin options (summer, sea, sand)


modern skin calendar

Skins to download: 

  1. Summer                                   
  2. Sea                                      
  3. Sand
After you choose the color scheme you like, download the corresponding .zip archive with a css file and images. Then go to \Scripts\dhtmlxScheduler\ of your project and replace the existing css file and images. That’s it! 

Custom event color

If you need a different color for your event boxes, you can set it manually by changing color and textColor properties. To implement this, add a new property to the model as it is shown below:

custom event colorThen specify the color in the controller, e.g.  ev.textColor = "#FF0000"

Redefine colors on the client side

One more way is to redefine colors on the client-side. For example, we can change the colors of past events. First, we have to override event_class template:

       scheduler.templates.event_class = function (start, end, event) {
           if (+start < +new Date()) // event start before current date
               return "past_event";
           return ""; // default return

Note It is possible to create more complex checks. Events could have different CSS classes depending on their properties or current view.

Secondly, define css classes to the events:

        /*event in day or week view*/
        .dhx_cal_event.past_event div{
            background-color: #ccc !important;
            color: black !important;
        /*multi-day event in month view*/
            background-color: #ccc !important;
            color: black !important;
        /*event with fixed time, in month view*/
            color: black !important;

Past events will differ from current events in color:

 past events color

Get DHTMLX Scheduler .NET free trial right now.

free download

If you find this post useful, you are welcome to share it with your friends and leave your opinion below. 



Viktoria Langer

DHTMLX Scheduler .NET product care manager and customer manager since 2012. Interested in ASP.NET and trying to create valuable content.

Recent Blog Posts