Styling of overlapping items

[ArunChockalingam]

Is your feature request related to a problem? Please describe. To start off with, this is a great library , very extensible. This is more of a question as well.

1. Currently if stackable is false, and two items overlap, one item gets hidden behind the other . Is it possible to color the overlapping areas of the item in a different color
2. If stackable is true, there is no overlap at all and makes the row really tall. I would ideally like to have the two items overlap but with a bit of margin top difference, so that both items are displayed and selectable.

Something like:

Describe the solution you'd like Ability to have style overlapping areas with stacking false, or ability to control stacking behavior.

Are there any ways i can try to do one of these two options? Would itemRenderer help with overlaps?

[Ilaiwi]

Hi @ArunChockalingam. To answer your questions: 1- Well, you can't do it out of the box right now, unfortunately, bit I have a CSS trick that might help you which is to make the background of the item a little transparent. This will make the overlap appear in a darker color which could help. Otherwise, you need to add this as a feature knowing that it is not hard to do. 2- As far as this question I have two suggestions:

• This can be done as well but it could be a bit tricky. So before bassing the items, You can figure if two items overlap right? (you have the start and end time for both) so knowing about these two items you can pass a boolean to the item saying that these will overlap and thus you can decide to give a margin for one of them
• This solution which I actually prefer is to extend the functionality of this library by having the lib itself telling you if this item overlap by passing a flag in itemRenderer, ItemContext object. This could also be helpful for you question. Please, let me know what you think and I would appreciate if you were able to achieve your requirements to share a codeSandbox here with your solution starting from this https://codesandbox.io/s/zr5r289rm4

[ArunChockalingam]

@Ilaiwi thank you for the suggestions, i will try them out once i get to that part of that app and update the codesandbox as well.

It would be great if the library provided a feature of customizing overlap items in terms of color, margin-top etc. Currently if two items have the exact start date and end date, you cannot see or click one of them unless we have the stackable=true.

Longer term, it would be great if the library had another mode like 'stackedWithOverlap' , this way it would behave like how google calendar handles overlaps out of the box

[Ilaiwi]

@ArunChockalingam out of the box solution would be really nice! but I am certain you can achieve it without adding it as a feature to the library. when you get to that part, Please keep this issue updated and feel free to ask any questions regarding on how and where

[ArunChockalingam]

@Ilaiwi will do, thanks!