Referencing fields in a custom event template for Kendo Scheduler

Question

Here is my data set:

dataSource: [
    {
        title: "Test",
        start: new Date("2015/6/13 6:00"),
        end: new Date("2015/6/13 7:30"),
        availableServices: [1]
    }
],
resources: [
    {
        field: "availableServices",
        title: "Available Services",
        dataSource: [
            { value: 1, text: "On Demand", color: "#e6f1df" },
            { value: 2, text: "Patient Scheduled", color: "#f1e2ed" },
            { value: 3, text: "Admin Scheduled", color: "#fef1de" },
            { value: 4, text: "Unavailable/Blocked", color: "#c6c3c3" }
        ],
        multiple: true
    }
]

Here is my custom template:

<script id="block-template" type="text/x-kendo-template">
    <div class="event-block  #if(availableServices=='On Demand'){# on-demand #}else{# meep #}#" >
        <p>
            #: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
        </p>
        <span>
            #: title #
        </span>
        <span>
            #: availableServices #
        </span>
    </div>
</script>

And what it is outputting is this:

<div class="event-block   meep ">
    <p>
        06:00 - 07:30
    </p>
    <span>
        Test
    </span>
    <span>
        [object Object]
    </span>
</div>

So, the part where I'm trying to add a class in the containing div based on which "Available Service" field is selected, isn't working. It's just outputting the else option "meep" no matter what.

And the part where I'm trying to just list which "Available Service" fields are selected in the content area isn't working either -- it's just outputting "[object Object]"

Any help would be most appreciated!

Answer 1

This is how you do it, you need to change the conditional to be like this one, just like an array

#if(availableServices[0]==1){#on-demand#}else{#meep#}#

here is the template code :

<script id="block-template" type="text/x-kendo-template">
<div class="event-block #if(availableServices[0]==1){#on-demand#}else{#meep#}#">
    <p>
        #: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
    </p>
    <span>
       title : #: title #,
    </span>
    <span>
       available services : # for(var i=0, length = availableServices.length; i<length; i++){# #: availableServices[i]# #} #
    </span>
</div>

JS code :

$("#scheduler").kendoScheduler({
  date: new Date("2015/6/13"),
  eventTemplate: $("#block-template").html(),
  dataSource: [
    {
        title: "Test 1",
        start: new Date("2015/6/13 6:00 AM"),
        end: new Date("2015/6/13 7:30 AM"),
        availableServices: [1,2]
    },
    {
        title: "Test 2",
        start: new Date("2015/6/13 7:00 AM"),
        end: new Date("2015/6/13 8:30 AM"),
        availableServices: [2,3,4]
    }
  ],
  resources: [
    {
        field: "availableServices",
        title: "Available Services",
        dataSource: [
            { value: 1, text: "On Demand", color: "#e6f1df" },
            { value: 2, text: "Patient Scheduled", color: "#f1e2ed" },
            { value: 3, text: "Admin Scheduled", color: "#fef1de" },
            { value: 4, text: "Unavailable/Blocked", color: "#c6c3c3" }
        ],
        multiple: true
    }
  ]
});

DEMO