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

Scheduler Event colour

4 Answers 133 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Hameed
Top achievements
Rank 1
Hameed asked on 01 Jun 2015, 09:20 AM

    Hi,

 

I am currently looking at using the scheduler web ui component for one of my clients. I am in the process of building a PoC but am having difficulty setting colour of a schedule event. I understand I can use template to do this, but this only sets the color for the div in the template. I need to set the colour of the entire block of k-event, for example from 10am to 6pm; I want to set the colour, based on a status type property, of the entire block between these times.

 

Can you please advise.

 

P.S. getting handle of the k-event class and settings its background colour based on the criteria does not work since it sets all the events to the last colour in the collection.

 

Hameed.

4 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 03 Jun 2015, 07:29 AM
Hi Hameed,

You need to define scheduler resource for the status type field and provide colors for each value. For more information on the matter you can check the following help article:

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
Hameed
Top achievements
Rank 1
answered on 03 Jun 2015, 09:24 AM

Thanks for your reply Vladimir,

 I am using resources and grouping on them. The colour coding of the events is not based on the resource but rather the state in which the event is in. For example, if an activity is created in provisional state for Room A and another in tentative state for Room B. Both Room A and Room B are resources and the calendar is grouped by them but the activity (event) itself is coloured based on the state; provisional is red and tentative is blue (for example).

I want to be able to apply the colour to the event (for the entire k-event) based on the colours for different state of the activity (event). And hence, it starts of as provisional in red but than the state is changed to tentative and the colour changes accordingly to blue.

 

I hope this makes it clear what I am trying to achieve.

 

Looking forward to your response.

 

Hameed.

0
Vladimir Iliev
Telerik team
answered on 04 Jun 2015, 10:12 AM
Hello Hameed,

In your case you should define the "status" type as another (second) resource (which is first in the list) - this way the events will be colored based on the "status" type and grouped by "rooms" resource. Please check the example below:

group: {
    resources: ["Rooms"],
    orientation: "vertical"
},
resources: [{
    //this resource is used for coloring the events
    field: "status",
    name: "Status",
    dataSource: [{
        text: "Status A",
        value: 1,
        color: "#f8a398"
    }, {
        text: "Status B",
        value: 2,
        color: "#51a0ed"
    }],
    title: "Status"
}, {
    //this resource is used for grouping
    field: "roomId",
    name: "Rooms",
    dataSource: [{
        text: "Room A",
        value: 1
    }, {
        text: "Room B",
        value: 2
    }],
    title: "Room"
}]

 
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
Hameed
Top achievements
Rank 1
answered on 04 Jun 2015, 10:57 AM

Thanks Vladimir,

 

That has done the trick. Brilliant!

 

Hameed.

Tags
Scheduler
Asked by
Hameed
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Hameed
Top achievements
Rank 1
Share this question
or