Calendar

Make a calendar with D3.js. To produce the calendar data, use makeMonth(month, year), where month is zero-indexed.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }
    .calendar {
      font-family: "Helvetica Neue", sans-serif;
    }
    .calendar .month {
      margin: 0px 20px;
      display: inline-block;
      width: calc(50% - 40px);
    }
    .calendar .month-name {
      text-align: center;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .calendar rect {
      fill: none;
      stroke: #eee;
    }
    .calendar text {
      text-anchor: middle;
      font-size: 14px;
    }
    .calendar .day.past text {
      fill:  #aaa;
    }
    .calendar .day.today rect {
      fill: #222;
    }
    .calendar .day.today text {
      fill: #fff;
    }
    .calendar .outline {
      fill: none;
      stroke: #888;
    }

@media only screen and (max-width: 574px){
      .calendar .month {
        margin: 0px;
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="calendar"></div>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://unpkg.com/arraygeous@0.0.6/build/arraygeous.min.js"></script>
  <script>
    const calendar = d3.select(".calendar");
    
    const day = 86400000;

const now = new Date;
    const month = now.getMonth();
    const prevMonth = month === 0 ? 11 : month - 1;
    const year = now.getFullYear();
    const prevYear = month === 0 ? year - 1 : year;

let data = [];

makeMonth(prevMonth, prevYear);
    makeMonth(month, year);

function makeMonth(month, year){
      const monthDays = [];
      let loopMonth = month;
      let loopDay = 0;
      let loopDate = new Date(year, loopMonth, loopDay);
      let loopStartDay = loopDate.getDay();
      while (loopMonth === month){
        monthDays.push({date: loopDate, col: loopDate.getDay(), row: Math.floor((loopDate.getDate() + loopStartDay) / 7)});
        
        loopDate = new Date(loopDate.getTime() + day);
        loopMonth = loopDate.getMonth();
      }

if (monthDays[0].date.getDate() > 1){
        monthDays.shift();
      }
      if (monthDays[0].row > 0){
        monthDays.forEach(d => {
          --d.row;
          return d;
        });
      }

data.push({month, days: monthDays});
    }

const months = calendar.selectAll(".month")
        .data(data)
      .enter().append("div")
        .attr("class", d => "month month-" + d.month);

months.append("div")
        .attr("class", "month-name")
        .text(d => getMonthName(d.month));

const svg = months.append("svg");
    const g = svg.append("g");

const columns = d3.scaleBand()
        .domain(d3.range(0, 7));

const rows = d3.scaleBand()
        .domain(d3.range(0, 5));

const days = g.selectAll(".day")
        .data(d => d.days)
      .enter().append("g")
        .attr("class", "day")
        .classed("past", d => d.date.getTime() < now.getTime() - day)
        .classed("today", d => d.date.getDate() === now.getDate() && d.date.getMonth() === month && d.date.getFullYear() === year);

const dayRects = days.append("rect");

const dayNums = days.append("text")
        .attr("class", "num")
        .text(d => d.date.getDate())
        .attr("dy", 4.5);

const dayOfWeek = g.selectAll(".day-of-week")
        .data(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"])
      .enter().append("text")
        .attr("class", "day-of-week")
        .attr("dy", -4)
        .text(d => d);

const outlines = g.append("polygon")
        .datum(d => data.filter(f => f.month === d.month)[0].days)
        .attr("class", "outline");

redraw();
    addEventListener("resize", redraw);

function redraw(){
      const margin = {left: 1, right: 1, top: 16, bottom: 1};

const box = d3.select(".month").node().getBoundingClientRect();
      const baseWidth = innerWidth <= 640 ? Math.min(innerWidth, box.width) : box.width;
      const width = baseWidth - margin.left - margin.right;
      const baseHeight = Math.max((baseWidth / 2), 250);
      const height = baseHeight - margin.top - margin.bottom; // TODO: Figure this out w/r/t aspect ratio

svg
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom);

g
          .attr("transform", "translate(" + [margin.left, margin.top] + ")");

columns
          .range([0, width]);

rows
          .range([0, height]);

data.forEach(datum => {

datum.days.forEach(d => {
          d.x0 = columns(d.col);
          d.x1 = d.x0 + columns.bandwidth();
          d.y0 = rows(d.row);
          d.y1 = d.y0 + rows.bandwidth();
          d.v0 = [d.x0, d.y0];

return d;
        });

return datum;
      });

dayOfWeek
          .attr("x", (d, i) => columns(i) + columns.bandwidth() / 2);

days
          .attr("transform", d => `translate(${d.v0})`);

dayRects
          .attr("width", columns.bandwidth())
          .attr("height", rows.bandwidth());

dayNums
          .attr("x", columns.bandwidth() / 2)
          .attr("y", rows.bandwidth() / 2);

outlines
          .attr("points", calcHull);
    }

function getMonthName(n){
      return ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][n];
    }

function calcHull(days){
      const x0min = arr.min(days, d => d.x0),
            x1max = arr.max(days, d => d.x1),
            y0min = arr.min(days, d => d.y0),
            y1max = arr.max(days, d => d.y1);

// Width of top row
      const r0 = days.filter(f => f.row === 0),
            r0x0min = arr.min(r0, d => d.x0),
            r0x1max = arr.max(r0, d => d.x1);

// Width of bottom row
      const r4 = days.filter(f => f.row === 4),
            r4x1max = arr.max(r4, d => d.x1),
            r4x0min = arr.min(r4, d => d.x0);

// The top
      let points = [[r0x0min, y0min], [r0x1max, y0min]];

// The bottom right
      if (r4x1max < x1max){
        const r3y1 = days.filter(f => f.row === 3)[0].y1;
        points.push([x1max, r3y1]);
        points.push([r4x1max, r3y1]);
      }
      points.push([r4x1max, y1max]);

// The bottom left
      points.push([r4x0min, y1max]);

// The top left
      if (r0x0min > x0min){
        const r1y0 = days.filter(f => f.row === 1)[0].y0;
        points.push([x0min, r1y0]);
        points.push([r0x0min, r1y0]);
      }

return points;
    }
  </script>

</body>
</html>

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

https://unpkg.com/arraygeous@0.0.6/build/arraygeous.min.js