[Solved] Custom background color for event is not filling up the entire time frame

[developer]

I'm using custom background color codes in my event template as shown below..

 

<script id="event-template" type="text/x-kendo-template">
    <div style="background-color: #: kendo.toString(colorId, "hh:mm") #">
          <p class="bold">
           <span class="bold"> #: kendo.toString(title) # </span>
            <span class="bold pull-right">   #: kendo.toString(trip.length) # Trips    </<span>
        </p>
        <h3 style="background-color: #: kendo.toString(colorId, "hh:mm") #"> </h3>
     </div>
</script>

But the space is occupied by only a portion in kendo event.Please find the screen shot..

The JSON for binding the event is given below..

[
    {
        "id": 1,
        "name": "Sand",
        "start": "/Date(1470024001000)/",
        "end": "/Date(1470038400000)/",
        "colorId": "#90CAF9",
        "status": "Delivered",
        "client": "Foyer"
    },
    {
        "id": 1,
        "name": "Gravel",
        "start": "/Date(1470110401000)/",
        "end": "/Date(1470124800000)/",
        "colorId": "#CE93D8",
        "status": "Dispatched",
        "client": "Foyer"
    },
    {
        "id": 1,
        "name": "Aggregate 20 mm",
        "start": "/Date(1470024001000)/",
        "end": "/Date(1470038400000)/",
        "colorId": "#9FA8DA",
        "status": "Delivered",
        "client": "Foyer"
    }
]

Please let me know where I'm doing wrong..

 

 

 

[Orlin]

Hello,

To make the background color in the template div fill up the whole event, you need to stretch it to 100% height. I have created a demonstration dojo with the necessary changes. Note the addition of "height: 100%" to the wrapper div in the template. Example here:
http://dojo.telerik.com/iCuko/4

I had to make slight adjustments to your dataSource to match it to the provided template.
Also of note are the added styles removing the margins from the p.bold in the template and the border from the .k-event container.

Yours is one way to change the event color. Another is to use Resources as demonstrated here:
http://demos.telerik.com/kendo-ui/scheduler/resources
Note the color property of the Meeting Room objects in Resources.

I hope this helps.


Regards,
Orlin
Telerik by Progress