fabiovalse/README.md

## README.md

      
    Raw
  

              README.md
            
          
## index.css
svg {
  background: #fff;
  font-family: Helvetica;
  font-weight: lighter;
}

rect {
  shape-rendering: crispEdges;
}

.dayNumber {
  font-size: 20px;
}

.headerDay {
  font-size: 17px;
}

.monthYear {
  font-size: 25px;
}

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <script src="index.js"></script>
    </body>
</html>

## index.js
var width = 960, height = 650;
var dayWidth = (width - 20) / 7;
var dayHeight = (height - 65) / 5;
var weekdays = ["Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"];
var months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + ((width - dayWidth * 7)/2) + ", " + ((height - dayHeight * 5)/1.1) + ")");

var data = [];

var d = new Date();
getMonthData(d.getFullYear(), d.getMonth()+1);

function getMonthData(year, month_number) {

  var firstDay = new Date(year, month_number-1, 1);
  var lastDay = new Date(year, month_number, 0);

  var fday = (firstDay.getDay() === 0) ? 7 : firstDay.getDay();
  var lday = String(lastDay).split(" ")[2];

  var nDays = parseInt(lday,0) + fday;

  for(i = 1; i <= nDays; i++) {
    if (i < fday /*|| i >= nDays*/)
      data.push("");
    else if (i < nDays) {
        data.push(i-fday+1);
    }
  }
}

draw = function() {

  /* Month and Year
  */
  svg.append('text').text(months[d.getMonth()] + " " + d.getFullYear()).attr('y', - 30).attr('class', 'monthYear');

  /* Top week days header
  */
  var header = svg.selectAll('.headerDay')
    .data(weekdays)
      .enter().append('g')
    .append('text')
    .attr('class', 'headerDay')
    .attr('x', function(d, i) {
      return i * dayWidth;
    })
    .attr('y', - 4)
    .text(function(d) {
      return d.substring(0,3);
    });

  /*
  */
  var day = svg.selectAll('.day')
    .data(data);

  var calendar = day.enter().append('g');

  calendar.append('rect')
    .attr('class', 'day')
    .attr('width', dayWidth)
    .attr('height', dayHeight)
    .attr('x', function(d, i) {
      return (i % 7) * dayWidth;
    })
    .attr('y', function(d, i) {
      return Math.floor(i / 7) * dayHeight;
    })
    .attr('fill', function(d, i) {
      return ([5,6,12,13,19,20,26,27,33,34].indexOf(i) > -1 && d !== "") ? "#bbbbbb" : "#fff";
    })
    .attr('stroke', '#303030')
    .attr('stroke-width', function(d) {
      return (d !== "") ? 1 : 0;
    });

  calendar.append('text')
    .attr('class', 'dayNumber')
    .text(function(d) {return d;})
    .attr('x', function(d, i) {
      return (i % 7) * dayWidth + 3;
    })
    .attr('y', function(d, i) {
      return Math.floor(i / 7) * dayHeight + 20;
    });
};

draw();

## thumbnail.png

      
    Raw
  

              thumbnail.png
	svg {
	background: #fff;
	font-family: Helvetica;
	font-weight: lighter;
	}

	rect {
	shape-rendering: crispEdges;
	}

	.dayNumber {
	font-size: 20px;
	}

	.headerDay {
	font-size: 17px;
	}

	.monthYear {
	font-size: 25px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<link type="text/css" href="index.css" rel="stylesheet"/>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<script src="index.js"></script>
	</body>
	</html>
	var width = 960, height = 650;
	var dayWidth = (width - 20) / 7;
	var dayHeight = (height - 65) / 5;
	var weekdays = ["Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"];
	var months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + ((width - dayWidth * 7)/2) + ", " + ((height - dayHeight * 5)/1.1) + ")");

	var data = [];

	var d = new Date();
	getMonthData(d.getFullYear(), d.getMonth()+1);

	function getMonthData(year, month_number) {

	var firstDay = new Date(year, month_number-1, 1);
	var lastDay = new Date(year, month_number, 0);

	var fday = (firstDay.getDay() === 0) ? 7 : firstDay.getDay();
	var lday = String(lastDay).split(" ")[2];

	var nDays = parseInt(lday,0) + fday;

	for(i = 1; i <= nDays; i++) {
	if (i < fday /\|\| i >= nDays/)
	data.push("");
	else if (i < nDays) {
	data.push(i-fday+1);
	}
	}
	}

	draw = function() {

	/* Month and Year
	*/
	svg.append('text').text(months[d.getMonth()] + " " + d.getFullYear()).attr('y', - 30).attr('class', 'monthYear');

	/* Top week days header
	*/
	var header = svg.selectAll('.headerDay')
	.data(weekdays)
	.enter().append('g')
	.append('text')
	.attr('class', 'headerDay')
	.attr('x', function(d, i) {
	return i * dayWidth;
	})
	.attr('y', - 4)
	.text(function(d) {
	return d.substring(0,3);
	});

	/*
	*/
	var day = svg.selectAll('.day')
	.data(data);

	var calendar = day.enter().append('g');

	calendar.append('rect')
	.attr('class', 'day')
	.attr('width', dayWidth)
	.attr('height', dayHeight)
	.attr('x', function(d, i) {
	return (i % 7) * dayWidth;
	})
	.attr('y', function(d, i) {
	return Math.floor(i / 7) * dayHeight;
	})
	.attr('fill', function(d, i) {
	return ([5,6,12,13,19,20,26,27,33,34].indexOf(i) > -1 && d !== "") ? "#bbbbbb" : "#fff";
	})
	.attr('stroke', '#303030')
	.attr('stroke-width', function(d) {
	return (d !== "") ? 1 : 0;
	});

	calendar.append('text')
	.attr('class', 'dayNumber')
	.text(function(d) {return d;})
	.attr('x', function(d, i) {
	return (i % 7) * dayWidth + 3;
	})
	.attr('y', function(d, i) {
	return Math.floor(i / 7) * dayHeight + 20;
	});
	};

	draw();