Background color of events in the schedule view

[dnguyen]

Hi,

I am using a custom template to show the event in the schedule view of kendo scheduler. My problem is that I need to change the background color of this custom template according to an id linked to this event.

Is there an easy way to do that?

Thank you for your help.

Kind regards,

[Alexander Popov]

Hi dnguyen,

Basically, there are two ways to achieve this:

• Using resources, as shown in this demo
• Using a templates, in which a div with a certain class (depending on the ID) is set. Then, override the default border and background options of the k-event class and set the options of the custom classes. Here is an example illustrating how similar behavior could be implemented.

Regards,
Alexander Popov
Telerik

 

 

[dnguyen]

Hi Alexander,

thank you for your answer. I have tried these solutions but they do not meet my needs.
Let me explain a bit better :

A user will pick up a color that match to these custom event in an other page. I will have to use this color as background color for the event in the kendoscheduler.
Every events could have a different color so I cannot define a CSS template or a ressource foreach possible color unless it is possible to generate it dynamically?

Thank you for your help.

Kind regards,

[Alexander Popov]

Hello again dnguyen,

I am afraid that this scenario is not supported out of the box, however it could be achieved using a custom solution. For example you could assign colors to certain resources in the first page and store the changes. Then, when the Scheduler is initialized in the second page, it will fetch the resources from the server and automatically display the events with the newly assigned colors.

Regards,
Alexander Popov
Telerik

 

 

[Garry]

Thanks Alexander

I simply added a new field called taskTypeId to my data:

var myDataTable = [
            {
                id: 1,
                start: new Date("2014/11/19 08:00"),
                end: new Date("2014/11/19 09:00"),
                title: "Interview: interview with Miss Evans and her friend Wadkins",
                description: "This is an interview with Miss Evans and her friend Wadkins",
                taskTypeId: 1      
            }...

I then added this as a resource:
resources: [
                {
                    field: "taskTypeId",
                    dataSource: [
                        { value: 1, text: "Telephone Call", color: "#6699ff" },
                        { value: 2, text: "Meeting", color: "#ff99ff" },
                        { value: 3, text: "Note", color: "#ff9933" }
                    ],
                    title: "TaskTypeId"
                }
            ]

This works great - thanks again.

G.

[Tony]

Let's say I have some data like this:

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

            }

        ]

How do I then reference that in a custom template? I'm trying this but it's not working:

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

 

The class name doesn't show up in the containing div, and the #: availableServices # part in the event window is output as "[object Object]"

[Vladimir Iliev]

Hi George,

Your question about rendering multiple resource inside event template is not related to the original topic of this support conversation, so please submit a new support ticket for it. In this way you can be sure that your query will reach the corresponding staff member in time and will be answered faster and accurately.

Regards,
Vladimir Iliev
Telerik

 

 

[Steve]

Another solution is  to use the 'databound' event as shown here: http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/modify-event-styling-on-databound