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

Background color of events in the schedule view

7 Answers 1963 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
dnguyen
Top achievements
Rank 1
dnguyen asked on 30 May 2014, 02:23 PM
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,

7 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 03 Jun 2014, 02:19 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
dnguyen
Top achievements
Rank 1
answered on 05 Jun 2014, 07:21 AM
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,
0
Alexander Popov
Telerik team
answered on 09 Jun 2014, 06:48 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Garry
Top achievements
Rank 2
Veteran
answered on 19 Nov 2014, 09:44 AM

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.















0
Tony
Top achievements
Rank 1
answered on 26 Jun 2015, 12:19 AM
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]"

0
Vladimir Iliev
Telerik team
answered on 29 Jun 2015, 10:52 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Steve
Top achievements
Rank 1
answered on 07 Jun 2016, 08:36 PM
Tags
Scheduler
Asked by
dnguyen
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
dnguyen
Top achievements
Rank 1
Garry
Top achievements
Rank 2
Veteran
Tony
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Steve
Top achievements
Rank 1
Share this question
or