Scheduler Event colour

5 posts, 0 answers
  1. Hameed
    Hameed avatar
    3 posts
    Member since:
    Oct 2014

    Posted 01 Jun 2015 Link to this post

        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.

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 03 Jun 2015 Link to this post

    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!
     
  3. Hameed
    Hameed avatar
    3 posts
    Member since:
    Oct 2014

    Posted 03 Jun 2015 in reply to Vladimir Iliev Link to this post

    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.

  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 04 Jun 2015 Link to this post

    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!
     
  5. Hameed
    Hameed avatar
    3 posts
    Member since:
    Oct 2014

    Posted 04 Jun 2015 in reply to Vladimir Iliev Link to this post

    Thanks Vladimir,

     

    That has done the trick. Brilliant!

     

    Hameed.

Back to Top