search

razorness / vue3-calendar-heatmap

A lightweight calendar heatmap Vue 3 component built on SVG, inspired by julienr114's vue-calendar-heatmap and github's contribution calendar graph
https://razorness.github.io/vue3-calendar-heatmap
MIT License
90 stars 18 forks source link

Dates Off by 1 Day #24

Closed paltman closed 1 year ago

paltman commented 1 year ago

My data has string dates (YYYY-MM-DD) however, when fed into component, they are being rendered as one day prior. Could this be a timezone issue with how the component is handling dates?

Screenshot 2023-04-23 at 8 18 28 AM Screenshot 2023-04-23 at 8 18 37 AM
paltman commented 1 year ago

Seems like a naive parsing of the date string. I think I can work around it like so:

"2023-04-18".valueOf()
// "2023-04-18"

new Date("2023-04-18")
// Date Mon Apr 17 2023 19:00:00 GMT-0500 (Central Daylight Time)

new Date("2023-04-18T00:00:00")
// Date Tue Apr 18 2023 00:00:00 GMT-0500 (Central Daylight Time)
razorness commented 1 year ago

You can use instance of Date and string as date field. You can parse the values on your own and set your Date objects as date values.

Best you can do is to use ISO8601/RFC3339 compliant strings.