value always 'null'

<CalendarHeatmap endDate = {new Date(endCalendar)} numDays = {365} values = {schedulesTimes} onClick = {(value) => { alert(value) }} titleForValue = {customTitleForValue} tooltipDataAttrs = {customTooltipDataAttrs} />

when i click the block, it always alert null, have any idea? 😊

[kevinsqi]

yeah - so the value prop, schedulesTimes, is an array of objects, right? the component expects a value attribute for each object which contains the date. The onClick callback gets passed the value attribute of that particular day - so if you don’t have an object for that day, value will be null.

Currently, if you want to get a non-null value for every square, you’ll have to add all the days in the range to the values prop in order to have onClick get the right value, e.g.:

<CalendarHeatmap
  values={[
    { value: <startDate>},
    { value: <startDate + 1>},
    ...
    { value: <endDate> }
  ]}
/>

I was considering adding a second parameter to onClick to provide the date clicked even if value wasn’t provided, so that the values array can be sparse in this use case, but wasn’t sure it was worth making the API more complicated. I’m open to that idea.

[lucaschen]

I don’t think that adding a second argument is a bad idea.

Right now the API provides no way for the code to detect which empty square was clicked, when an empty square is clicked.

I can definitely see a second argument in the onClick handler being extremely useful, e.g. when trying to add new information for a particular date.