カレンダー
簡単なカレンダーを実装する方法をご紹介します。
なお、祝日の表記等はありませんのでご注意ください。
デモ
関数定義
JavaScript
/**
* カレンダーを生成
* @param {number} [year] カレンダーとして表示する年(指定しなかった場合は現在の年が設定される)
* @param {number} [month] カレンダーとして表示する月(指定しなかった場合は現在の月が設定される)
* @param {number} [day] 日付部分にマークする日(指定しなかった場合は現在の月が設定される)
* @return {Element} 生成されたカレンダーのtable要素を返す。
*/
var createCalendar = function(year, month, day) {
var tableElem = document.createElement('table'),
theadElem = tableElem.createTHead(),
tbodyElem = tableElem.createTBody();
var dateObj = new Date();
if (typeof year === 'undefined') year = dateObj.getFullYear();
if (typeof month === 'undefined') month = dateObj.getMonth() + 1;
if (typeof day === 'undefined') day = dateObj.getDate();
var week = ['日', '月', '火', '水', '木', '金', '土'],
lastDay = (new Date(year, month, 0)).getDate(),
toDate = dateObj.getFullYear() + ('0' + (dateObj.getMonth() + 1)).slice(-2) + ('0' + dateObj.getDate()).slice(-2),
trElem, cellElem, n, i, len;
// 年月を追加
var capElem = tableElem.createCaption();
capElem.appendChild(document.createTextNode(year + '年' + month + '月'));
// 曜日セルの追加
trElem = theadElem.insertRow();
week.forEach(function(val) {
cellElem = document.createElement('th');
cellElem.appendChild(document.createTextNode(val));
trElem.appendChild(cellElem);
});
// 日付セルを追加
for (n = 1; n <= lastDay; n++) {
dateObj = new Date(year, month - 1, n);
// 行を追加
if (n === 1 || dateObj.getDay() === 0) trElem = tbodyElem.insertRow();
// 最初のセルを埋める
if (n === 1 && dateObj.getDay() > 0) {
for (i = 0; i < 7 - (7 - dateObj.getDay()); i++) {
cellElem = trElem.insertCell(-1);
cellElem.appendChild(document.createTextNode('-'));
}
}
cellElem = trElem.insertCell(-1);
if (toDate === year + ('0' + month).slice(-2) + ('0' + n).slice(-2)) {
cellElem.className = 'today';
}
cellElem.appendChild(document.createTextNode(n));
}
// 最後のセルを埋める
if (dateObj.getDay() < 6) {
for (i = 0; i < 6 - dateObj.getDay(); i++) {
cellElem = trElem.insertCell(-1);
cellElem.appendChild(document.createTextNode('-'));
}
}
// 最後の空白行を追加(日付の行を6行に揃える)
var rowCount = tableElem.rows.length;
if (rowCount < 7) {
for (n = rowCount; n < 7; n++) {
trElem = tbodyElem.insertRow();
for (i = 0; i < 7; i++) {
cellElem = trElem.insertCell(-1);
cellElem.appendChild(document.createTextNode('-'));
}
}
}
return tableElem;
};
使い方
JavaScript
// 現在の月のカレンダー
var calendarElem = createCalendar();
// 指定の年月のカレンダーを表示する場合
var calendarElem = createCalendar(2011, 5);
document.body.appendChild(calendarElem);
このサンプルコードでは、1つの関数として定義し、それを使いまわせるようにしています。
引数を指定することにより、指定した年月のカレンダーを表示することができます。
現在の日付を示すクラス名todayをtd要素に55行目で付与しています。
関数はtable要素を返すので、返ってきたtable要素を出力したい要素に挿入することでカレンダーが表示されます。