| 67 | {Array.from({ length: MONTHS_IN_YEAR + 1 }, (_, i) => { 68 | // we want to walk backwards 13 months, starting at the current month (i.e: Jan 2024, Dec 2023, Nov 2023, etc.) 69 | const relativeDate = new Date( 70 | date.getFullYear(), 71 | date.getMonth() - i, 72 | 1, 73 | ) 74 | 75 | const relativeDiff = 76 | new Date( 77 | relativeDate.getFullYear(), 78 | relativeDate.getMonth() + 1, 79 | 0, 80 | ).getDate() + relativeDate.getDay() 81 | 82 | // colspan by default is the number of weeks in the month of the relative date 83 | let colspan = Math.floor(relativeDiff / DAYS_IN_WEEK) 84 | 85 | if (i === 0) { 86 | // if we're at the current month, we need to offset the colspan by the number of days in the current week 87 | colspan = Math.floor(date.getDate() / DAYS_IN_WEEK) 88 | } 89 | 90 | if (i === MONTHS_IN_YEAR) { 91 | // if we're at the last month, the colspan should be whatever is left remaining after 92 | // the cols taken by the first month + one extra col 93 | colspan = 94 | colspan - Math.floor(date.getDate() / DAYS_IN_WEEK) + 1 95 | } 96 | 97 | return ( 98 | | 103 | {!!colspan && 104 | new Date( 105 | date.getFullYear(), 106 | date.getMonth() - i, 107 | ).toLocaleString('default', { 108 | month: 'short', 109 | })} 110 | | 111 | ) 112 | }).reverse()} 113 |
|---|---|
|
119 |
120 | {row % 2 === 1 && DAYS[row]}
121 |
122 | |
123 |
124 | {Array.from({ length: WEEKS }, (_, column) => {
125 | const contributionIndex =
126 | index + (DAYS_IN_WEEK - row + column * DAYS_IN_WEEK)
127 | const contribution = contributions[contributionIndex]
128 |
129 | return (
130 | 135 | {contributionIndex >= currentDateIndex && ( 136 | 140 | )} 141 | | 142 | ) 143 | }).reverse()} 144 |