Our pure JavaScript Scheduler component


Post by carlzbg »

Can you set an event to be partially completed in the Scheduler? Like 40% done?


Post by mats »


Post by carlzbg »

So I added an eventRenderer as in the example to the schedulerConfig.
And I get the percentage written out but no color difference. (probably a CSS thing).
But I loose the default rendering with the name and icon.
How do I use and modify the roiginal renderer?


Post by mats »

You need to output the HTML you want displayed, then it's just a matter of styling it the way you want with basic CSS. Can you please show the desired look you want, and the code you wrote to achieve it?


Post by carlzbg »

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>
`,
});
  },
 

Post by mats »

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}%` }); } });

Post by carlzbg »

That works, thank you.


Post Reply