Calendar

_.md

[ Launch: Calendar ] 8321133 by poezn

config.json

{"description":"Calendar","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/WsFNbhy.png"}

inlet.js

var year = 2014,
    month = 0;

// ====

var format = d3.time.format("%d");
var formatWd = d3.time.format("%A");
var formatMonth = d3.time.format("%B %Y");

var startDateTmp = new Date(year, month, 1);
var endDateTmp   = d3.time.month.offset(startDateTmp, 1);

var weekdayStart = startDateTmp.getDay();
var weekdayEnd   = endDateTmp.getDay();

var startDate = d3.time.day.offset(startDateTmp, -1 * weekdayStart);
var endDate   = d3.time.day.offset(endDateTmp, 7 - weekdayEnd);

var days = d3.time.days(startDate, endDate);

console.log(days, startDate, endDate);

var gDays = g.selectAll("g.day")
.data(days)
.enter().append("g")
.classed("day", true)
.attr({
  "transform": function(d, i) {
    var tx = (i % 7) * 100,
        ty = 85 + Math.floor(i / 7) * 75
    return "translate(" + [tx, ty] + ")";
  }
});

gDays.append("rect")
.attr({
  "width": 100,
  "height": 75,
  "fill": function(d, i) {
    if (d.getMonth() !== month) {
      return "#7E7E7E";
    }
    if (d.getDay() < 1 || d.getDay() > 5) {
      return "#ECECEC"
    }
    
    return "none";
  },
  "stroke": "#999999"
})

gDays.append("text")
.attr({
  "transform": "translate(94, 27)"
})
.style({
  "font-family": "DIN Condensed",
  "font-weight": "bold",
  "font-size": 26,
  "fill": function(d, i) {
    if (d.getMonth() !== month) {
      return "#C9C9C9";
    }
    return "#949494";
  },
  "text-anchor": "end"
})
.text(format);

g.selectAll("text.weekday")
.data(days.splice(0, 7))
.enter().append("text")
.classed("weekday", true)
.attr({
  "transform": function(d, i) {
    var tx = i * 100;
    var ty = 74
    return "translate(" + [tx, ty] + ")"
  }
})
.style({
  "font-family": "DIN Condensed",
  "font-weight": "bold",
  "font-size": 20,
  "fill": function(d, i) {
    return "#949494";
  }
})
.text(formatWd)

g.append("text")
.attr({
  "transform": "translate(0, 39)"
})
.style({
  "font-family": "DIN Condensed",
  "font-weight": "bold",
  "font-size": 29,
  "fill": function(d, i) {
    return "#000000";
  }
})
.text(formatMonth(new Date(year, month, 1)));

styles.css

#display {
  background-color: #FFF;
}