<!-- 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);
}