I am trying to add a widget in the resource header (next to the calendar resource name). Every time the duration of the event has changed or an event has been dropped inside the resource canvas, I want to update the counter. I have a problem updating html, how do I do that?
this is my code example:
{
modeDefaults: {
timeFormat: "HH:mm",
view: {
strips: {
// A simple widget showing total planned calendar events' hours for each resource
resourceInfo: {
type: "widget",
dock: "header",
cls: "b-total-events-duration-header",
// This method gets called when the panel is created and we return some meta data about the
// resource, like "8h". Will be found on the Calendar
html: "up.getSubViewTotalHoursCountHeader"
}
}
}
},
validateDrag(event) {
const calendarEvents = calendar.events;
if (me.doIntervalsOverlap(event.eventRecord, calendarEvents)) {
return false;
}
calendar.modeDefaults.view.strips.resourceInfo.html = calendar.getSubViewTotalHoursCountHeader(
null,
event.eventRecord.data.resourceId
);
return true;
},
getSubViewTotalHoursCountHeader(widget, resourceId) {
let id = null;
if (widget) {
id = widget.owner.resourceId;
}
const events = calendar.events;
if (!resourceId) {
resourceId = id;
}
let totalEventsDuration = 0;
for (const event of events) {
if (event && event.resourceId === resourceId) {
totalEventsDuration = totalEventsDuration + event.data.duration;
}
}
if (totalEventsDuration) {
totalEventsDuration = "--";
}
return `<span class="total-event-duration blue fat">${totalEventsDuration} ${App.util.Translator.translate(
"hours_short"
)}</span>`;
}
}