Background color of events in the schedule view

8 posts, 0 answers
  1. dnguyen
    dnguyen avatar
    9 posts
    Member since:
    Apr 2013

    Posted 30 May 2014 Link to this post

    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,
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 03 Jun 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. dnguyen
    dnguyen avatar
    9 posts
    Member since:
    Apr 2013

    Posted 05 Jun 2014 in reply to Alexander Popov Link to this post

    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,
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 09 Jun 2014 Link to this post

    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!
     
  6. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 19 Nov 2014 in reply to Alexander Popov Link to this post


    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.















  7. George
    George avatar
    49 posts
    Member since:
    Apr 2014

    Posted 25 Jun 2015 Link to this post

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

  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 29 Jun 2015 Link to this post

    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!
     
  9. Steve
    Steve avatar
    1 posts
    Member since:
    May 2016

    Posted 07 Jun in reply to dnguyen Link to this post

Back to Top
Kendo UI is VS 2017 Ready