Calendar-Month/Hour view

Built with blockbuilder.org

inspiration from : https://bl.ocks.org/enjalot/5e6f5a72b9c3677d72cb14b70b7a4bf5

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
  shape-rendering: crispEdges;
}

.day {
  fill: #fff;
  stroke: #ccc;
}

.month {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var width = 960,
    height = 136,
    cellSize = 17; // cell size
var  hour_no= 7,
     day_no=53;

var percent = d3.format(".1%"),
    format = d3.timeFormat("%Y-%m-%d"),
    dformat = d3.timeFormat("%d %H")  ;

var dw=900,dh=900;
var ho = d3.select("body")
    .append("svg")
    .attr("width", dw)
    .attr("height", dh)
    .attr("background-color",'steelblue')
    .append("g")
    .attr("transform", "translate(" + ((width - cellSize * day_no) / 2) + "," + (height - cellSize * hour_no - 1) + ")");

ho.append("text")
      .attr("transform", "translate(6," + cellSize * 3.5 + ")rotate(-90)")
      .text("xxx");
      //console.log(d3.timeHours(new Date(2017,0,1), new Date(2017,1,1)))
var hrect= ho.selectAll(".day") .data(function(d){ return d3.timeHours(new Date(2017,0,1), new Date(2017,1,1)); })
    .enter().append("rect")

.attr("class", "day")
    .attr("width", cellSize)
    .attr("height", cellSize)
    .attr("y", function(d) { return  d.getDate() * cellSize; })
    .attr("x", function(d) {  return d.getHours() * cellSize; })
    .datum(dformat);
    hrect.append("title")
        .text(function(d){ return d;})

</script>

https://d3js.org/d3.v4.min.js