こんにちは。今回も引き続き，
Dateオブジェクト
カレンダーを実装する前に，
まず，
- 引数なし→現在の日時
- 文字列→日付を表す文字列としてパースして解釈
- 数値(1つ)→1970年1月1日00:00:00時点からのミリ秒数として解釈
- 数値(2つ以上)→第一引数から順番に，
年， 月， 日， 時， 分， 秒， ミリ秒として解釈
Dateオブジェクトの初期化
new Date(); // 現在日時
new Date('2011/2/28');
new Date(1298818800000);
new Date(2011, 1, 28);
このように，
このDateオブジェクトはgetDate, setDateといった，
なお，
また，
ある月の最終日
カレンダーを書く上で，
といっても，
つまり， new Date(year, month, 0) とすればその月の晦日が取得できます。なお，
カレンダーを書く
さてカレンダーを書く際にもう一つ考えなければいけないのが，
行数は当然7行ですから，
まず，
カレンダーの骨組み
var first = new Date(year, month-1, 1);
var last = new Date(year, month , 0);
var first_day = first.getDay();// 一日の曜日
var last_date = last.getDate();// 晦日の日にち
var skip = true; // 日にちを埋めるかどうかのフラグ
var date = 1;
for (var row = 0; row < 6; row++){
var tr = document.createElement('tr');
for (var col = 0; col < 7; col++) {
if (row === 0 && first_day === col){
skip = false;
}
if (date > last_date) {
skip = true;
}
var td = document.createElement('td');
td.innerHTML = skip ? ' ' : date++;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
空白のセルには をいれています。これは空白のセルが潰れてしまうことを防ぐための応急処置です。
カレンダーの実装
ここまででカレンダーはほぼ出来上がりなので，
見た目についてはもちろんCSSで制御します。captionやth要素などを使って，
カレンダーの装飾
.js_calendar{
font-size:80%;
font-family:"Verdana", sans-serif;
}
.js_calendar td{
border:1px solid #ddd;
text-align:right;
-moz-border-radius:3px;
border-radius:3px;
}
.js_calendar caption{
text-align:left;
}
.js_calendar caption div{
position:relative;
}
.js_calendar caption span{
display:block;
padding:3px;
text-align:center;
}
.js_calendar caption a{
display:inline-block;
position:absolute;
background:#eee;
text-decoration:none;
font-weight:bold;
padding:3px;
top:0px;
-moz-border-radius:4px;
border-radius:4px;
}
.js_calendar caption a:link,
.js_calendar caption a:visited{
color:#666;
}
.js_calendar caption a:hover{
color:#f0f;
}
.js_calendar caption a.next{
right:4px;
}
.js_calendar caption a.prev{
left:4px;
}
.js_calendar td.calendar a{
padding:2px;
display:block;
background:#eee;
text-decoration: none;
color: #333;
}
.js_calendar td.calendar span.blank{
padding:2px;
display:block;
}
.js_calendar th.day0{
color:red;
}
.js_calendar th.day6{
color:blue;
}
.js_calendar td.day0 a{
background:#fdd;
}
.js_calendar td.day6 a{
background:#def;
}
.js_calendar a:hover{
color:#f0f;
}
.js_calendar th{
font-weight:normal;
font-size:90%;
}
