Premium support for our pure JavaScript UI components

Post by danielrubak »

When using a custom eventRenderer that returns JSX, there is a significant delay in rendering events when scrolling, compared to when it returns a string. Additionally, multiple warnings appear in the console:

Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

I want to attach a minimal reproducible example to this post, but there is an error when attaching it:

HTTP Error.

and in console:

Failed to load resource: net::ERR_CONNECTION_TIMED_OUT

Post by ghulam.ghous »

Hi Daniel,

Thanks for reporting this. Have you faced the error while attaching a zip? Uploading a zip is working fine on our end. If you still facing the issue, please upload it to google drive and share the link here. and please make sure to provide the access to everyone with the link.


Post by danielrubak »

Yes, I am facing an error when attaching a zip file. Here is the link to the zip file on Google Drive:

Post by tasnim »

Hey danielrubak,

Instead of using resourceId in eventRecord, you should use assignments which should solve you're issue

const assignments = []

function generateEntries() {
  var entries = [];
  var currentDate = new Date("2023-01-01T00:00:00");
  var endDate = new Date("2023-12-31T23:59:59");

  for (var i = 1; i <= 7000; i++) {
    var resourceId = "r" + ((i % 35) + 1);
    var randomHours = Math.floor(Math.random() * 200) + 2;
    var randomMinutes = Math.floor(Math.random() * 60) + 2;

var startDateTime = new Date(currentDate);
  startDateTime.getHours() + randomHours,
  startDateTime.getMinutes() + randomMinutes

var endDateTime = new Date(startDateTime);
endDateTime.setHours(endDateTime.getHours() + randomHours);
var lastEvent = entries.findLast(
  (entry) => entry.resourceId === resourceId
if (lastEvent) {
  startDateTime = new Date(lastEvent.endDate);
  endDateTime = new Date(startDateTime);
  endDateTime.setHours(endDateTime.getHours() + randomHours);
  if (endDateTime.getTime() <= startDateTime.getTime()) {
    console.log(lastEvent, i);

    startDateTime.toISOString().slice(0, 16).replace("T", " "),
    endDateTime.toISOString().slice(0, 16).replace("T", " "),
    "Event " + i,
    "b-fa b-fa-" + (i % 5 === 0 ? "calendar" : "atom"),
    Math.floor(Math.random() * 101)

assignments.push({ id : assignments.length + 1, eventId : i, resourceId });

  return entries;

// then use it inside the JSX


Please check the video below showing it works smoothly after using assignments

(3.87 MiB) Downloaded 2 times

Best regards,

Post by danielrubak »

This solved the warnings, but there's still a significant delay when returning JSX in the custom eventRenderer compared to a string. The rendering time is about fifteen times longer with JSX.

I've attached a link to a folder with videos that show the performance difference.

Post by alex.l »


Could you please test performance in prod mode? Will it still be slow for you?

All the best,

Post by danielrubak »


I tested it in production mode, and there's still a huge difference in rendering times between JSX and string for the custom eventRenderer. I've added to google drive folder videos with performance in prod mode:

Post by kronaemmanuel »

Hi Daniel,

Thanks for the report, the performance issue is definitely there. I'm opening an issue to investigate it further: For now, you can try to use regular renderer. In most cases, using renderer is sufficient.

Best regards,

Post Reply