/*
http://blog.livedoor.jp/dankogai/archives/50978399.html
thanks ! dankogai !!
*/
function add_class_name(obj,add_classes){
  var tmp_hash = new Array();
  var new_class_names = new Array();
  var class_names = obj.className.split(" ").concat(add_classes.split(" "));
  for(var i in class_names){if(class_names[i] != ""){tmp_hash[class_names[i]] = 0;}}
  for(var key in tmp_hash){new_class_names.push(key);}
  obj.className = new_class_names.join(" ");
}

function leap(year){
  return year % 4 ? 0 : year % 100 ? 1 : year % 400 ? 0 : 1;
}

function make_cal_array(year){
  var months = [31, 28 + leap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  var result = [];
  for (var m = 0; m < 12; m++){
    result[m] = [];
    var dofw1 = (new Date(year, m, 1, 0, 0, 0)).getDay();
    for (var d = 1; d <= months[m]; d++){
      result[m][d + dofw1 - 1] = d;
    }
  }
  return result;
}

var daynames = ['sun','mon','tue','wed','thu','fri','sat'];

function make_cal_monthly(year, m){
  var now  = new Date();
  var now_year = now.getYear() + 1900;
  var now_mon  = now.getMonth() + 1;
  var now_date = now.getDate();

  var cal = make_cal_array(year);
  var table = document.createElement('table');
  // header
  var tr = document.createElement('tr');
  for (var d = 0; d < 7; d++){
    var th = document.createElement('th');
    th.innerHTML = th.className = daynames[d];
    tr.appendChild(th);
  }
  var thead = document.createElement('thead');
  thead.appendChild(tr);
  table.appendChild(thead);
  // body;
  var tbody = document.createElement('tbody');
  for (var d = 0, l = cal[m].length; d < l; d++){
    if (d % 7 == 0) tr = document.createElement('tr');
    var td = document.createElement('td');
    if (cal[m][d]){
      td.innerHTML = cal[m][d];
      td.className = daynames[d % 7];
    }
    if (year === now_year && now_mon && cal[m][d]=== now_date){
      add_class_name(td, 'now');
    }
    tr.appendChild(td);
    if (d % 7 == 6) tbody.appendChild(tr);
  }
  tbody.appendChild(tr);
  table.className = 'mcal';
  var caption = document.createElement('caption');
  caption.innerHTML = year + '.' + (m+1);
  table.appendChild(caption);
  table.appendChild(tbody);
  return table;
}

function make_calendars(year, p){
  p.innerHTML = '';
  //p.appendChild(make_cal_yearly(year));
  for (var m = 0; m < 12; m++){
   var mcal = make_cal_monthly(year, m);
   p.appendChild(mcal);
   if (m % 3 == 2){
     var br = document.createElement('br');
     br.clear = 'all';
     p.appendChild(br);
   }
  };
}

function updateCal(){
  var now  = new Date();
  var year = now.getYear() + 1900;
  var mon  = now.getMonth() + 1;
  var cal = document.getElementById('cal');
  cal.innerHTML ='';
  cal.appendChild(make_cal_monthly(year,mon-1));
  //viewResizeTarget('.mcal');
}




updateCal();
setInterval(function() {
  updateCal();
}, 6 * 60 * 60 * 1000);


$(function(){
  $(document.body).on('dblclick', function(){
    document.body.requestFullscreen();
  });
});

.mcal{
  width:100%;
  height:96vh;
  margin:0 auto;
}

#cal table caption{
  font-size:6vmin;
}
#cal table.mcal tr{
  height:24px;
}
#cal table.mcal th,
#cal table.mcal td{
  width:14.28%;
  border:1px solid #999999;
  text-align:center;
  min-width:32px;
  min-height:32px;
  vertical-align: middle;
  font-size:6vmin;
}
#cal caption{
  font-size:32px;
}
#cal table.mcal td.now{
  background-color:rgba(0, 0, 0, .1);
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-date-calendar/