Group by month

[cedricdelpoux]

Hello, It could be awesome to group heatmap by month to get something like:

[SamSunani]

I have done something similar using the package. I create separate calendars and arrange them in a grid. It would be nice if there was a props that could automatically do this.

[cedricdelpoux]

Nice. Could you share the props you used to get this result ?

[skjo0c]

@SamSunani I would like to check how you did this as well. Could you share it please.

[SamSunani]

Hi everyone,

@skjo0c @xuopled

sorry for the late reply.

Here is the code I used to generate this:

I create a calendar array with the start and end dates for each month. The first month's date is inside calendarStartDate

 const { calendarStartDate } = props;
 const calendarDatesArray = [];
for (let i = 1; i < 5; i++) {
    calendarDatesArray.push({
      start: new Date(
        Date.UTC(
          calendarStartDate.getFullYear(),
          calendarStartDate.getMonth() + i - 1,
          0
        )
      ),
      end: new Date(
        Date.UTC(
          calendarStartDate.getFullYear(),
          calendarStartDate.getMonth() + i,
          0
        )
      )
    });
  }

and then using the calendar date array I create four CalendarHeatmap. I create it inside a Grid which is part of semantic-ui-react

  <Grid columns="two">
{calendarDatesArray.map((date, index) => (
          <Grid.Column key={index}>
            <CalendarHeatmap
              showWeekdayLabels={true}
              startDate={date.start}
              weekdayLabels={['Mon', 'Mon', 'Wed', 'Wed', 'Fri', 'Fri', 'Sun']}
              endDate={date.end}
              horizontal={false}
              values={props.values}
              transformDayElement={(element, value, index) => {
                  do_something()
              }}
              classForValue={value => {
                  do_something()
              }}
            />
          </Grid.Column>
        ))}
  </Grid>

I had issues displaying the proper names of days of the week, so I used weekdayLabels={['Mon', 'Mon', 'Wed', 'Wed', 'Fri', 'Fri', 'Sun']} to overwrite the previous values and offset the labels so my week begins with Mon.

[skjo0c]

@SamSunani thanks for your help, I was able to recreate it for my project as well. But it looks like weekdayLabel is shown only for even days!