Hi Hani,
Greetings from Syncfusion support.
When updating Appt. everything updates in the Calendar except Appointment Color
We have validated your above query at our end and achieved it with help of the popupClose event of Schedule with the below code.
[App.vue]
|
onPopupClose: function (args) {
if (args.type === "Editor" && args.data) {
args.data.Translate = "AS8";
switch (args.data.Status) {
case "new":
args.data.Color = "#ffe000";
break;
case "confirmed":
args.data.Color = "#25b800";
break;
case "cancelled":
args.data.Color = "#e40404";
break;
default:
break;
}
}
}, |
AS8 supposed to be translated using $t(Status)
This can be achieved with the help of eventTemplate with help of the code shown below.
[App.vue]
|
var monthTempVue = Vue.component("monthTemp", {
template:
'<div class="template-wrapper" :style="{background: data.Color}">' +
'<div class="time" :style="{background: data.Color}">{{getTimeString(data.StartTime)}}</div>' +
'<div class="subject" :style="{background: data.Color}">{{data.Subject}}</div>' +
'<div class="translate" :style="{background: data.Color}">{{getTranslatedString(data.Translate)}}</div></div>',
data() {
return {
data: {},
};
},
methods: {
getTimeString: function (value) {
return instance.formatDate(value, { skeleton: "hm" });
},
getTranslatedString: function (value) {
return "Trans - " + value;
},
},
}); |
I want to edit this field to become DropDownList with a specific list
We can achieve the above requirement with the help of the quickInfoTemplates property of the Schedule for the same, we have prepared a sample for your reference which can be available from the below link.
Kindly try the above sample and get back to us if you need any further assistance.
Regards,
Ravikumar Venkatesan
