We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Allow to change resource color

I have a schedule and it works in Typescript Vue 3 options api though I had to use the addEvent function of the Schedule Component to add events. It works but I have settings so that a user can change the color of a resource. I used the color picker control and I can see that the data updates for the resource datasource so that part is working. I want the Schedule to update the color of the events when the picker changes. Hope this makes sense.

4 Replies

SR Swathi Ravi Syncfusion Team March 14, 2023 11:54 AM UTC

Hi Daniel,

You can update the color of the events when the resource color changes, as shown in the below shared snippet.



    <div id='app'>



            <td><ejs-dropdownlist id='dropdownlist' width='200px' placeholder="Select Resource"

                    :dataSource='ownerDataSource' :change="onResouceChange" :fields='fields'></ejs-dropdownlist></td>



            <td>Color picker</td>

            <td><ejs-colorpicker :change="onColorChange"></ejs-colorpicker></td>



        <ejs-button @click="onButtonClick">Apply color</ejs-button>

        <ejs-schedule ref='scheduleObj' height='550px' width='100%' :selectedDate='selectedDate'



                <e-resource field="OwnerId" title="Owner" name="Owners" :dataSource="ownerDataSource" textField="OwnerText"

                    idField="Id" colorField="OwnerColor">







import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, Resize, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective } from "@syncfusion/ej2-vue-schedule";

import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";

import { ColorPickerComponent } from "@syncfusion/ej2-vue-inputs";

import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";


let resourceId, colorValue;

export default {

    name: "App",

    data() {

        return {

            ownerDataSource: [

                { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },

                { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },

                { OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }],

            fields: { text: 'OwnerText', value: 'Id' },




    methods: {

        onColorChange: function (args) {

            colorValue = args.value;



        onResouceChange: function (args) {

            resourceId = args.value;



        onButtonClick: function () {

            var index = this.ownerDataSource.findIndex(owner => owner.Id === resourceId);

            this.ownerDataSource[index].OwnerColor = colorValue;

            this.$refs.scheduleObj.ej2Instances.resources[0].dataSource = this.ownerDataSource;  //update the resource datasource here.






Swathi Ravi

Attachment: ej2vuescheduleresourcecolorchange_4bf9b635.zip

DW Daniel Walker March 14, 2023 01:55 PM UTC

I am using Typescript and have tried this approach in various iterations. I ended up having to do this:

let Sched = this.$refs['scheduleObj'] as ScheduleComponent
      let instances = Sched.ej2Instances
      instances.resources[0].dataSource = this.basecats

DW Daniel Walker March 14, 2023 01:56 PM UTC

This does work so appreciate the response.

RV Ravikumar Venkatesan Syncfusion Team March 15, 2023 09:51 AM UTC


We are happy that our shared solution helped you to achieve your requirement. Let us know if you need any other assistance.

Live Chat Icon For mobile
Up arrow icon