The dates on the heatmap are off by one

[jyang81]

The day of the week is not rendering correctly. For example, my start date is '2019-03-11', which is a Monday and my end date is '2019-06-21' which is a Friday. But the calendar renders from "Monday 2019-03-12" to "Thursday 2019-06-21", which in incorrect.

My data point for 03-11 does not show up, and my data point for 03-12 shows up on the box where Monday 03-11 is supposed to be. The calendar renders boxes up to 06-21, but it is on Thursday instead of Friday. I'm not sure where the mixup is, but I cannot get it to render correctly.

[kevinsqi]

I'll be happy to look into it. Can you fork this CodeSandbox and pass in the exact data that you're using to see this behavior? https://codesandbox.io/s/73mk9wlyx

[jyang81]

Hi Kevin,

Thank you so much for responding! I was trying to use this in my capstone project, but I couldn't get it to work correctly. I might not be inputing the dates correctly, but I couldn't figure out how to fix it. Here's the fork:

https://codesandbox.io/s/react-calendar-heatmap-basic-demo-zt0ny

Thanks for your help!

-Joe

On Wed, Jul 17, 2019 at 10:41 PM Kevin Qi [email protected] wrote:

I'll be happy to look into it. Can you fork this CodeSandbox and pass in the exact data that you're using to see this behavior? https://codesandbox.io/s/73mk9wlyx

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/okize/react-calendar-heatmap/issues/112?email_source=notifications&email_token=AKU7X7JPMN6Y7G6CXSVYCRTP777BZA5CNFSM4H5A7O72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2HMH4A#issuecomment-512672752, or mute the thread https://github.com/notifications/unsubscribe-auth/AKU7X7LH6O5NQNTX754JSZDP777BZANCNFSM4H5A7O7Q .

[kevinsqi]

Hi @jyang81. Took a look and there's an issue with how dates are indexed. I'd like to fix this but it'll likely involve some pretty large changes to the component, and I can't guarantee when I'll be able to work on that. Sorry about that!

[jyang81]

Thanks for getting back to me Kevin! I understand this probably isn't your highest priority at the moment. I'll continue to use the package as is, until you are able to fix the issue. Just curious, are there any workarounds I can do to get it to show up correctly for now? If not, it's fine. I can wait until it's fixed. Thanks again, I appreciate it!

[kevinsqi]

There isn't a great workaround I can think of right now. I'll let you know if I can come up with something, or when this gets fixed for real.

[oottinger]

I just ran into this issue as well. For a workaround I just went through my data list and added 1 to the date for each entry. Also use a custom tooltip which accounts for the shift.

@kevinsqi does this library factor in a leap year for the index? Haven't had much time to look at the code to see how things are implemented.

[alelevinas]

Hi there! I see this PR is merged already but there haven't been any new releases since August 2019. @kevinsqi wondering if you are still maintaining this project or if it is now deprecated? thanks!

[juliomilani]

Found a solution:

• You should replace getDay() by getUTCDay() for string date input and you should add 1 to getNumEmptyDaysAtStart since you added 1 in getStartDate.

Your 67-73 lines should look like this:

getNumEmptyDaysAtStart() { return this.getStartDate().getUTCDay()+1; }

getNumEmptyDaysAtEnd() { return DAYS_IN_WEEK - 1 - this.getEndDate().getUTCDay(); }

[gillkyle]

I got around this by shifting my weekday labels by 1 🤷 not perfect, but got the job done for me for the time being:

Ie:

<CalendarHeatmap
  weekdayLabels={["M", "T", "W", "Th", "F", "S", "S"]}
/>

[Stophface]

I think it might be this function.

https://github.com/kevinsqi/react-calendar-heatmap/blob/master/src/index.js, line 55 following getStartDate() { return shiftDate(this.getEndDate(), -this.getDateDifferenceInDays() + 1); // +1 because endDate is inclusive }

When I remove the + 1, it works. But then again, my timezone is + 1 and I am not sure if that plays into it as well..

[SkylineDev2]

I figured out 1-line code change at my backend to address "1 day off" issue. 
It seems working for me. :)

Instead of assigning date field with the string "2022-12-19", you will need to use this format "Mon 2022-12-19".


Can't believe how I dig the internet to find this. If you are interested in how this solution was born. See more references here:

1. Inspired by others, I set the direction to use a workaround strategy by manipulating the data by +1. //Really like this component. I will not give up.
2. Searching internet, i found this stackoverflow thread
 https://stackoverflow.com/questions/17545708/parse-date-without-timezone-javascript
3. Watching this youtube, now gain more understanding on JS handling date.
 https://www.youtube.com/watch?v=oKFb2Us9kmg

Now, with 1 line code change to ensure I store heatmap data with above format. Now, heatmap component works as expected. Yeah!!


Will do more testing with remote team on different timezones. 
Let me know whether that works for you. :)