var cellSize = 50,
    margin = 60,
    width = (53*cellSize+margin),
    height = 500;

var weekdays = ["Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"];

var dayX = d3.time.format("%w"),
    day = function(d) {return (dayX(d) === "0") ? 7 : dayX(d);},
    week = d3.time.format("%W"),
    percent = d3.format(".1%");

var svg = d3.select("body").selectAll("svg")
    .data(d3.range(new Date().getFullYear(), new Date().getFullYear()+1))
  .enter().append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + (margin/2) + ", " + ((height - 7 * cellSize)/2) + ")")
    .attr('shape-rendering', 'crispEdges')
    .attr('font-size', '10px')
    .attr('font-family', 'sans-serif');

svg.selectAll('.headerDay')
    .data(weekdays)
      .enter().append('g')
    .append('text')
    .attr('class', 'headerDay')
    .attr('x', -25)
    .attr('y', function(d, i) {
      return i * cellSize + cellSize * 1.65;
    })
    .text(function(d) {
      return d.substring(0,3);
    });

var rect = svg.selectAll(".day")
    .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter();

rect.append('g').append("rect")
    .attr("class", "day")
    .attr("width", cellSize)
    .attr("height", cellSize)
    .attr("x", function(d) { return week(d) * cellSize; })
    .attr("y", function(d) { return day(d) * cellSize; })
    .attr("fill", function(d) { return (parseInt(day(d),0) > 5 ) ? "#f2f2f2" : "#fff";})
    .attr("stroke", "#ccc");

rect.append("text")
  .text(function(d) { return String(d).split(" ")[2]; })
  .attr("x", function(d) { return week(d) * cellSize + 2; })
  .attr("y", function(d) { return day(d) * cellSize + 10; });

svg.selectAll(".month")
    .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter().append("path")
    .attr("class", "month")
    .attr("d", monthPath)
    .attr('fill', 'none')
    .attr('stroke', '#000')
    .attr('stroke-width', '2px');

function monthPath(t0) {
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
      d0 = +day(t0), w0 = +week(t0),
      d1 = +day(t1), w1 = +week(t1);
  
  return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize + "H" + w0 * cellSize + "V" + 8 * cellSize + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize + "H" + (w1 + 1) * cellSize + "V" + cellSize + "H" + (w0 + 1) * cellSize + "Z";
}