Skip to content

Instantly share code, notes, and snippets.

@poezn poezn/_.md

Created Jan 8, 2014
Embed
What would you like to do?
Calendar
{"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"}
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)));
#display {
background-color: #FFF;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.