<!-- Credit --->
<!-- how to calculate feColorMatrix - http://bit.ly/2t4ZuoC --->
<!-- photo credit - https://flic.kr/p/pG4piA --->
<!-- RGB color parser - http://mementoo.info/archives/594 --->

<svg style="visibility:hidden;" width="0" height="0"> 
  <filter id="duotone" color-interpolation-filters="sRGB">         <feColorMatrix type="matrix" values="0.7 0 0 0 0.3 0.6 0 0 0 0.2 0.3 0 0 0 0.6 0 0 0 1 0"></feColorMatrix> 
  </filter>
</svg>

<div class="flex-contatiner">
	<div class="calendar-container">
		<div class="image-container">
			<div class="image"></div>
		</div>
		<div class="calendar">
			<h2 class="month-title" id="js-month"></h2>
			<table class="calendar-table">
  			<thead>
    			<tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>
  			</thead>
  			<tbody id="js-calendar-body"></tbody>
			</table>
		</div>
	</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:600')
	
// -------- Mixins --------//	
size(w=100%,h=100%)
	width w
	height h
	
// -------- variables --------//		
$color-1 = rgb(254, 205, 211)
$color-2 = rgb(80, 50, 130)

// -------- Basic Styles --------//	
html
body
	size()

body
	background-image linear-gradient( 45deg, $color-1, $color-2)
	overflow hidden

*
	box-sizing border-box

.flex-contatiner
	size()
	display flex
	justify-content center
	align-items center
	overflow hidden

// -------- Styles --------//

.calendar-container
	position relative
	size(360px,360px)
	box-shadow  0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22)
	overflow visible

.image-container
	position absolute
	top 0
	right 0
	bottom 0
	left 0
	background-color $color-2
	
.image
	size()
	background-image url('https://c1.staticflickr.com/4/3952/15549529232_83f16d2aa2_z.jpg')
	background-repeat no-repeat
	background-size cover
	background-position center center
	filter url(#duotone)

.calendar
	position absolute
	width 100%
	height 100%
	margin-top 10%
	margin-left 10%
	padding-top 15%
	border 10px solid #fff
	font-family 'Josefin Sans', sans-serif
	.month-title
		position absolute
		top -0.4em
		left -0.3em
		margin 0
		font-size 400px
		line-height 1
		letter-spacing 0
		color #fff
		opacity .15
	.calendar-table
		position absolute
		width 100%
		height 85%
		border-collapse collapse
		color #fff
		th, td
			text-align center
			font-size 16px
		td
			cursor pointer
			transition opacity .3s ease
			&:not(.is-today)
				opacity .5
			&:hover
				opacity 1
	.is-today
		opacity 1
		background-color #fff
		color $color-2

/* calendar built with the tutorial from https://liginc.co.jp/355474 */


var $window = $(window);
var $month = $('#js-month');
var $tbody = $('#js-calendar-body');

var today = new Date();
var currentYear = today.getFullYear(),
    currentMonth = today.getMonth();

$window.on('load',function(){
  calendarHeading(currentYear, currentMonth);
  calendarBody(currentYear, currentMonth, today);
});

function calendarBody(year, month, today){
  var todayYMFlag = today.getFullYear() === year && today.getMonth() === month ? true : false;
  var startDate = new Date(year, month, 1);
  var endDate  = new Date(year, month + 1 , 0);
  var startDay = startDate.getDay();
  var endDay = endDate.getDate();
  var textSkip = true;
  var textDate = 1;
  var tableTd ='';
  var tableBody ='';
  
  for (var row = 0; row < 6; row++){
    var tr = '<tr>';
    
    for (var col = 0; col < 7; col++) {
      if (row === 0 && startDay === col){
        textSkip = false;
      }
      if (textDate > endDay) {
        textSkip = true;
      }
      var addClass = todayYMFlag && textDate === today.getDate() && !textSkip ? 'is-today' : '';
      var textTd = textSkip ? '&nbsp;' : textDate++;
      var td = '<td class="'+addClass+'">'+textTd+'</td>';
      tr += td;
    }
    tr += '</tr>';
    tableBody += tr;
  }
  $tbody.html(tableBody);
}

function calendarHeading(year, month){
  $month.text(month + 1);
}