Consecutive short events overlapping when using dayLayoutAlgorithm="no-overlap"

[pablodoble]

Do you want to request a feature or report a bug?

Report a bug

What's the current behavior?

Hi,

when trying to display 2 short consecutive events (5min each) using dayLayoutAlgorithm="no-overlap", they are overlapping like this:

The first event is from 2:00 to 2:05 and the second one from 2:05 to 2:10

You can see the bug in this codesandbox (forked from #1530)

What's the expected behavior?

I would expect the two events one next to the other if there is an overlap:

Thanks in advance!

[rnegron]

We're having this issue as well, would really love to see a fix or recommended workaround!

[hcmendes]

looks like the bug was solved in #2240

[Guardpc]

Hello everyone!
The error occurs due to the minimum height of the event.

The fact is that the height of the event in the DOM and the height calculated via slotMetrics.getRange() depend on the height of the rbc-time-column in the DOM. Therefore, for short events we get incorrect comparisons.

The easiest way to fix this is to calculate how many percentages in the DOM the minimum height event should occupy.

By default it is 20 pixels
For me it is 24 pixels.

I made a copy no-overlap.js , modified and used it as a custom dayLayoutAlgorithm.

<Calendar
	dayLayoutAlgorithm={params => noOverlap(params)}
	...
/>

Calculate the real minimum height as a percentage in noOverlap:

export default function ({ events, minimumStartDifference, slotMetrics, accessors }) {
	const styledEvents = overlap({
		events,
		minimumStartDifference,
		slotMetrics,
		accessors,
	});

	// get first rbc-time-column
	const RTC = document.querySelector('.rbc-time-content .rbc-time-column');
	let minHeight;

	// Calculate the real minimum height as a percentage
	if (RTC) minHeight = (26 * 100) / RTC.clientHeight;

	// It would be more correct to raise this block of code above styledEvents.sort
	for (let i = 0; i < styledEvents.length; ++i) {
		const height = styledEvents[i].style.height;

		// replace the height if necessary
		styledEvents[i].style.height = minHeight && height < minHeight ? minHeight : height;
		styledEvents[i].friends = [];
		delete styledEvents[i].style.left;
		delete styledEvents[i].style.left;
		delete styledEvents[i].idx;
		delete styledEvents[i].size;
	}

	styledEvents.sort((a, b) => {
		...

Ideally, we need to add an additional parameter for the Calendar component, but I don't have enough competence yet.

Before:

After:

[upMel]

Hello, I stumbled upon the same issue. The PR that indicates it solved this issue doesn't seem to work.