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) 

Skins to download: 

1. Stickers
2. Winter                                       
3. Forest

Modern skin options (summer, sea, sand)

Skins to download: 

1. Summer                                   
2. Sea                                      
3. Sand

Then 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:

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

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:

<style>
        /*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*/
        .dhx_cal_event_line.past_event{
            background-color: #ccc !important;
            color: black !important;
        }
        /*event with fixed time, in month view*/
        .dhx_cal_event_clear.past_event{
            color: black !important;
        }
</style>

Past events will differ from current events in color:

Get DHTMLX Scheduler .NET free trial right now.

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