Top ＞ Movable Type ＞ カスタマイズ ＞ カレンダー ＞ 月送りカレンダー（簡易版・休日表示付き）
2006年9月16日

月送りカレンダー（簡易版・休日表示付き）

Posted at September 16,2006 12:10 AM
Category：[カレンダー]
Tag：[, , ]

月別アーカイブページに表示されたカレンダーに、簡単に月送り用のリンクをつけるカスタマイズです。
このカスタマイズは「月送りカレンダー（簡易版）」に休日表示付きリアルタイムカレンダーを付与した改善版です。
またカスタマイズは日付アーカイブテンプレートのみが対象です。

１．休日表示用カレンダースクリプトのダウンロード

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

２．休日表示用カレンダースクリプトのアップロード

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

３．テンプレートの修正１（スクリプトのインクルード）

テンプレートの <head>～</head> の間に下記のタグを追加します。

<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

４．テンプレートの修正２（カレンダー表示タグの設定）

カレンダーを表示したい部分に下記のカレンダー表示用タグを追加してください。

４．１項および４．２項のリストを追加した後、管理画面にある「設定」→「公開」の順にクリックし、次ページの下にある「アーカイブのマッピング」で「日別」の左側にチェックをつけて保存し、再構築してください。これを行わないとカレンダーが表示されませんのでご注意ください。

４．１ デフォルトテンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="module-calendar module">
<h2 class="module-header"><MTArchivePrevious><a href="<$MTArchiveLink$>">&#8810;</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">&#8811;</a></MTArchiveNext></h2>
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%Y/%m"$>">
<tr>
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
<!-- script -->
</MTIfArchiveTypeEnabled>

４．２ 公開テンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%Y/%m"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">&#8810;</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">&#8811;</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
<!-- script -->
</MTIfArchiveTypeEnabled>

５．テンプレートの修正３（スクリプト追加）

休日表示カレンダースクリプトを起動するためのスクリプト

<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var element = document.getElementById("calendarTable");
    var summary = element.getAttribute("summary");
    var year = summary.split("/")[0];
    var month = summary.split("/")[1];
    if(!(year == y && month == m)){
        return;
    }
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
        if (spans[i].parentNode.nodeName == "TD") {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (isHoliday(year, month, day)) {
                spans[i].setAttribute('class', 'holiday');
                spans[i].setAttribute('className', 'holiday');
            } else if(isSaturday(year, month, day)) {
                spans[i].setAttribute('class', 'saturday');
               spans[i].setAttribute('className', 'saturday');
            }
            if (isToday(year, month, day)) {
                spans[i].parentNode.setAttribute('class', 'today');
                spans[i].parentNode.setAttribute('className', 'today');
            }
        }
    }
}
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

を、４．１項または４．２項の赤色で示した

<!-- script -->

の部分に挿入してください（赤色の行は削除してください）。

６．CSS修正

下記のセレクタを styles-site.css に追加してください。

６．１ デフォルトテンプレートの場合

初めてカレンダーをご利用になる場合はすべて追加し、すでにご利用の場合は today / sunday,holiday / saturday のみ追加してください。

.calendar {
    margin: 5px 0;
    text-align: center;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
.calendar table {
    padding: 0;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 9px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

６．２ 公開テンプレートの場合

下記のセレクタを追加してください。

.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

また現在設定されているCSSより、下記の color プロパティ（赤色）を削除してください。これは本日と土日祝日が重複した時に土日祝日の色を優先させるためです。

.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
Posted by yujiro
関連記事
人気エントリー
トラックバックURL


コメント

　新規エントリー有り難うございます。簡易版とはいえ、月別アーカイブに必要な機能は網羅されていると思うのでイチオシだと思います。
　http://koukoku.michiko-oota.com/　には横型の月送りカレンダーを設置しましたが（テストのためにやってみたかっただけなのですけど）、比較すると横型の方はカレンダー側の前月リンクをクリックしてもコンテンツ部分（エントリー部分）は変わりません。「**月｜メイン｜**月」の**月をクリックするとカレンダーは連動してくれるのですけど。こちらも簡易月送り同様、カレンダー側のリンク部分とエントリー群が連動してくれたら・・・と欲張っています。
　ごめんなさい。それに関しては横型月送りカレンダーの方にコメントすべきかも知れませんね。

[1] Posted by 路子 : September 16, 2006 10:58 AM

＞路子さん
こんにちは。
ご質問の件は「簡易版（休日表示付き）の横型」ということですね。
また折をみてエントリーしたいと思います。
ではでは！

[2] Posted by yujiro : September 20, 2006 9:41 AM

　yujiroさん、コメントへの回答ではなく新エントリーでという事ですね。いつも有り難うございます。何だかyujiroさんのお仕事を増やす常習犯のようで申し訳ないです。急いではいませんので、いつでも結構ですが宜しくお願いします。

[3] Posted by 路子 : September 20, 2006 10:39 AM

こんにちは。
こちらのカスタマイズを行いたいと思い、テンプレートを加工したところ、『テンプレート「メインページ」の再構築に失敗しました: <MTIfArchiveTypeEnabled>タグでエラーが発生しました: MTCalendarDateタグには日付コンテキスト設定が必要です。 』と言われてしまいます。
問題があると言われてる部分は『<MTIfArchiveTypeEnabled archive_type="Daily">』となっております。
エラーが出たので一度『archive_type="Daily"』の部分を削除して再構築したので、現在はカレンダーがない状態です。
ＭＴversionは3.33です。
よろしくお願いします。

[4] Posted by Aya : October 2, 2006 1:28 PM

＞Ayaさん
こんにちは。
ご質問の件につきまして、説明不足ですいませんが、このカスタマイズは日付アーカイブテンプレート（厳密には月別アーカイブ）専用です。
メインページにここで紹介しているタグを貼り付けて再構築するとご指摘のエラーが発生します。
誤解を招かないよう、記述を一部修正致しました。
それではよろしくお願い致します。

[5] Posted by yujiro : October 2, 2006 4:31 PM

>yujiro
失礼しました＞＜
元に戻して対処しました＾＾；

[6] Posted by Aya : October 2, 2006 7:21 PM

＞Ayaさん
こんばんは。
ご連絡ありがとうございました。
ではでは！

[7] Posted by yujiro : October 3, 2006 1:04 AM

こんにちわ。
いつも勉強させて頂いております。
ところで、貴殿の現在利用されてます月送り休日表示付きカレンダーは最高と思います。
色々ページを参考にやってますが、うまく行きません。どの順序でやればいいのか、教えて頂けませんでしょうか。
どうぞ宜しくお願い致します。

[8] Posted by 西山雄一郎 : January 16, 2007 11:30 AM

＞西山雄一郎さん
こんばんは。
お褒めの言葉ありがとうございます。光栄です。
ご質問の件ですが、記事はどれもひとつで完結するようにしています。
今のところのお勧めは「Ajax 月送りカレンダー」です。
それではよろしくお願い致します。

[9] Posted by yujiro : January 17, 2007 1:37 AM

ありがとうございました。
ちょっと頑張ってやってみます。

[10] Posted by 西山雄一郎 : January 17, 2007 1:12 PM

こんにちは
いつも勉強させて頂いております。
ところで数日前にMovableType4を導入したのですが、Ajaxの月送りカレンダーの設置の仕方が分かりません。
対応はしてるのでしょうか？
多分、私のやり方が間違ってると思うのですが、初心者向けの設置の仕方をご教授願えませんでしょうか。
宜しくお願い致します。
MT4では本稿の解説とはちょっと違うようですので・・

[11] Posted by 西山雄一郎 : August 15, 2007 12:08 PM

＞西山雄一郎さん
他のエントリーのコメントで回答済ですが、MT4でのAjax月送りカレンダーは「Ajax 月送りカレンダー（MT4版）」を参照願います。
それではよろしくお願い致します。

[12] Posted by yujiro : August 20, 2007 2:42 PM
コメントする

*必須



お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用

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

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

Now loading...
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!