Search code examples
jquerykendo-uikendo-scheduler

Kendo UI (Scheduler) - Add unique css class for each event

I am using Kendo UI Scheduler for creating events..

How can I add unique css class for each event?

For Eg: First event should have .event-red, Second event should take .event-green and so on...

I am trying to add class class like below, but not working... :(

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

Online Demo

Reference Image enter image description here

Code:

$(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) -->
Solution

  • Well, since you are using templates you can do it through them. In templates you have access to all properties given in dataSource, so regarding to your example, you just need add 

    style="color: #= myProperty #;"

    or 

    class:"et-content #= myProperty #"

    Here is demo - you need take a look to your template (event-template) and SchedulerDataSource.