Overlapping Events, Event Bar below other

[martinfruehmorgen]

Hello,

Is there a way to have overlapping events in a row below each other and not visually overlapping?

Any hint how to achieve that, is appreciated!

edit: I see, it was discussed already https://github.com/ANovokmet/svelte-gantt/issues/19#issuecomment-771860614 Any news regarding this?

Thanks Martin

[V-Py]

Hello, I implemented a custom algorithm to treat this case in one of my projects, but it's currently not integrated as a feature.

So tell me if it suits your need, and I'll see what I can do to integrate it properly. Basically, for every tasks, the algorithm check if his "space" is free in the first children row, if not, check the second row, etc So depending on the order of your tasks you might have different results, here the tasks are sorted DESC by start date.

[martinfruehmorgen]

Hello,

And thanks!

I meant more, that if there are overlapping events f.e. in ligne1, the first (sorted by start date) should be on top of the 2nd and so on by expanding the row height. As I see Ligne 1 / 2 etc as a bookable resource for the events.

Any idea how to achieve this?

Thanks again, Martin

[V-Py]

So you mean expanding the parent row height to stack the events on top of each others (when they overlap) and not using the children rows ?

I don't quite undersand your use case, the tasks in the main row are events, but the tasks in the children rows are resources for the events ?

[martinfruehmorgen]

Hello,

No, I mean like the resource grid in Fullcalendar https://fullcalendar.io/demos then "Resource Timeline" You can drag several events onto one resource so they overlap.

The columns are resources (can be tree or not) and the corresponding line shows the events with the resource (for example a room or machine).

So to say not a Gantt chart but a resource booking timeline.

Thanks! Martin

[V-Py]

Alright thanks for the resource, I understand way better now. So you do want to have multiples tasks inside a single row stacking on top of each other, and the row height expanding, without the use of the children rows.

I'll have a look at it in the following days an see what I can do :)

[martinfruehmorgen]

Hello,

did you achieve any progress for this?

Thanks! Martin

[V-Py]

Hello, Have been kinda busy the last two weeks, and will still be the next two I think ..! 😭 I'm still handling blocking issues but don't have much time to add new feature right now. Aiming for end of July/ start of August to implement this feature and few others awaiting 💪

[Edward-Ta]

@martinfruehmorgen as a workaround this is what I have done to achieve something similar.

Line 1305 in index.js, I give each task an eventType and then alter its y position in the row depending upon that eventType.

/******************************************** EDWARDS CODE HERE *******************************/ 
 if(ctx[0].eventType === "jobslot"){
    ctx[6].y = ctx[6].y - 5
    } else if(ctx[0].eventType === "activity"){
    ctx[6].y = ctx[6].y +25
  }else if(ctx[0].eventType === "timesheet"){
    ctx[6].y = ctx[6].y +55
  }

Line 1351 in index.js then I change the height of each task to fit inside the row height. ctx[1]/2.8 would change depending on the amount of rows you would want, ofcourse it could also be calculated as rowheight/task count.

  set_style(div1, "height", /*height*/ ctx[1]/2.8 + "px"); //EDWARDS CODE HERE

This is very buggy still, especially when I manipulate the window size or click between day and week.

[BlueFoxPrime]

I am also interested in this. But its not very easy to implement. Especially with task reflections. Maybe its an idea to use css grid for each row in the future.

[BlueFoxPrime]

@V-Py Have you made any progress on this? Any thoughts? I was thinking of trying to remove the y-position property as it is and display tasks in css grid of the table row module (which would probably need changes). This would also mean that some form of the table module has to be integrated permanentely for the gantt to display properly. Here is a libary that seems to use css grid for inspiration on what I mean: https://github.com/cuire/svelte-grid-extended#static-grid

[Edward-Ta]

@BlueFoxPrime Just so I'm understanding this correctly, you mean each row is now in reality a big css grid? And so tasks that are related would become rows in this grid, all within 1 related row in the Gantt Chart?

[BlueFoxPrime]

Currently each task is positioned absolute. My idea is to use a css grid and grid rows for y positions. Which in my view could significantly improve the performance and enable the requested feature. It would require core changes.

{#each rows as row}
  <div class="grid-row">
   {#each row.tasks as tasks}
       <div class="grid-item" use:dndaction>{task.id}</div>
        {/each}
   </div>
 {/each}

[martinfruehmorgen]

Hi @BlueFoxPrime , Have you made any progress with this? I am still struggling with displaying several events with overlapping dates in the same row.

Thanks, Martin

[ANovokmet]

V4.2.0 has a new option. Gantt can be set with the layout: 'pack' option. When assigned overlapped tasks will display one over another. You can check it out in the demo: https://anovokmet.github.io/svelte-gantt/pack-layout

This feature can definitely be improved, so please give any feedback. For example, the row is not expanded, but the task's height shrinks - it would make sense to allow the layout where tasks stay the same size but the row expands. Also, the layout algorithm isn't the best - if multiple tasks overlap the same task but not each other, there is going to be some empty space.

[martinfruehmorgen]

Thanks a lot! That's what I was trying to achieve. It would be great if the row would be expanded depending on the max amount of overlapping events in the timerange.

[ANovokmet]

v4.4.0 has the layout: "expand" option that expands the row when tasks overlap.

[martinfruehmorgen]

Hello @ANovokmet , And thank you so much! Will you update the repository here or is there another way to use the new version v4.4.0?

Thank you, Martin