Style event border from event template

2 posts, 1 answers
  1. Boris
    Boris avatar
    14 posts
    Member since:
    Aug 2015

    Posted 13 Nov 2015 Link to this post


    I wan to ask, if there is some way to style .k-event div according to a variable in event template. 

    What I need to do for example is to make red border on events, that have attribude "conflict = true" like that:


     <script id="event-template" type="text/x-kendo-template">
        <div data-conflict="#:hasConflict#">

     Or get value of "hasConflict" as a class of event or something like this.


    I made some workaround with JQuery, going trough each event, search for attribute and toggle class.


    $(".k-event").each(function () {

            var conflict = true;
            var conflictDiv = $(this).find("div[data-conflict]");
            if ($conflictDiv.length >= 1) {
                conflict = $conglictDiv.first().attr("data-conflict");

            if (conflict) {
            else {


    But it seems to much complicated and I'm afraid, that it can take lots of time, i we have lots of events on the sheduler, I'm looking for more system-like way, like setting event color as is described here:


    Thanks fo any answer.


  2. Answer
    Vladimir Iliev
    Vladimir Iliev avatar
    2156 posts

    Posted 16 Nov 2015 Link to this post

    Hello Boris,

    Basically the event template is wrapped in another "div" element with "k-event" class in order to make sure the events are always position correctly. The scheduler however currently does not support editing of this wrapper element other than extending the desired view in order to override it (demo of extending views can be found here). That why If creating custom view is not an option I would suggest to use the "dataBound" event of the Scheduler to apply the desired custom borders the same way as you did. 

    Vladimir Iliev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top