15 October
2005

COREBlog のカレンダー部分を Ajax 化

[coreblog] [javascript]

サイドバーのカレンダー部分を Ajax 化しました。月を表示しているところの左右の <- や -> をクリックすると、カレンダー部分だけが切り替わります。これで実用上見る人に取って便利かどうかというとアレなんですが。


実際にやったこと。

- modules/calendar を編集
1. 変数 move のチェックとそれに伴う　div の出力の制御
最初の

<dtml-unless> .... </dtml-unless>

の後に

<dtml-unless move>
<div id="calendar">
</dtml-unless>

<script type="text/javascript" src="<dtml-var blogurl>/modules/calendar.js"></script>

を挿入。

2. タイトル部分の変更

<div class="sideboxtitle"><dtml-var "getMonthName(calendar_month)">&nbsp;<dtml-var calendar_year></div>

を単に calendar と表示するだけの

<div class="sideboxtitle">calendar</div>

と変更。

3. 月移動用のリンクを作成

<div align="center" class="calendar">
<div align="center">

を

<div align="center" class="calendar">

<table width="100%">
<tr>
<td width="10%" align="right">
<a href="javascript:go_prev(<dtml-var calendar_year>,<dtml-var calendar_month>);">&lt;-</a>
</td>
<td width="80%" align="center">
<a href="<dtml-var blogurl>/monthlist_html?year=<dtml-var calendar_year>&amp;month=<dtml-var calendar_month>"><dtml-var "getMonthName(calendar_month)">&nbsp;<dtml-var calendar_year></a>
</td>
<td width="10%" align="left">
<a href="javascript:go_next(<dtml-var calendar_year>,<dtml-var calendar_month>);">-&gt;</a>
</td>
</tr>
</table>

<div align="center">

に変更。

4. 変数 move のチェックとそれに伴う　/div の出力の制御
最後に

<dtml-unless move>
</div>
</dtml-unless>

を追加。

- modules に calendar.js というDTMLドキュメントを追加
内容はcalendar.jsを見れば大体わかるかと思いますが、 set_calendar() 関数の変数 path は

var path = "<dtml-var blogurl>/modules/calendar?calendar_year="+y+"&calendar_month="+m+"&move=1";

としています。

Posted by setomits at 12:14 | Comments (0) | Trackbacks (0)
Comments
Re: カレンダー部分を Ajax 化

月によって週の数がかわって行数がかわることがあるのでそこのheightを指定したほがキレイですね。

Posted by: おぢさん at October 15,2005 17:19
Re: カレンダー部分を Ajax 化

カレンダーもjavascriptで作ればいいじゃん。と、根本的なことを言ってはダメ？

Posted by: おぢさん at October 15,2005 17:22
Re: カレンダー部分を Ajax 化

> 月によって週の数がかわって行数がかわることがあるので...
なるほど。ということで、カレンダーの始まる table の height を（なんとなく） 140px にしてみました。

> カレンダーもjavascriptで作ればいいじゃん。
それはそれでひとつの手段だけど、元々 calendar module があって、そちらにはあまり手を入れずに済んだので、やっぱこれでよかったかな。今の状態なら、JavaScriptをオフにしている人にもカレンダー表示まではされるけど、そこもJavaScriptにしちゃうと表示されないし。まあ、別にイラネって言われたらそれまでではありますが....。

Posted by: setomits at October 15,2005 21:15
Re: カレンダー部分を Ajax 化

失礼、１行目を引用したら、途中からHTMLのコメントと解釈されたみたい。
いいたかったのは、以下のとおり。
------
そんなことができるんだ。知らなかった。
13へぇ～。
スクロールしないと見られない領域の一部更新には便利でしょう。
ただ、来年１月になったら、今年１２月のカレンダーは見られないですよね。
そっちの対応のほうが優先順位が上では？

Posted by: ともさん at October 16,2005 01:10
Re: カレンダー部分を Ajax 化

> ともさん
最初のコメントの方は削除しておきました。

で、年をまたげないのはバグでした。
calendar.js(JavaScript) 内の関数である、go_prev(), go_next() にて、それぞれ12月の場合と1月の場合は他の月とは違う処理をしていたのですが、ここでありもしない変数を触って



function go_prev(y, m) {

 if (m == 1) {

  y = cur_y - 1;

  m = 12;

 } else {

  m = m - 1;

 }

 

 set_calendar(String(y), String(m));

}

としていたのでした。
てことで、どちらも cur_y を y と修正しました。

Posted by: setomits at October 16,2005 08:31
Re: カレンダー部分を Ajax 化

いやあ賞味の話
これは便利ですよ。
毎日来ない人間にとっては。
RSSでチェックしてないし。

少なくとも僕にとってはありがたい機能です。
３９でした。

Posted by: Taku at October 19,2005 12:02
Re: カレンダー部分を Ajax 化

いやあ、便利がってもらえるとうれしいです。
Takuくんからリクエストがあった、Takuくんのための機能だからね。

Posted by: setomits at October 19,2005 20:17
Trackbacks
Please send trackback to:http://matatabi.homeip.net/blog/setomits/482/tbping
当ブログへのリンクを含まないトラックバックは削除します。
If no reference exists, that trackback will not be received.
There are no trackbacks.
Post a comment

Powered by COREBlog