<CalendarHeatmap /> Changes Layout, eventhough endDate and numDays stays the same

[Stophface]

I am using the to display contributions for a whole year. But, the does not display every year the same, it varies.

1. numberOfDays = 364 endDate = 2011-12-31T00:00:00.000Z

2. numberOfDays = 365 endDate = 2012-12-31T00:00:00.000Z

   

3. numberOfDays = 364 endDate = 2013-12-31T00:00:00.000Z

   

4. numberOfDays = 364 endDate = 2014-12-31T00:00:00.000Z

   

5. numberOfDays = 364 endDate = 2015-12-31T00:00:00.000Z

   

I woud expect to be every graph the same (accounting for a leap year of course)... Why is it not showing the label for Jan in the years 2011 and 2012? Why is there always a different amount of squres for the month of january? Looking at the end of the graph, for december, it looks similar.

numDays I calculate the following

const _calculateNumberOfDays = () => {
    const firstDayOfYear = new Date('2012-01-01');
    const lastDayOfYear = new Date('2012-12-31');
    const numberOfDays = calculateElapsedDays(firstDayOfYear, lastDayOfYear);
    return numberOfDays;
}; 

const calculateElapsedDays = (startDate, endDate) => {
  const timeDifference = endDate.getTime() - startDate.getTime();
  const numberOfDays = timeDifference / (1000 * 3600 * 24);
  return numberOfDays;
};

Note, there is no data passed to it yet.

<CalendarHeatmap
  values={dates} // cuurently empty array
  numDays={numberOfDays}
  endDate={new Date('2012-12-31')} 
  />