月送りカレンダー(簡易版)

月送りカレンダー(簡易版)

Posted at December 6,2005 11:58 PM
Tag:[Calendar, Customize, MovableType]

月送りカレンダー(簡易版)月別アーカイブページに表示されたカレンダーに、簡単に月送り用のリンクをつけるカスタマイズです。

通常の1ヶ月カレンダーは月送りができないため、過去に作った日別アーカイブへのリンクがなくなってしまうという欠点があり、月送りカレンダーが急速に普及したという経緯があります。ですが、月送りカレンダーは専用のアーカイブテンプレートを作ったり、表示のために iframe 要素を使用したりと、やや複雑なカスタマイズになるというのが難点でした。

このカスタマイズではそのような手間はいらず、下にあるリストを貼り付ければ通常のカレンダーが月送りカレンダーに早代わりします。また Serena Bach(sb) のように、前月または次月のリンクをクリックするとページ全体も切り替わるのが利点です。

ただし月送りになるのは月別アーカイブページのみです(利用可能なアーカイブが限定されているので「簡易版」と命名しました)。メインページやカテゴリー・アーカイブ、エントリー・アーカイブは1ヶ月表示のままです。
簡易版といっても、カレンダーの切り替えが必要なのは基本的に月別アーカイブなので、個人的にはお勧めのカスタマイズです。

ひとつだけ注意事項がありまして、日付アーカイブテンプレートは他の日別アーカイブページ・週別アーカイブページと兼用になっていますが、このカスタマイズを行うと、これらのアーカイブのカレンダーにも同様のリンクが設定されることになります。ただし日別アーカイブではこのリンクが昨日(または明日)、週別アーカイブでは先週(または次週)のリンクになり、見栄えとしてはやや妙なものになります。

このため、カスタマイズ前の日別アーカイブテンプレートを丸ごとコピーした、新しい日付アーカイブテンプレートを作り、日別アーカイブ(または週別アーカイブ)はこのテンプレートと関連づけることをお勧めします(やっぱり面倒!というツッコミはなしで)。
新しくアーカイブテンプレートを作る方法は、このエントリーでは割愛しますので、アーカイブテンプレート作成方法を参照ください。

以下、カスタマイズ方法です。

1.テンプレートを修正する

管理画面から「テンプレート」→「アーカイブ」をクリックして「日付アーカイブ」を選択します。カレンダーを表示したい位置に下記のリストを挿入します。デフォルトテンプレートは1カラムのため、ここでは公開テンプレートを例にしています。本日の日付を表示するリアルタイムカレンダーも組み込んでます。
デフォルトテンプレートの場合は、事前に2カラムまたは3カラムへの変更を行ってください。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%B %Y"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">«</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">»</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span class="calendar"></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries sort_order="ascend">
<MTDateHeader><a href="<$MTEntryPermalink archive_type="Daily"$>" title="</MTDateHeader><$MTEntryTitle$><MTDateFooter>" target="_top"><$MTCalendarDay$></a><MTElse> / </MTElse></MTDateFooter>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
</MTIfArchiveTypeEnabled>
<!-- カレンダー終了 -->
 
<script type="text/javascript">
<!--
data = new Date();
year = data.getYear();
year = (year < 2000) ? year + 1900 : year;
month = data.getMonth() + 1;
date = data.getDate();
table = document.getElementById('calendarTable');
flag = 0;
summary = table.getAttribute('summary');
text = year + '年' + month + '月';
if (summary.indexOf(text) != -1) {
    elements = table.getElementsByTagName('span');
    for(k = 0; k < elements.length; k++) {
        if (elements[k].childNodes){
            if((elements[k].childNodes)[0].nodeName == 'A') {
                if((elements[k].childNodes)[0].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            } else {
                if (elements[k].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            }
        }
    }
}
//-->
</script>

設定したら保存・再構築してください。

2.通常カレンダーとの相違点

JavaScript を除いて、1ヶ月表示のカレンダーとの違いは、下記で示す部分です。削除または変更前を赤色で、追加または変更後を青色で示しています。

具体的には、2ヶ所ある MTDate タグを MTCalendarDate に変更し、MTCalendar に month 属性で this(今月)を付与します。あとは前月と次月のリンクを追加しています。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTDate$MTCalendarDate format="%B %Y"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">«</a> </MTArchivePrevious>
<$MTDate$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">»</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar month="this">
                :

3.日別アーカイブのカレンダーについて

冒頭で説明した通り、日別アーカイブはカスタマイズ前の日付アーカイブテンプレートを利用されていることが前提ですが、日別アーカイブも同じカレンダーを利用し、不要な前月および次月のリンク(<MTArchivePrevious>~</MTArchivePrevious> と <MTArchiveNext>~<MTArchiveNext>)を削除することで、ページに表示されている日と同じ月が表示されるようになります。

関連記事
トラックバックURL


トラックバック

ちょこっとだけ修正 from dotabata.net
今日はちょこっとだけ修正しました。 何を修正したかはよーく見ないとわからないので... [続きを読む]

Tracked on December 12, 2005 10:20 PM

ダイナミックで月送りカレンダー from WingMemo
こちらでカレンダーを追加してみましたが、これだとどの月のアーカイブでも最新のカレ... [続きを読む]

Tracked on January 6, 2006 2:45 PM

月送りカレンダー簡易版 from 3.2から始めるMovable Type
 月送りカレンダーをブログにつけたいという希望があって、アーカイブのテンプレート... [続きを読む]

Tracked on September 14, 2006 6:25 AM
コメント

はじめまして。
ダイナミックパブリッシングでMTを動かしている者です。
こちらにはMTのカスタマイズ方法が多数紹介されており、いろいろ参考にさせてもらっています。

11月には11月の、12月には12月のカレンダーを表示させたいと思っていたのですが、ダイナミックパブリッシングではカレンダーが正常に生成されないためこの方法が使えず、いろいろ考えて、月移動カレンダーの作り方と組み合わせて使わせていただきました。
iframeで動的頁から静的生成したカレンダーを読み込んでいるのですが、その際、呼び出すタグを
<MTDate format="○○">
ではなくて
<$MTArchiveDate format="○○"$>
にしたところ、ダイナミックでも希望通り11月には11月の、12月には12月のカレンダーを表示させることができるようになりました。まるでsbみたいな使い心地で満足しています。ありがとうございました。

なお、カテゴリー頁やメインインデックスなど、月に関係のない頁では、<iframe>?</iframe>の外側を
<MTArchiveList archive_type="Monthly" lastn="1">?</MTArchiveList>
で囲むと、常に最新のカレンダーが表示されるようになります。この方法なら月を越えてエントリーが1つもない状態で再構築が行われてもNot Foundにはならないです(実際に確かめてみました)。何かの参考にでもなれば幸いです。

それではこれからもサイト運営、頑張って下さい。

[1] Posted by TAEKO : January 6, 2006 3:53 PM

>TAEKOさん
はじめまして。
記事参照&トラックバックありがとうございます。
またアイデア提供も併せてありがとうございます。大変参考になりました!

それでは今後ともどうぞよろしくお願い致します。

[2] Posted by yujiro : January 7, 2006 2:41 AM

 yujiroさん、いつもお世話になって居ます。日付アーカイブで簡易版月送りカレンダーを使わせていただきました。
 おかげさまで月別アーカイブはアーカイブの月のカレンダーが表示されますし、月の移動もスムースになり、以前より便利になったと喜んでいます。
 ただ休日対応のさせ方が分かりません。同じように日付アーカイブのテンプレートには他のテンプレートと同じ場所に<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>を入れてますが、それだけではダメみたいです。
 もしも休日表示が出来る方法があれば教えて下さい。

[3] Posted by 路子 : September 9, 2006 5:15 PM

>路子さん
こんばんは。
ご質問の件ですが、table タグの部分を

<table summary="<$MTDate format="%Y/%m"$>">

に変更して、このエントリーで記載されている1項の

<script ?>
    :
</script>

の部分を「休日表示付リアルタイムカレンダー for Movable Type」の5項の内容と入れ替えてみてください。
実際に試していませんので動作しないようでしたらお手数ですが再度ご連絡ください。
それではよろしくお願い致します。

[4] Posted by yujiro : September 10, 2006 10:26 PM

 yujiroさん、お忙しいところ早速のご回答有り難うございます。ご指示のように入れ替えたところ、日付及び月別のアーカイブのカレンダーがカラフルに変わって一瞬だけ喜びました。
 でも、2006年9月のカレンダーに関しては正常なのですが、それ以外は休日表示が違っています。日曜日が赤文字じゃなくて、休日、祝日以外の箇所に赤い文字がいっぱいになっています。どうやらどの月にも曜日に関係なく2006年9月の日付の祝日、休日が対応されて文字色が設定されているようにも思います。
 

[5] Posted by 路子 : September 11, 2006 7:13 AM

>路子さん
こんばんは。
失礼致しました。

<table summary="<$MTCalendarDate format="%Y/%m"$>">

に修正してください(MTDate では常に現在の月が表示されてしまいます)。
それではよろしくお願い致します。

[6] Posted by yujiro : September 11, 2006 10:16 PM

 yujiroさん、有り難うございます。ご指示のように修正しましたら、休日表示は修正されましたが、今月以外の休日はやっぱり表示されなくなりました。日付アーカイブのテンプレートにはdayChecker.jsの設定もしてあるのですけど。お時間のゆとりのある時に見ていただければ結構ですので、宜しくお願いします。
 

[7] Posted by 路子 : September 12, 2006 8:56 AM

>路子さん
こんにちは。
考慮不足ですいません。
下記の青色部分を追加してみてください。

<script type="text/javascript">
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

なお、簡易版+休日表示については改めてエントリーしたいと思います。
それではよろしくお願い致します。

[8] Posted by yujiro : September 13, 2006 9:49 AM

 yujiroさん、有り難うございます。思い通りに表示されました。理想の月別アーカイブが出来ました。ホントに有り難うございます。

[9] Posted by 路子 : September 13, 2006 11:19 AM

>路子さん
こんにちは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは!

[10] Posted by yujiro : September 14, 2006 10:11 AM

簡易カレンダーはTypePadで使用することが可能でしょうか?
念のため、試してみたのですがエラーが出てしまったので、何かMovableType用から修正しなければならないのかなぁと思っています。
よろしくお願いします。

[11] Posted by kana : September 14, 2006 10:50 AM

>kanaさん
こんにちは。
TypePadに加入していないので適切な回答をすることはできませんが、TypePadでサポートされているタグだけを使っているのであれば適用は可能と思われます。
通常のカレンダーとの差分は2項に記述しておりますので、問題となるタグをみつけるための切り分け方法として、一旦元にタグに戻して再構築してみてはいかがでしょうか(通常のカレンダーが正常に再構築できることが前提ですが)。
それではよろしくお願い致します。

[12] Posted by yujiro : September 15, 2006 12:49 PM

>yujiroさん
お返事ありがとうございます。

TypePadでサポートされているタグだけを使用し、元のTypePadのカレンダーは正常に再構築できていました。
こちらのサイトに書かれていた「「<MTIfArchiveTypeEnabledgt; 」をTypePadのテンプレートタグ「「<MTBlogIfArchivesgt;」に変更し、コピー&ペーストしました。
再構築できましたが、ブラウザで見るとカレンダーは表示されず、ソースにはjavascriptは書かれていましたがテンプレートタグで書いた部分は表示されていませんでした。

「<MTIfArchiveTypeEnabled>部分をそのままに再構築するとエラーが出てしまうので、
これ以上どのように修正すれば良いか分かりません。
なにか、解決方法を教えていただけないでしょうか?

[13] Posted by kana : September 17, 2006 11:35 PM

>kanaさん
こんばんは。
MTIfArchiveTypeEnabledタグを置き換えずに単純に削除した場合はいかがでしょうか?
また日別アーカイブ(1日単位のアーカイブ)は再構築する設定なっていますでしょうか。
ご確認くださいますようお願い致します。

[14] Posted by yujiro : September 19, 2006 2:04 AM

>yujiroさん

お返事ありがとうございます。
下記の方法で試してみましたが、エラーが出てしまいました。
※日別アーカイブのチェック・再構築済みの状態
○<MTIfArchiveTypeEnabled>タグそのままで再構築
○<MTIfArchiveTypeEnabled>タグを削除して再構築

以前は日別アーカイブのチェックを入れていなかったので、カレンダーの記述を追加する前に日別アーカイブの再構築を済ませてあります。

当然かもしれませんが、エラー表示について、TypePadに問い合わせしましたが
個別の対応はできないと断られてしまいます。

なにか解決方法はないでしょうか?

[15] Posted by kana : September 19, 2006 10:47 AM

>kanaさん
こんにちは。
参考までに、エラー内容はどのようなものでしょうか?

[16] Posted by yujiro : September 20, 2006 9:49 AM

>yujiroさん

エラー内容についてなのですが
再構築中(indexやアーカイブなどを再構築中)に
そのウィンドウがTypePadのエラー用ページに切り替わってしまいます。
エラー用ページは、テキストフォームになっていてエラー内容を記入するようになっています。
なので、細かなエラー情報が分かりません。
そんな感じなのです…。

[17] Posted by kana : September 20, 2006 5:01 PM

>yujiroさん

たびたび本当にすみません。
TypePadのデータベースアーカイブの任意の箇所にソースをコピー&ペーストしたところ、
カレンダーは表示されました。
しかしながら、月(September 2006など)は表示されません。
※次月・前月のリンク矢印は表示されています。リンクも動作します。

月を表示させる方法として考えられる解決策はないでしょうか?

[18] Posted by kana : September 22, 2006 7:47 PM

>kanaさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件については、どうも MTCalendarDate タグがデータベースアーカイブ(Movable Type でいうところの日付アーカイブですね)で有効にならないように思われます。

エラーになる部分

<$MTCalendarDate format="%B %Y"$>

<$MTArchiveDate format="%B %Y"$>

に代えるとどうでしょうか。

[19] Posted by yujiro : September 22, 2006 10:42 PM

>yujiroさん
お返事ありがとうございます。

変更しましたが、やはり月が表示されませんでした(涙)。

[20] Posted by kana : September 23, 2006 12:02 PM

>kanaさん
こんばんは。

<$MTArchiveTitle$>

はいかがでしょうか。
ちなみに、TypePad で「利用可能MTタグ一覧」のようなものは公開されていませんでしょうか。

[21] Posted by yujiro : September 24, 2006 1:14 AM

>yujiroさん

<$MTArchiveTitle format="%B %Y" language="en"$>で月を表示させることはできました!
しかし、月の表示が2006年9月をSeptember 2006などに変更することができません。
デフォルトカレンダーで上記formatを指定すると、月表示はSeptember 2006で表示できています。
これが解決できません。

また、MTとTypePadのタグを比較しているサイトがありました。
下記です。
http://watcher.moe-nifty.com/memo/dist/mtTemplateTags.html

さらに、こちらの簡易版カレンダーを応用して
indexテンプレートやカテゴリページにも表示させる方法はあるのでしょうか?

[22] Posted by kana : September 24, 2006 4:30 PM

>kanaさん
こんばんは。
タグ一覧については言葉足らずですいません。「公式の」という意味で質問させて頂きました(ご連絡頂いたサイトは確認済で、その内容通りにタグが振る舞わないようですので)。

月表示が変更できないのはlanguage属性が有効になっていないように思われます。また簡易版月送りカレンダーはデータベースアーカイブ(を月別に適用させた場合)のみ有効で、indexテンプレートやカテゴリーでは通常の月送りカレンダーを使用することになります。いずれもTypePadでの適用については申し訳ありませんがこちらでは確認できません。

それではよろしくお願い致します。

[23] Posted by yujiro : September 25, 2006 1:23 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)