This is a migrated thread and some comments may be shown as answers.

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

1 Answer 160 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
developer
Top achievements
Rank 1
developer asked on 02 Aug 2016, 03:35 AM

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

 

 

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Orlin
Telerik team
answered on 03 Aug 2016, 02:25 PM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Scheduler
Asked by
developer
Top achievements
Rank 1
Answers by
Orlin
Telerik team
Share this question
or