BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
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.
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
I am using Typescript and have tried this approach in various iterations. I ended up having to do this:
This does work so appreciate the response.
Daniel,
We are happy that our shared solution helped you to achieve your requirement. Let us know if you need any other assistance.