SOURCE

;(function(){
	
  Date.prototype.offsetDays = function(offset){
      return new Date(this.getTime() + offset * 86400000);
  }
  
  function pad(v,l){
    if(!l) l = 2;
    v = String(v);
    while(v.length < l) v = '0'+v;
    return v;
  }
  
  function dateClick(e){
    alert(e.target.getAttribute('value'));
  }
  
  function refreshCanl(){
  	document.querySelector('.canl-header > span.year').innerText = currentYear + '年';
		document.querySelector('.canl-header > span.month').innerText = (currentMonth+1) + '月';
  }
  
  var today = new Date();
	var selectedDay = new Date();
	var currentYear = selectedDay.getFullYear();
	var currentMonth = selectedDay.getMonth();
	document.querySelector('.canl-header > span.prevYear').onclick=()=>{
    currentYear -= 1;
    refreshCanl();
  }
  document.querySelector('.canl-header > span.prevMonth').onclick=()=>{
    currentMonth -= 1;
    if(currentMonth < 0){
      currentMonth = 11;
      currentYear -= 1;
    } 
	document.querySelector('.canl-header > span.nextYear').onclick=()=>{
    currentYear += 1;
    refreshCanl();
  }
  document.querySelector('.canl-header > span.nextMonth').onclick=()=>{
    currentMonth += 1;
    if(currentMonth > 11){
      currentMonth = 0;
      currentYear += 1;
    }     
    refreshCanl();
  }
  refreshCanl();
})();

<div class='canl'>
  <div class="canl-header">
    <span class="prevYear">&lt;&lt;</span>
    <span class="prevMonth">&lt;</span>
    <span class="year">2018年</span>
    <span class="month">2月</span>
    <span class="nextMonth">&gt;</span>
    <span class="nextYear">&gt;&gt;</span>
  </div>
  <div class="canl-body">
    
  </div>
</div>

.canl{
  display:flex;
  width:50%;
  border:1px solid black;
  background-color:#AAA;
  //box-shadow:
}
.canl span{
  padding:3px;
}
.canl-header{
  padding:5px;
  display:flex;
  //justify-content:space-around;
  align-items: baseline;
  width:100%;}
.year{
  flex-grow:2;
  text-align:right;  
}
.month{
  flex-grow:2;
  text-align:left;
}