Calendar not accepting weekday labels

[NullCodex]

Currently, it looks like the calendar is not accepting any new labels? Additionally the css looks off? Overlapping with the heat map itself.

I'm calling it with:

        <CalendarHeatmap
          endDate={new Date()}
          startDate={beginningDate}
          values={data}
          showWeekdayLabels={true}
          weekdayLabels={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
        />

The displayed image looks like:

[NullCodex]

Hi any updates?

[kevinsqi]

Hi @NullCodex! Sorry about the delay in responding.

It turns out weekdayLabels specifies the strings used for the labels, but only the odd-indexed labels are shown. I think this behavior is pretty confusing, and I'd be up for changing it - my initial thought would be changing weekdayLabels to do what you'd expect (render all the specified labels), and we can then remove showWeekdayLabels. In the meantime, if you fork or vendor the library and remove this conditional, you'll be able to get the behavior you're looking for.

I'm not sure sure what's up with the overlapping. Could you fork this codesandbox with your CSS and see if you can reproduce it? The default styles seem to be okay and not overlapping, so my guess is that it might be other CSS that's affecting things, but it's hard to say without a test case.

[cyclops24]

@kevinsqi Any plan to fix this? Will you accept PR about this?

[kevinsqi]

Yes, PRs would be welcome. I'd like to work on this as well, if I have time.

[resgar]

For me, it looks like this:

I fixed the overlapping problem temporarily, by reseting translation value for the X-axis to zero:

const weekdayLabels = document.getElementsByClassName('react-calendar-heatmap-weekday- 
  labels');
weekdayLabels.forEach((element) => {
  element.setAttribute('transform', 'translate(0, 14)');
});

[kunaldongre24]

Hey there, How can I show dates of the boxes onMoueOver? Even the boxes which has null values. Please help