カレンダーの表を作る際、曜日の指定が面倒でしたのでjQueryでカレンダーを作成してみました。
jQueryは、Google Hosted Libraries の バージョン1.11.1 を使用。★バージョン2.1.1でも動作確認。
スクリプトとサンプル
日付と曜日を出す場合
$(function() {
var today = new Date();
var myYear = today.getFullYear();
var myMonth = today.getMonth();
var lastday = new Date(myYear, myMonth+1, 0);
lastday = lastday.getDate();
var wak = "";
for (var i=1 ; i<=lastday ; i++){
xday = new Date(myYear, myMonth, i);
xdays = xday.getDay();
weekjp = new Array("日","月","火","水","木","金","土");
weeks = weekjp[xdays];
wak += "<tr>\n";
wak += "<th>"+weeks+"</th>\n";
wak += "<td align='center'>"+i+"</td>\n<td></td>\n";
wak += "</tr>\n";
}
$("#listbox").append(wak);
});
日付と曜日とコメントを出す場合
配列からコメント項目を読み込ませてみました。
無駄に長くなっている気がします・・・。
$(function() {
var ary =[
["1","1日です"],
["4","4日です"],
["9","9日です"],
["15","15日です"],
["27","27日です"]
]
var today = new Date();
var myYear = today.getFullYear();
var myMonth = today.getMonth();
var tuki = myMonth +1+"月のカレンダー";
var lastday = new Date(myYear, myMonth+1, 0);
lastday = lastday.getDate();
var topics = new Array();
for (i = 0; i <= lastday; i++) {
topics[i] = "";
}
for (i = 0; i < ary.length; i++) {
topics[ary[i][0]] = ary[i][1];
}
var wak = "";
for (var i=1 ; i<=lastday ; i++){
xday = new Date(myYear, myMonth, i);
xdays = xday.getDay();
weekjp = new Array("日","月","火","水","木","金","土");
weeks = weekjp[xdays];
wak += "<tr>\n";
wak += "<th>"+weeks+"</th>\n";
wak += "<td align='center'>"+i+"</td>\n";
wak += "<td>"+topics[i]+"</td>\n";
wak += "</tr>\n";
}
$("#listbox2").append(wak);
$("#tuki").append(tuki);
});
PHP で作成した場合
ついでにPHPで縦型カレンダーを作成してみました。
一手間必要 ですが、WordPress等に組込んで投稿名を表示させても良いですね。
<?php
$year = date('Y');
$month = date('m');
$last_day = date("j", mktime(0, 0, 0, $month + 1, 0, $year));
echo "<table class='schedule'><tr><th>曜日</th><th>日付</th><th>詳細</th></tr>";
for ($i = 1; $i < $last_day + 1; $i++){
$week = date("w", mktime(0, 0, 0, $month, $i, $year));
$weekjp_array = array('日', '月', '火', '水', '木', '金', '土');
$weekjp = $weekjp_array[$week];
echo "<tr>\n<th>".$weekjp."</th><td align='center'>".$i."</td>\n<td></td>\n</tr>\n";
}
echo "</table>\n";
?>