TopMovable Typeカスタマイズカレンダー > 2004年10月
2004年10月 7日

月送りカレンダー状態保持スクリプト

October 7,2004 8:00 PM
Tag:[]
Permalink

左上のカレンダーを月送りに変更しまして、ジャンプ先の日別アーカイブページにも月送りカレンダーを配置しているのですが、クリックするとジャンプ先のカレンダーが今月に戻ってしまうので、いつものようにcookieを利用した状態保持機能を追加しました。
この機能を利用することで、他のページにジャンプしてもカレンダーは常に同じ月を表示します。cookieの生存期間はセッション単位ですのでブラウザを新たに起動した場合は今月が表示されます。
下記の月送りカレンダーを使われていることが前提です。またあまりスッキリしたカスタマイズではございませんが予めご容赦ください。

以下カスタマイズ手順です。

1.JavaScriptファイルの設定
下記を"calendar.js"というファイル名でローカル・サイト・パスに保存してください。念のためblogと同じ文字コードで保存してください。

var name = "blogCalendar";
 
// This function is quoted from Styleswitching JavaScript 
// http://jemimap.freeshell.org/style/scripts.html#styleswitcher
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
 
var yearmonth = readCookie(name);
if (yearmonth) {
    var iframe = this.document.getElementsByTagName('iframe');
    iframe[0].setAttribute("src","archive-URL/calendar/" + yearmonth + "/index.php");
}

archive-URLの部分は、管理画面の「基本設定」で設定した「アーカイブのURL」を設定してください。例えばアーカイブURLが

http://www.koikikukan.com/archives/

であれば上記のスクリプトは

iframe[0].setAttribute("src","http://www.koikikukan.com/archives/calendar/" + yearmonth + "/index.php");

となります。
本当は <$MTBlogURL$>archives/calendar/ という指定ができればいいのですが、calendar.js を外部ファイルにしているためMTタグはURLに変換されません。そういう訳で直接URLを記述します。

2.カレンダーテンプレート修正
まずカレンダーテンプレートの <head>~</head> の間に下記のJavaScriptを追加します。

<script type="text/javascript">
// This function is quoted and reconstructed from Styleswitching JavaScript 
// http://jemimap.freeshell.org/style/scripts.html#styleswitcher
function setMonth(value) {
    var name = "blogCalendar"; 
    expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
    document.location.href = "<$MTBlogURL$>archives/calendar/" + value + "/index.php";
}
</script>

次にカレンダー表示タグの赤色部分を青色部分に置き換えてください。これは先のJavaScriptを起動するための変更です。

<caption class="calendarhead">
<MTArchivePrevious>
<a href="<$MTBlogURL$>archives/calendar/<MTArchiveDate format="%Y/%m/index">.php"><</a>
</MTArchivePrevious>
 
<$MTArchiveDate format="%B %Y"$> 
 
<MTArchiveNext>
<a href="<$MTBlogURL$>archives/calendar/<MTArchiveDate format="%Y/%m/index">.php">></a>
</MTArchiveNext>
</caption>
<caption class="calendarhead">
<MTArchivePrevious>
<a href="#" onclick="setMonth('<MTArchiveDate format="%Y/%m">');return false;">&laquo;</a>
</MTArchivePrevious>
 
<$MTArchiveDate format="%B %Y"$> 
 
<MTArchiveNext>
<a href="#" onclick="setMonth('<MTArchiveDate format="%Y/%m">');return false;">&raquo;</a>
</MTArchiveNext>
</caption>

3.各テンプレートの修正
カレンダーを表示する各テンプレートの、カレンダータグのすぐ下あたり(または</body>の前でもOKと思います)に下記のcalendar.jsを起動するためのタグを追加します。"calendar"のスペルにご注意ください。

<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" ・・・></iframe> 
</div>
 
<script type="text/javascript" src="<$MTBlogURL$>calendar.js"></script>

以上です。ブラウザ表示時の動作順序は、

  • 今月のカレンダーを表示
  • その後すぐにcalendar.jsが起動されてcookieより年月取得
  • 年月が取得できればその年月のカレンダーを表示
  • 年月が取得できなければ何もしない(今月のカレンダーを表示)

です。
またカレンダー切り替え時の動作は、

  • カレンダーの月切り替えリンクをクリックした時にJavaScriptのsetMonthが起動されてcookieに年月保存

となってます。

月送りのリンクマークは"</>"から"«/»"に変更しています(文字コードを指定しているにもかかわらず履歴ボタンを使用した時に文字化けが発生するケースがあったので)。ただし私のサイトでは"</>"で正常に動作しているみたいですので適宜お試しください。
またスタイルシート切り替え用スクリプトで styleswitcher.js を利用されている方はJavaScript関数readCookieを削除されても問題ありません。ただし各テンプレートで calendar.js とペアで設定されていることが前提です。

2004.12.06 追記
calendar.js の配置先を「mt.cgiと同じディレクトリ」から「ローカル・サイト・パス」に変更(私の環境は自宅サーバでどちらも同じディレクトリですが、レンタルサーバユーザさんに誤解を与える記述でしたので修正致しました)。

2004.12.27 追記
「1.JavaScriptファイルの設定」で calendar.js のパス設定の説明を修正致しました。

Comments [59] | Trackbacks [13]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3