Our pure JavaScript Scheduler component


Post by tanyarb »

Hello - what is the best way to render a Vue Component as an event?

Currently using renderEvent listener to render the html I want. But instead of this, I would rather render a Vue component with the template and functionality (e.g. the template calls methods in the Vue component) and pass the eventRecord in as a prop.

 renderEvent({ eventRecord, element }) {
      element.innerHTML = `
      <div>
          <div style="display:flex; justify-content:center; margin: 5px">
            <button @click="[b]doSomething[/b]">
              <i class="b-fa b-fa-plus-circle" style="color: #032cfc"></i>
            </button>
          </div>
          <span style="border: 3px solid blue; border-radius: 5px; margin: 10px"> ${eventRecord.name} </span> 
          <span><button><i class="b-fa b-fa-arrow-circle-right" style="color: #032cfc"></i></button></span>
      </div>`;
    }

I have also tried the eventRenderer function, but this seems to only render html on top of the existing event element - it doesn't replace it.

Grateful for advice - thanks!


Post by saki »

The event rendering was never planned to allow replacing the rendered event bar by a framework component directly but you could probably utilize https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer and https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventBodyTemplate

You can see the practical use of these two functions in https://bryntum.com/products/scheduler/examples/filtering/ demo. You could perhaps put your component rendering in eventBodyTemplate override.


Post by tanyarb »

Ok - thanks for confirming that it was never the intention to let a framework render the event bar. We have been trying the above workarounds.


Post Reply