Time Range Bug: Incorrect Placement and Disappearance of Green Lines in Event Scheduler

[liaokaime]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/react-big-calendar-example-forked-m5rvzn

Bug description

When min and max are set to a time other than getNow, the green line appears in the wrong place. And when you try to click on any of the events, the green lines disappear

Expected Behavior

No response

Actual Behavior

No response

react-big-calendar version

1.10.2

React version

18.2.0

Platform/Target and Browser Versions

Microsoft Edge 121.0.2277.128

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[nourbenamor2001]

@liaokaime
I think that if you put the getNow time at a time that is outside of the min and max range, it displays the green line at a different slot, or cause it to disappear entirely. Here's when I put the getNow time within the [min, max] time range:

You can see that the green line displays at the correct time slot.

[nourbenamor2001]

@liaokaime

I noticed a different issue with your code though, I noticed that setting the getNow at a specific date within the month of March (number 3) renders you the selected date at the month of April (should be number 4). This issue lies in how you're setting the date in getNow and the defaultDate prop.

In JavaScript, months are zero-indexed, meaning January is 0, February is 1, and so on.

So, when you set the date to new Date(2015, 3, 12), you're actually setting it to April 12th, 2015, not March 12th as you intended.

Here's how to fix the issue:

1. Adjust the month values:
Change getNow and defaultDate to use 2 instead of 3 for the month to represent March:

getNow={() => new Date(2015, 2, 12, 8, 0, 0, 0)}
defaultDate={new Date(2015, 2, 12)}

2. Alternatively, use moment.js to set the date, then you would count the months as their normal number representation:

getNow={() => moment('2015-02-12 08:00:00').toDate()}
defaultDate={moment('2015-02-12').toDate()}

By making these changes, the calendar will display the correct date that you intended it to.
I hope this helps you!

[liaokaime]

@nourbenamor2001 Thanks for your reply, If the time for getNow is set between min and max, there is no doubt that it will be correctly displayed within the appropriate time period. The crux of my question lies in what happens when it is not within the min and max range; it should have a stable expected behavior, such as not displaying the green line at all, or displaying it at the very beginning or end. What is certain is that it should not appear at a random position.

[liaokaime]

@nourbenamor2001 Regarding the part about my code, if I'm not mistaken, you are telling me that there is a difference of one between the Arabic numeral for the month in the Date I created and the actual month. If that's the case, I believe it's irrelevant to the main point of this issue, because no matter which months my min and max are, as long as getNow is outside the range, it will result in the green line being displayed at a random position. But thank you for pointing it out.