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

2 posts, 1 answers
  1. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 01 Aug 2016 Link to this post

    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>
            <h3 style="background-color: #: kendo.toString(colorId, "hh:mm") #"> </h3>

    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..




  2. Answer
    Orlin avatar
    51 posts

    Posted 03 Aug 2016 Link to this post


    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:

    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:
    Note the color property of the Meeting Room objects in Resources.

    I hope this helps.

    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top