小粋空間: 月送りカレンダー（簡易版・横型・休日表示付き）

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

2006年9月22日

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

Posted at September 22,2006 1:39 AM
Category：[カレンダー]
Tag：[Calendar, Customize, MovableType]

月別アーカイブページに表示された横型カレンダーに月送り用のリンクをつけるカスタマイズです。
このカスタマイズは「月送りカレンダー（簡易版・休日表示付き）」を横型用にアレンジしたものです。ご利用に際しては「月送りカレンダー（簡易版）」も併せてご覧ください。

注：本カスタマイズは日付アーカイブテンプレートのみが対象です。

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

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

download

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

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

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

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

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

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

日付アーカイブテンプレート編集画面を開き、横型カレンダーを表示したい部分に下記のカレンダー表示用タグを追加してください。

<div id="calendar" title="<$MTArchiveDate format="%Y/%m"$>">
<span class="calendarHead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">&#65308;</a> </MTArchivePrevious><$MTArchiveDate format="%B %Y" language="en"$><MTArchiveNext> <a href="<$MTArchiveLink$>">&#65310;</a></MTArchiveNext> |
</span>
<MTCalendar month="this">
<MTCalendarIfEntries><span><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><span><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>
</div> 
 
<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var element = document.getElementById("calendar");
    var title = element.getAttribute("title");
    var year = title.split("/")[0];
    var month = title.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].getAttribute('class') == 'calendarHead' ||
            spans[i].getAttribute('className') == 'calendarHead')) {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (isHoliday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tholiday');
                    spans[i].setAttribute('className', 'tholiday');
                } else {
                    spans[i].setAttribute('class', 'holiday');
                    spans[i].setAttribute('className', 'holiday');
                }
            } else if(isSaturday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tsaturday');
                    spans[i].setAttribute('className', 'tsaturday');
                } else {
                    spans[i].setAttribute('class', 'saturday');
                    spans[i].setAttribute('className', 'saturday');
                }
            } else if (isToday(year, month, day)) {
                spans[i].setAttribute('class', 'today');
                spans[i].setAttribute('className', 'today');
            }
        }
    }
}
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

参考までに、タイトルバナー下に上記リストを挿入する場合の設定位置を示します。

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

　　　　　　：
<div id="banner">
   <div id="banner-inner" class="pkg">
      <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
      <h2 id="banner-description"><$MTBlogDescription$></h2>
   </div>
</div>
 
---- ここに設定 -----
 
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
　　　　　　：

公開テンプレートの場合

　　　　　　：
<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>
 
---- ここに設定 -----
 
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　　　：

５．CSS修正

下記のCSSを styles-site.css に追加してください。
ここでは公開テンプレートに設定する場合のスタイルを示しますが、デフォルトテンプレートでも適用可能です。

#calendar { 
    margin-top: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #666699;
    font-size:10px;
    text-align: center; 
} 
.calendarHead { 
    color:#444444; 
    padding-right: 5px;
} 
.today { 
    display: inline;
    padding: 0 1px;
    border : 1px solid #444444; 
} 
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}
.tholiday {
    border: 1px solid #444444;
    color: #e50003;
}
.tholiday a:link,
.tholiday a:visited {
    color: #e50003;
}
.tsaturday {
    border: 1px solid #444444;
    color: #0000ff;
}
.tsaturday a:link,
.tsaturday a:visited {
    color: #0000ff;
}

デフォルトテンプレートの場合は赤色部分を削除するといい具合になります。

#calendar { 
    margin-top: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #666699;
    font-size:10px;
    text-align: center; 
} 
　　　　　　：

公開テンプレートご利用の方は、styles-site.css に設定されている下記の設定を削除してください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    text-align: center;
    color: #444444;
    background: none;
}
.calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
.holiday {
    color: #e50003;
}
.saturday {
    color: blue;
}

Posted by yujiro このページの先頭に戻る

« Flash カレンダープラグインバージョンアップ | Main | ウェブ2.0は夢か現実か？ »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ 月送りカレンダー（簡易版・横型・休日表示付き） from 3.2から始めるMovable Type
　一つ前のエントリー「横型月送りカレンダー」では、月別アーカイブを表示させた時に... [続きを読む]

Tracked on September 22, 2006 8:01 AM

　yujiroさん、早速のエントリー有り難うございました。拙「オモシロ広告（http://koukoku.michiko-oota.com/）」に試用してみました。メイン、カテゴリーのテンプレートでは通常版月送り・横型を使い、日別アーカイブのみ、簡易版に差し替えました。
　月別アーカイブではカレンダーと連動してコンテンツ部分も変化してくれて思い通りの動き方をしてくれるので嬉しいです。有り難うございました。

[1] Posted by 路子 : September 22, 2006 7:45 AM

＞路子さん
こんばんは。
ご連絡ありがとうございました。
無事に設定できたようでよかったです。
ではでは！

[2] Posted by yujiro : September 22, 2006 10:14 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

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

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

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

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

小粋空間 - a cheap joke and a play on words site