404 Blog Not Found

JavaScriptの書き初めにおあつらえ向きの問題。

nを入力としてn年の年間カレンダーを返すプログラムを作ってください 少なくとも日曜日と土曜日が判別出来るようにしてください

コピペして再利用しやすいよう、なるべく素直に書いてみました。カレンダーをDOMで作るという作業は結構あると思います。良問ですね。ご自由にお使いください。

CSS

.mcal { border: inset 1px; float:left; font-size:smaller }
.mcal td,th { width: 2em; text-align:right }
.ycal  { border: dotted 1px; font-size:smaller }
.ycal td,th { width: 2em; text-align:right }
.sun { background-color:#ffcccc }
.sat { background-color:#ccccff }

JS

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_yearly(year){
  var cal = make_cal_array(year);
  var tbody = document.createElement('tbody');
  for (var m = 0; m < 12; m++){
    var tr = document.createElement('tr');
    var th = document.createElement('th');
    th.innerHTML = m + 1;
    tr.appendChild(th);
    for (var d = 0, l = cal[m].length; d < l; d++){
      var td = document.createElement('td');
      if (cal[m][d]){
        td.innerHTML = cal[m][d];
        td.className = daynames[d % 7];
      }
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
  var table = document.createElement('table');
  table.className = 'ycal';
  var caption = document.createElement('caption');
  caption.innerHTML = year;
  table.appendChild(caption);
  table.appendChild(tbody);
  return table;
}

function make_cal_monthly(year, m){
  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];
    }
    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);
   }
  };
}

Enjoy!

Dan the JavaScripter