Google Calendar
view source

JavaScript

/*
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();
  });
});

CSS

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

HTML

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

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

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。