≪ 注文管理からのメール（お客様名）不具合の修正 | TOP | 会員登録完了メールのヘッダ不具合修正 ≫
2006年10月23日
月送り可能なカレンダーを実装しました。
リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。
ただエントリーを元にしたカレンダーですので記載の無い月は表示されません。
（当然未来のカレンダーも）
１．下記３つのスクリプトをダウンロードします。
prototype.js
ajaxCalendar.js
dayChecker.js
２．ajaxCalendar.js をエディタで開き、1行目の
var url = "http://yourDomain/";
の赤色部分に、ご自身のブログURLを設定してください。
３．カレンダーテンプレートの作成
管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。
テンプレート名：カレンダー（名称は何でもOKです）
このテンプレートにリンクするファイル：（設定不要）
テンプレートの内容：下記タグ
<div class="module-calendar module">
<h2 class="module-header">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$>
<MTArchiveDate format="calendar/%Y/%m/%i">');">＜
</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$><MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$>
<MTArchiveDate format="calendar/%Y/%m/%i">');" >＞
</a>
</MTArchiveNext></h2>
<div class="calendar">
<table summary="<MTArchiveDate format="%Y/%m">">
<tr height="15">
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wen</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>
設定が終わったら「保存」をクリックしてください。
４．カレンダーテンプレートを月別アーカイブに関連付け
管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成」をクリックして下記の設定を実施してください（バージョン 3.3 以降の場合、右上にある「詳細モードに切り替え」のリンクをクリックすることで「公開」というメニューが表示されます）。
「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、「テンプレート名（ここでは"カレンダー"）」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「出力フォーマット」に下記を設定してください。
出力フォーマット：
calendar/%y/%m/%i
設定後、ページ下にある「変更を保存」をクリックしてください。
※「アーカイブ種類」欄の「日別アーカイブ」をチェックして保存してください。
５．外部ファイルのインクルード
カレンダーを表示させるテンプレートの<head>～<head>の間に下記を追加します。
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>
６．カレンダー表示部分の設定
カレンダーを表示させたい位置に下記を追加します。
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogURL$><MTEntries lastn="1" sord_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>
７．cssの修正
.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;
}
トラックバック
このエントリーのトラックバックURL:
http://open.free-creator.com/mt-tb.cgi/144