Scheduler Event colour

[Hameed]

    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.

[Vladimir Iliev]

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:

• Scheduler resources

Regards,
Vladimir Iliev
Telerik

 

 

[Hameed]

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.

[Vladimir Iliev]

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

 

 

[Hameed]

Thanks Vladimir,

 

That has done the trick. Brilliant!

 

Hameed.