search

jquense / react-big-calendar

gcal/outlook like calendar component
http://jquense.github.io/react-big-calendar/examples/index.html
MIT License
7.8k stars 2.23k forks source link

Week view, Event showing twice #2617

Open anjalininjadev opened 2 months ago

anjalininjadev commented 2 months ago

Check that this is really a bug

Reproduction link

https://codesandbox.io/p/sandbox/react-big-calendar-example-forked-d4yhkq?file=%2Fsrc%2Fevents.js%3A7%2C18-7%2C62

image

Bug description

Description: I have one event where the start time is 08-07-2024 at 11:00 pm and the end time is 09-07-2014 at 00:00 am.

In this case, the event is showing for both dates 08-07-2024 and 09-07-2014, it should show for the date only 08-07-2024. In Google Calendar it is only showing for 08-07-2024.

Expected Behavior

In the mentioned case, it should show for the date only 08-07-2024. Like the Google calendar and outloook. It is working in day week. issue coming in week view

Actual Behavior

In the mentioned case, the event showing for both dates 08-07-2024 and 09-07-2014

react-big-calendar version

1.12.1

React version

18.2.0

Platform/Target and Browser Versions

All browser

Validations

Would you like to open a PR for this bug?

anjalininjadev commented 2 months ago

Any one can help me please ?

geraldhoxha95 commented 2 months ago

Why would this show just the one day if the end of the event is 12:00 AM on a new day? looks correct to me

anjalikalsariya commented 2 months ago

Why would this show just the one day if the end of the event is 12:00 AM on a new day? looks correct to me

Thanks @geraldhoxha95 for the quick reply.

Because 12:00 AM is the end, not a start, it looks like it starts from 12:00 am and ends after 12:00 am but I think that is not correct. If the end will be 12:01 am (> 12:00 am) then it is correct. If you see the same case on another standard calendar like google and Outlook it will only show a one-day event for this specific case.

Note: this only issue with week view, for day view is working only showing for one day.

Outlook example

image
geraldhoxha95 commented 2 months ago

@anjalikalsariya I have a PR that fixes your issue. I don't have enough time to fully test this out, but it seems to solve your issue. Feel free to fork it and use it, i just can't fully test it and guarantee it makes it to master. https://github.com/jquense/react-big-calendar/pull/2622

Root of the issue is when determining if an event belongs to the week day, it compares the date range of the event to the week day. So since the event ends at 12:00AM of the next day, this is technically in range of the next day.

The fix aims to make the comparison more granular, at the minute level, so a time like 12:00 AM gets ignored.

anjalikalsariya commented 2 months ago

Thank you so much @geraldhoxha95.

I have seen your PR and video clip. Its look like issue resolved.

anjalikalsariya commented 2 months ago

@geraldhoxha95 I have seen fix PR is open so Do I need to wait for the merging and new release of package right ?

geraldhoxha95 commented 2 months ago

@anjalikalsariya to use it with the npm package, yes it will need to be released. There are ways to fork the repo and link your pcakage JSON to that instance, but if you're not comfortable doing that you should wait. I need some time to test this out, I might have some free time over the weekend

anjalikalsariya commented 2 months ago

Thanks @geraldhoxha95. I will wait for new release.