[ANGULAR] Event overlapping the other in the same period

[klaus]

This is how my events are:

It's overlapping the other, I want my events be side by side, like this:

I did it inspecting element in browser, I want that my calendar be smart enough to do it by your own.

I used the property eventLayout, and when is two events in the same exactly period it works. But if it share some period in common it breaks.

Code I used in eventLayout:

eventLayout: {
        clearanceMinutes: 2,
        // gutter: true,
        // gutterWidth: 5,
        staggerMinimum: 0.5,
        staggerWidth: 0.5,
        stretch: true,
      }

[dongryphon]

The clearanceMinutes value is producing the undesired result here. That config is the threshold at which events are allowed to overlap each other and defaults to 45 minutes. The idea being that the details rendered probably don't go beyond that much vertical space in the event. At a level of 2 minutes, events will overlap each other even if their start times are nearly identical. You can effectively disable this by setting clearanceMinutes to a large value. In the example data you've shown, simply removing it will likely have the outcome you are wanting.

[klaus]

Removing or setting clearanceMinutes to a large value doesn't do what expected.

With the change looks like this:
https://files.slack.com/files-pri/TCE5WRQR0-F0332BKE9AR/image.png?pub_secret=0893dfc3ce

Notice that green events do not share any period in common, but the blue starts in in half of firts green and end in half of second one.

[dongryphon]

Strange. I'll need a more complete code example to play with it. Happy to do so!

[dongryphon]

I'm pasting the image here for easier viewing:

event-layout-overlap.png (35.83 KiB) Viewed 1089 times

[klaus]

This is my html:

<bry-calendar #calendar style="height: calc(100vh - 165px) !important;" [date]='calendarDate'
            [modes]='modes' [resources]='resources' [events]='events' [sidebar]='calendarConfig.sidebar'
            [tbar]='calendarConfig.tbar' [crudManager]='calendarConfig.crudManager' [readOnly]="true">
            

Some relevant variables that I'm using:

modes = {
    year: false,
    month: false,
    week: false,
    agenda: true,
    day: {
      dayStartTime: 9,
      dayEndTime: 24,
      // visibleStartTime: 8, // A hora que começa a ver a agenda
      hourHeight: 80, // Altura das linhas.
      eventLayout: {
        clearanceMinutes: 5,
        // gutter: true,
        // gutterWidth: 5,
        staggerMinimum: 0.5,
        staggerWidth: 0.5,
        stretch: true,
      },

  allDayEvents: {
    eventRenderer({ eventRecord }) {
      return `
           <div style="color: white; background-color: #1e88e5; display: flex; justify-content: space-between; height: 22px; width: 100%; padding: 0 5px;
           border-top-left-radius: 11px; border-bottom-left-radius: 11px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;">
           <div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;">
           <div style="font-size: 10px">${eventRecord.name}</div>
           </div>
           </div>`;
    }
  },

  eventRenderer({ eventRecord }) {
    return `<div style="display: flex; justify-content: space-between; color: black; background-color: transparent; width: 100%; height: 100%; padding: 3px 10px 7px">
  <div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between;">
  <div style="font-weight: bold; margin-right: 8px">${eventRecord.name}</div>
  <div style="color: #818181; font-size: 12px; font-weight: 400">${eventRecord.category}</div>
  </div>
  <div style="display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;">
  <span style="padding: 2px 10px; background-color:  rgba(174, 174, 174, 0.25); color: #333; border-radius: 12px; font-weight: 700; font-size: 9px; margin-top:4px;
  min-width: 55px; text-align: center">${eventRecord.organizationName}</span>
  </div>
  </div>`;
  }
}
  };
  eventTooltip = {
    // titleRenderer: eventRecord => eventRecord.name,
    // showOn : 'click',
    autoClose: false,
    tools: {
      delete: false
    }
  };

[dongryphon]

The value of 5 for clearanceMinutes means that events starting >= 5 minutes apart are allowed to overlap which is why the code you have allows the last 3 events to overlap as they do.

The rendering inside your events fills about 30 minutes of vertical space, so the default of 45 (with that key removed) may be good if you have a lot of overlapping events, but If you'd like events to basically never overlap, you can set clearanceMinutes to a large value such as 1500 (24 hours = 24 * 60 = 1440).

[klaus]

I tried with clearanceMinutes: 1440, but the result is how I sent here before.

I saw the properties allowOverlap: boolean and flex: number|string, but it doesn't work too

[dongryphon]

Try removing the stretch option?

[klaus]

I did, unfortunately nothing changed.