Current Time Indicator and short Events are offset by step-size number of minutes

[stianeikeland]

Do you want to request a feature or report a bug?

Bug / Regression caused by #1204

What's the current behavior?

https://codesandbox.io/s/react-big-calendar-example-feofz

1. Scroll down to current time.
2. Notice that the current time indicator is off by 15 minutes (one step size)

See related issue with events here: https://codesandbox.io/s/react-big-calendar-example-e1o2n
Events shorter than step-size minutes are offset.

What's the expected behavior?

The current time indicator should be at current time.

Likely cause

https://github.com/intljusticemission/react-big-calendar/blob/7619e592a6e880860c7fc2e9cbc6473ede386955/src/utils/TimeSlots.js#L135-L138

When calculating the time line position we hit the top branch of this ternary if. The timeslot step (ex: 15) is subtracted from the number of minutes since calendar min.

A calendar starting at 00:00, ending at 23:59, with current time 14:00 has rangeStart/End 14*60=840. We should be at 58,33% of the day, but (840-15)/(15*96)*100=57,29. 15 minutes..

[stianeikeland]

Seems like #1204 caused other regressions too. Create a 0 minute long event, and it will offset by negative stepsize minutes in the calendar.

Example: https://codesandbox.io/s/react-big-calendar-example-e1o2n

[dkenul]

@stianeikeland That PR causes the behavior outlined here as well.
#1381

[longsleep]

I suggest to revert #1204 the part introducing the breakage until it can be fixed without breaking time ranges for current time indicator and short events.

This does the trick for me:

diff --git a/src/utils/TimeSlots.js b/src/utils/TimeSlots.js
index 06e399d..ded31f4 100644
--- a/src/utils/TimeSlots.js
+++ b/src/utils/TimeSlots.js
@@ -132,10 +132,7 @@ export function getSlotMetrics({ min: start, max: end, step, timeslots }) {
 
       const rangeStartMin = positionFromDate(rangeStart)
       const rangeEndMin = positionFromDate(rangeEnd)
-      const top =
-        rangeEndMin - rangeStartMin < step
-          ? ((rangeStartMin - step) / (step * numSlots)) * 100
-          : (rangeStartMin / (step * numSlots)) * 100
+      const top = (rangeStartMin / (step * numSlots)) * 100;
 
       return {
         top,

[IharOk]

Hi guys,
Faced the same "15 minutes" issue after update to 0.22.0 version...

[stianeikeland]

Hello @jquense,
I'm not sure this should been closed, as only half the problem is solved.

The time indicator top position was fixed in #1447,
But there's still the same problem for events shorter than timeslot-size minutes.

I've updated the example here with v0.22.1
https://codesandbox.io/s/react-big-calendar-example-lx41t

If you want I can create a new issue containing only the event problem.

Thanks!

[stianeikeland]

Oh! I just noticed there's a PR that possibly fixes the event issue over at #1462