Kendo UI (Scheduler) — добавьте уникальный класс css для каждого события

Я использую Kendo UI Scheduler для создания событий.

Как я могу добавить уникальный класс CSS для каждого события?

Например: первое событие должно иметь .event-red, второе событие должно иметь .event-green и так далее...

Я пытаюсь добавить класс класса, как показано ниже, но не работает... :(

data: [
    {
        ...
        className: "event-red"
        ...
    },
....

Онлайн-демонстрация

Эталонное изображение

Код:

$(document).ready(function() {
var date = new Date();
var _data = new kendo.data.SchedulerDataSource({
    data: [
        {
            eventID: 1,
            title: "Heading 1",
            start: new Date(),
            end: new Date(),
            isAllDay: false,
            description: "Lorem ipsum content (1)",
            className: "event-red"
        },
        {
            eventID: 2,
            title: "Heading 2",
            start: new Date(),
            end: new Date(),
            isAllDay: false,
            description: "New content goes here (2)",
            className: "event-green"
        },
        {
            eventID: 3,
            title: "Heading 3",
            start: new Date(),
            end: new Date(),
            isAllDay: false,
            description: "More content goes here (3)",
            className: "event-blue"
        },
    ],

    schema: {
        model : { id : "eventID" }
    }

});

function save(){
    console.log(_data);    
}

$('#socialMediaCalendar').kendoScheduler({

    eventTemplate: $("#event-template").html(),
    height: 600,
    messages: {
        today: "Today",
    },
    //editable: false,
    ShowFooter: "false",
    views: [
        { type: "day", title: "Day", selectedDateFormat: "{0:dddd}", showWorkHours: false, selected: true },
        { type: "month" },
    ],

    dataBound: function() {
        var scheduler = this;

        var allDayEventBlock = scheduler.wrapper.find(".k-scheduler-layout>tbody>tr:nth-child(1)");
        var dayViewTimesBlock = scheduler.wrapper.find(".k-scheduler-layout .k-scheduler-times");
        var tdNoWorkHours = scheduler.wrapper.find(".k-scheduler-layout .k-nonwork-hour");
        var prevCalContentRef = scheduler.wrapper.find(".k-scheduler-layout td.et-options #previewCalDayContent");

        allDayEventBlock.remove();
        dayViewTimesBlock.remove();
        tdNoWorkHours.closest("tr").remove();
        prevCalContentRef.attr("href", "#pn-modal-day-preview");          


    },

    save: save,
    dataSource:_data,


});

$(function () {
    $("#socialMediaCalendar").kendoTooltip({
        filter: ".k-event",
        position: "top",
        width: 250,
        content: kendo.template($('#calendarPopupTemplate').html())
    });
});

});  

HTML

<div class="container">


        <div class="rp-calendar">
            <div id="socialMediaCalendar"></div>
        </div>

    </div>
    <!-- Calendar Scheduler (Content Templates) -->
    <script id="event-template" type="text/x-kendo-template">
<table width="100%" cellpadding="0" cellspacing="0" class="scheduler-template-table">
    <tbody>
        <tr>
            <td class="et-time" width="1%" nowrap>#: kendo.toString(start, "HH:mm") #</td>
            <td class="et-content"><h3>#: title #</h3><p>#: description #</p></td>
            <td class="et-options" align="right">
                <input type="button" value="Edit" id="eventEdit" class="k-button">
        </td>
        </tr>
    <tbody>
        </table>
    </script>
    <!-- /Calendar Scheduler (Content Templates) -->

    <!-- Calendar Scheduler (Tooltip Templates) -->
    <script id="calendarPopupTemplate" type="text/x-kendo-template"> 
#var uid = target.attr("data-uid");#
#var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
#var model = scheduler.occurrenceByUid(uid);#

#if(model) {#

<table width="100%" cellpadding="0" cellspacing="0" class="scheduler-template-table stt-tooltip">
    <tbody>
        <tr>
            <td class="et-time" width="1%" nowrap>#=kendo.format('{0:HH:mm}',model.start)#</td>
            <td class="et-content" valign="middle"><h3>#: model.title #</h3><p>#=model.description#</p></td>
        </tr>
    <tbody>
        </table>
#} else {#
<p>No event data is available</p>
#}#
    </script>
    <!-- /Calendar Scheduler (Tooltip Template) -->