ミニカレンダーを置くためのjavascriptを書いてみた

指定日をハイライトできることと、ページ内に複数のカレンダー（ハイライト日を別に持つ）を置けるところが特徴といえば特徴。でも基本的に何の変哲もないです。

• 今回つくった、tcal.jsっていうのをscriptタグで読み込む。
• カレンダーを表示したい場所を、divタグで指定する。id属性も適当に。（例：<div id="cal1"></div>）
• カレンダーの年月表示は別のdivタグ内に入れる仕様なので、これも適当に作る。（例：<div id="cal1_name"></div>）
• 前月に移動するボタン（またはリンク）と、次月に移動するボタン（またはリンク）を置く。これの中身はjavascriptの実行なんだけど、それは下に書くスクリプトに対応させる。
• ページの終わりあたりにscriptタグを入れて、設定内容をスクリプトで書く。または、bodyのロードイベントに同じことを書くと、よりちゃんとした感じ。動きゃどっちでもいいと思うけど。

• //ひとつめのカレンダー
  var c = TCalendar.newobj();
  //祝日（ハイライト日）をこうやって列挙しておく。[年,月,日]。
  c.setHolidays([[2012,12,5], [2013,1,4], [2013,1,6], [2013,1,7], [2013,2,20]]);
  //ハイライト日は、何回かに分けて追加してもOK
  c.setHolidays([[2013,12,5], [2013,12,6]]);
  c.setTitleTarget('cal2_name'); //月名表示する場所をこうやって指定
  c.setContentTarget('cal2'); //カレンダー本体表示する場所を同様に指定
  c.render(); //表示開始
  
  //別カレンダー。別名の変数を使う（ここではd）
  var d = TCalendar.newobj();
  d.setHolidays([[2012,12,6], [2013,1,5], [2013,1,7], [2013,1,8], [2013,2,21]]); //別のハイライト日
  d.setTitleTarget('cal3_name');
  d.setContentTarget('cal3');
  d.render();
  

• c.back() が、ひとつめのカレンダーの「前月ボタン」を押したときの動作内容。c.forward()が次月。もうひとつのカレンダーについても同様。d.back() と d.forward() 。適宜 a href= や onClick= 内に記述する。

↓動作サンプル