日付を取得して予定表の当月を表示したい。[javascript]

ハマってしまった。
朝から夕方まで。

あるサイトのデザインを進めているのが、その中で、イベントカレンダーを表示するページがある。
一応、一貫性のあるデザインなので、カレンダー部分（実際には予定表レベル）にネット上のサービスなどは使いたく無い。
デザイン段階で、想定通りのことが実装できるのか、どうかという検証が必要になる。
今回の案件は、コーディングまでやることになっているから、尚更、検証しておかないと、、というわけだ。

やりたいことは、こうだ。

ページを開いたときに、当月（今なら3月）の予定が表示される。
ページ上部に1月〜12月までのタブがあり、クリックで他の月に移動できる。
但し、ファイルは移動しない。（1ファイル内に1年分の予定を記述しておく）
カレンダーとはいえ、表示形態は、カレンダーのように月曜から日曜と日付が並んでいるものでなく、シンプルな行事予定表。日付、会場、軽いコメントが載る、いわゆるシンプルなtable組。

とまあ、それほど難しことをやるわけではない。

ボクは、script関係は、よくわかってはいない。
有り物を少しいじって、簡単にカスタマイズするくらいのレベル。
一から書こうなんて、到底そんなレベルではない。

今回もサンプルになりそうなものを探したが、やりたいことを網羅できるものが見つからなかった。
というわけで、今回は、ある程度、最初から書くことにしてみた。

まず。タブのボタンによる、予定表の切替。
これは、大した問題でもなかった。いつも使うモノを少しいじれば、実装できた。
[display: none;]による、表示/非表示の切替レベルで行ける。

ただ、これも本当は、もっとシンプルな書き方があるのだろう。
恥ずかしい話、12ヵ月分あるので、ダーッと長ったるいソースになってしまったw
が、まあ、検証レベルなので、良しとした。実装する際は、もう少し勉強してまとめてみたい。

で、問題は、「ページを開いた際に当月を表示する」というところだ。
例えば、今月3月なら、3月の予定表が表示されている状態。5月なら5月の予定が表示されるというもの。

恐らく、それほど腕に覚えがある人でなくとも、コレくらいのものは、何をどうやれば、ということ位はわかっているものなのだろう。残念ながら、ボクのレベルでは、何をどうすれば良いのかわからないレベル。

まず、何をしなければ行けないのか。
どうやら、日付を取得しなければならないようだ。
解らないながらも、ググってみると、それなりにそんな感じがした。

で、どうすれば良いのか調べてみると「new Date()」たるものを使うらしい。
ここら辺のサイトを参考にさせていただいた。

『日曜うぇぶ倶楽部/javascript』
http://sunday-webclub.jp/sat/sat_2.html

『人気ホームページ制作法/日付や時間で表示を変える方法』
http://ninkiweb.net/shokyu/date.html

とりあえず、日付を取得する方法は、わかった。
実際に例えば、「2010年3月3日16時28分」みたいな感じで表示することができた。

でだ。
日付に関する情報の取得は、わかった。
では、それを利用して、3月であれば、3月の予定表を表示するには？

恐らく、[display: none;]にしているものを[display: block;]にする方法があれば良いのでは？
ということで、先ほどのタブによる予定表の切替につかったソースを流用してみた。
言葉で説明するならこうだ。

もしも、今が3月ならば
3月の予定を記載している部分をソースのidに対して、
スタイルが現在[display: none;]となっているものにを[display: block;]にしてあげる

これができれば、思うことが完成するんじゃ？

ということで、先ほどのタブで使った、「document.getElementById(“m03″).style.display=”block”;」を流用してみた。

もしも(今月== 3 )ならば{
こう書きなさい.idが(“m03″)というものの.スタイルを.display=”block”;と
}　でなくて、もしも (今月== 4 )ならば{
こう書きなさい.idが(“m04″)というものの.スタイルを.display=”block”;と
} 　でなくて、もしも (・・・・・・

というような感じで書いてみると、、、、ビンゴ！表示されました！
が、おかしなことに2月が表示されている。。。。

上記の参考にさせていただいたサイトをよく見ると、

today_year = today.getFullYear();
today_month = today.getMonth()+1;
today_date = today.getDate();
today_hour = today.getHours();
today_minute = today.getMinutes();
today_second = today.getSeconds();
//getMonthは0〜11を返すので注意しましょう。(1月は0、...12月は11になります)

ということで「today.getMonth()」に対して「+1」の記述がされていた。
このとおりに修正してみると、きちんと現在の月=3月が表示された。

実に単純な内容であったが、これは勉強になった。
少しだが、構造の考え方みたいなものが少しわかったような気がした。

この業界の仕事は、「何ができて、何ができない」「できるけど、ここに注意が必要」などなど、そういったことが付きものであるので、もっともっと追求する必要がある。

色々カジってみるのが好きなのだが、少し進歩したような。
ActionScriptとかも、参考書読んでたりしたが、実作業レベルでは、まだまだだったり。
でも、今回の件では少し役に立ったりした。少し似ていたので。

ここのところ、ルーチン的な仕事が多かったため、困りながらも新鮮な感じで、仕事に取り組んだ。
やはり、わからないことを吸収していくのは、おもしろい。

ちなみに。

今日、ボクが書いたソースは、公開しない。
万が一、億万が一、ここのページに来て、汚いソースを参考にされたら、困るので。

サイトのオープンまでにもう少し勉強して、できれば公開したい。