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

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…

[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,

[stianeikeland]

Oh! I just noticed there’s a PR that possibly fixes the event issue over at https://github.com/intljusticemission/react-big-calendar/pull/1462