Our powerful JS Calendar component


Post by kristi.paulausky »

It looks like with certain scenarios of overlapping events, events are being cut off even though there is room horizontally.

You can view in the attached screen capture I created using the Bryntum basic calendar example. On Sunday the 11th, even though one event (11 am dinner) ends at 11:30 and another event (11:30 am dinner) starts at 11:30, the first event is cut off horizontally. You can view different scenarios of this same behavior:
Monday - small overlap in times (2 minutes), the entire first event at 1:00 is cut off horizontally
Tuesday - 2:30 event is cut off horizontally, while there is an overlap with another event
Wednesday - 1:30 event is cut off horizontally while spanning multiple events

I did see this ticket which also talked about alignment entries:
viewtopic.php?f=54&t=22133&p=109486&hilit=event+alignment#p109486

It had mentioned using the FluidPageLayout and we had attempted to use the "stretch" property, however, this causes overlapping issues where you cannot see the right most side of the event when there are multiple events at the same time, so I don't believe this could be a possible solution. Attaching a screen capture that shows two events, the second event is overlapping the first event covering the icons on the upper right corner, rather than splitting the horizontal width between the two events.

Is there a way to avoid having the open horizontal space behavior in certain scenarios of overlapping events?

Attachments
Screen Shot 2022-10-26 at 4.54.55 PM.png
Screen Shot 2022-10-26 at 4.54.55 PM.png (59.85 KiB) Viewed 878 times
Screen Shot 2022-10-25 at 9.51.47 AM.png
Screen Shot 2022-10-25 at 9.51.47 AM.png (405.7 KiB) Viewed 878 times

Post by dongryphon »

Looks like a perhaps a bug there. Can you provide event data that produces the issues so I can run some tests here? For example, an edited data.json of the basic example from which you've posted a screenshot.


Post by kristi.paulausky »

I uploaded a json file, please let me know if you need anything else. Thank you.

Attachments
data2.json
(9.35 KiB) Downloaded 58 times

Post by Animal »

The only possible improvement I can see in the day layout class would be if this "Lunch" event could somehow know that it doesn't really have to constrain its width because the elements it would be occluding are empty parts of long running previous events:

Screenshot 2022-10-29 at 14.04.52.png
Screenshot 2022-10-29 at 14.04.52.png (51.76 KiB) Viewed 829 times

So it would be good if it could look like this:

Screenshot 2022-10-29 at 14.05.48.png
Screenshot 2022-10-29 at 14.05.48.png (21.92 KiB) Viewed 829 times

The day layout has a lot of variables to contend with. Just check out the "big dataset" example to see the potential problems and how many ways of intersecting and occluding need to be accounted for.

Below, it just so happens that only "Blue pill" down at the bottom of the picture has the opportunity to stretch itself out to its full width. It's easy for us to see, but working that out in code is extremely difficult.

Screenshot 2022-10-29 at 14.12.27.png
Screenshot 2022-10-29 at 14.12.27.png (442.42 KiB) Viewed 829 times

Post by dongryphon »

Hi kristi -

Looking at the data file you sent, it does not match either of the initial screenshots. In looking at the events in that file, I think Nige has put it well. The Tues 2PM Lunch looks like could be improved but not sure how to achieve that at present. The breakfast that overlaps w/Lunch on Tues could, in theory, as well but only if we start ignoring small overlaps like that.

This is the screenshot I have from the data file you provided

Screenshot_20221029_200043.png
Screenshot_20221029_200043.png (90.5 KiB) Viewed 824 times

In any case, the OP you started with (the two events with Iona and Janne), you mentioned some icons were being cut off. Do you have a test case for that issue?

If you want to comment/screenshot what you are thinking about the data file you uploaded, I would be happy to check out what I can. Or, if you have the data file to go with the 2nd original screenshot, I can look into that.


Post by kristi.paulausky »

I'll send another data file, I apologize for the confusion.


Post by marcio »

Hey kristi.paulausky,

We'll be waiting for that data sample for checking your case.

Best regards,
Márcio


Post by kristi.paulausky »

Hello!

Im not sure why but for some reason I cannot view any of the images and attachments in this ticket. I had a colleague attempt to sign in and they are also not able to see the images and attachments. Im not sure what you are seeing from the data provided since the images are not loading for me, but when I take the events from the json provided and simply paste into the basic example sandbox I believe October 11, 12, and 13th demonstrate the unexpected behavior of events getting cut off horizontally. Ive attached two screen captures.

Attachments
Screen Shot 2022-10-31 at 4.54.36 PM.png
Screen Shot 2022-10-31 at 4.54.36 PM.png (1.64 MiB) Viewed 749 times
Screen Shot 2022-10-31 at 9.46.10 AM.png
Screen Shot 2022-10-31 at 9.46.10 AM.png (1.95 MiB) Viewed 749 times

Post by kristi.paulausky »

Hey all! I just wanted to check in to see if you needed anything else from me? My previous posts screen captures displays the issue I was describing using the previously supplied json file, copying and pasting the events into the basic demo. If there are still issues, could someone possibly send me another screen capture? As I previously mentioned, for some reason the earlier images that were sent are not loading so I cannot see the issue you are describing with the provided json file.


Post by Animal »

When you say it describes the issue, do you mean this "Lunch" event could be full width since it would not occlude useful data, only the bottom parts of long running events?

Screenshot 2022-11-03 at 23.27.47.png
Screenshot 2022-11-03 at 23.27.47.png (43.96 KiB) Viewed 688 times

Post Reply