ruler-time.html

<!-- 
	@author jittagornp 
	create 28/12/2015
-->

<div class="container"></div>

<style>	
	.container{
		
	}
	
	.year{
		border : solid #D2E0BB;
		border-width : 1px 0 2px 0px;
	}

	.year,
	.month {
		float : left;
	}

	.year-header {
		background-color : #E6F7DA;
		font-weight : bold;
		text-align : center;
		padding : 5px;
		border-bottom : 1px solid #D2E0BB;
	}
	
	.month > * {
		padding : 5px;
	}
	
	.month-body{
		border-left : 1px solid #D2E0BB;
	}
	
	.year:first-child .month:first-child .month-body{
		border-left : none;
	}
	
	.clear {
		both;
	}
</style>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
	(function($, startYear, endYear){
	
		var months = [
			'Jan',
			'Feb',
			'Mar',
			'Apr',
			'May',
			'Jun',
			'Jul',
			'Aug',
			'Sep',
			'Oct',
			'Nev',
			'Dec'
		];
	
		function $month(number){
		
			var $header = $('<div/>')
				.addClass('month-header')
				.text(months[number]);
				
			var $body = $('<div/>').addClass('month-body');
		
			return $('<div/>')
				.addClass('month')
				.append($header)
				.append($body);
		}
	
		function $year(year){
			
			var $header = $('<div/>')
				.addClass('year-header')
				.text(year);
			
			var $body = $('<div/>').addClass('year-body');
			for(var i=0; i<12; i++){
				$month(i).appendTo($body);
			}
			
			$clear().appendTo($body);
		
			return $('<div/>')
				.addClass('year')
				.append($header)
				.append($body);
		}
		
		function $clear(){
			return $('<div/>').addClass('clear');
		}
	
		$(function(){
			
			var $container = $('.container');

			for(var year = startYear; year <= endYear; year++){
				$year(year).appendTo($container);
			}
			
			$clear().appendTo($container);
			
		});
	})(jQuery, 2013, 2015);
</script>