Can you set an event to be partially completed in the Scheduler? Like 40% done?
Support Forum
Sure, something like this? https://www.bryntum.com/examples/scheduler/configuration/
Well I like the default renderer with the icon and the name - just wanted to shade the completed part of the bar in a darker nuance.
I tried the renderer in your example:
eventRenderer: ({ eventRecord, renderData }) => {
const value = eventRecord.data.percentDone || 0;
console.log("eventRecord ", eventRecord);
// Add a child to the event element (b-sch-event)
renderData.children.push({
className: "value",
style: {
width: `${value}%`,
},
html: `
<div class="info">
<div class="name">${eventRecord.name} ${eventRecord.data.percentDone}%</div>
</div>
`,
});
},
Close, here's a working version (just move styles to CSS file obviously):
const scheduler = new Scheduler({
appendTo: 'container',
columns: [{
text: 'Name',
field: 'name',
width: 130
}],
eventRenderer: ({
eventRecord,
renderData
}) => {
const value = eventRecord.data.percentDone || 0;
renderData.children.push({
className: 'value',
style: {
position: 'absolute',
width: `${value}%`,
height: '100%',
display: 'flex',
'background-color': 'rgba(255,255,255,0.25)',
'padding-left': '2em',
'align-items': 'center'
},
html: `${eventRecord.name} ${value}%`
});
}
});