Calendars and matrix transposition

by mcsf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<div id="app"></div>

CSS

td { width: 2em; padding: 1px; text-align: right; }
h2 { font-size: 110%; font-weight: bold; margin: 4px 0 8px 4px; }

React

function transpose(matrix) {
	return _.zip(...matrix)
}

function monthMatrix(dayCount = 31) {
	return _.chunk(_.range(1, dayCount + 1), 7)
}

function Table({matrix}) {
	return <table><tbody>
    {matrix.map((row, i) =>
    	<tr key={i}>{row.map((cell, j) =>
      	<td key={j}>{cell}</td>
      )}</tr>
    )}
	</tbody></table>
}

ReactDOM.render(
	<div>
    <h2>Plain month matrix</h2>
  	<Table key="horizontal" matrix={monthMatrix()} />
    <h2>Transposed month matrix</h2>
  	<Table key="vertical" matrix={transpose(monthMatrix())} />    
  </div>,
  document.querySelector("#app")
)