Allow to change resource color

[Daniel Walker]

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.

[Swathi Ravi]

Hi Daniel,

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

[App.vue]

<template>

    <div id='app'>

        <tr>

            <td>Resources</td>

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

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

        </tr>

        <tr>

            <td>Color picker</td>

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

        </tr>

        <br>

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

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

            :eventSettings='eventSettings'>

            <e-resources>

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

                    idField="Id" colorField="OwnerColor">

                </e-resource>

            </e-resources>

        </ejs-schedule>

    </div>

</template>

<script>

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.

        }

    }

};

</script>

Regards,

Swathi Ravi

Attachment: ej2vuescheduleresourcecolorchange_4bf9b635.zip

[Daniel Walker]

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

[Daniel Walker]

This does work so appreciate the response.

[Ravikumar Venkatesan]

Daniel,

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