ホーム ＞ サンプル ＞ 6.31 Ajax月送りカレンダー ★

6.31 Ajax月送りカレンダー ★

P.524

ajaxCalendar.js
dayChecker.js

●カレンダーテンプレート作成

・テンプレート名：Ajax月送りカレンダー
・テンプレートの内容：次の内容を設定

<mt:ifArchiveTypeEnabled archive_type="Daily">
<table summary="<mt:archiveDate format="%Y/%m">">
<caption class="calendarhead">
<mt:archivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<mt:blogArchiveURL /><mt:archiveDate format="calendar/%Y/%m/%i">');">&#65308;</a>
</mt:archivePrevious>
<mt:archiveDate format="%B %Y" /> 
<mt:archiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<mt:blogArchiveURL /><mt:archiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a>
</mt:archiveNext>
</caption>
<thead>
<tr height="15">
<th abbr="Sunday"><span class="sunday">Sun</span></th>
<th abbr="Monday"><span class="weekday">Mon</span></th>
<th abbr="Tuesday"><span class="weekday">Tue</span></th>
<th abbr="Wednesday"><span class="weekday">Wed</span></th>
<th abbr="Thursday"><span class="weekday">Thu</span></th>
<th abbr="Friday"><span class="weekday">Fri</span></th>
<th abbr="Saturday"><span class="saturday">Sat</span></th>
</tr>
</thead>
<tbody>
<mt:calendar month="this">
<mt:calendarWeekHeader><tr></mt:calendarWeekHeader>
<td><mt:calendarIfBlank><mt:else><span class="day"></mt:calendarIfBlank><mt:calendarIfEntries>
<mt:entries lastn="1"><a href="<mt:entryLink archive_type="Daily" />"><mt:calendarDay /></a></mt:entries>
</mt:calendarIfEntries><mt:calendarIfNoEntries><mt:calendarDay /></mt:calendarIfNoEntries><mt:calendarIfBlank>
<mt:else></span></mt:calendarIfBlank></td><mt:calendarWeekFooter></tr></mt:calendarWeekFooter></mt:calendar>
</tbody>
</table>
</mt:ifArchiveTypeEnabled>

P.525

デフォルトテンプレートの場合は、次の内容を設定してください。

<mt:ifArchiveTypeEnabled archive_type="Daily">
<h3 class="widget-header">
<mt:archivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<mt:blogArchiveURL /><mt:archiveDate format="calendar/%Y/%m/%i">');">&#65308;</a>
</mt:archivePrevious>
<mt:archiveDate format="%B %Y" /> 
<mt:archiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<mt:blogArchiveURL /><mt:archiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a>
</mt:archiveNext>
</h3>
<div class="widget-content" >
<table summary="<mt:archiveDate format="%Y/%m">">
<thead>
<tr height="15">
<th abbr="Sunday"><span class="sunday">Sun</span></th>
<th abbr="Monday"><span class="weekday">Mon</span></th>
<th abbr="Tuesday"><span class="weekday">Tue</span></th>
<th abbr="Wednesday"><span class="weekday">Wed</span></th>
<th abbr="Thursday"><span class="weekday">Thu</span></th>
<th abbr="Friday"><span class="weekday">Fri</span></th>
<th abbr="Saturday"><span class="saturday">Sat</span></th>
</tr>
</thead>
<tbody>
<mt:calendar month="this">
<mt:calendarWeekHeader><tr></mt:calendarWeekHeader>
<td><mt:calendarIfBlank><mt:else><span class="day"></mt:calendarIfBlank><mt:calendarIfEntries>
<mt:entries lastn="1"><a href="<mt:entryLink archive_type="Daily" />"><mt:calendarDay /></a></mt:entries>
</mt:calendarIfEntries><mt:calendarIfNoEntries><mt:calendarDay /></mt:calendarIfNoEntries><mt:calendarIfBlank>
<mt:else></span></mt:calendarIfBlank></td><mt:calendarWeekFooter></tr></mt:calendarWeekFooter></mt:calendar>
</tbody>
</table>
</div>
</mt:ifArchiveTypeEnabled>

P.526

「Ajax月送りカレンダー」アーカイブテンプレート

<mt:encodeText to="utf8">
...中略...
</mt:encodeText>

P.527

7.テキストフィールドに表示されている文字の先頭に「calendar/」を追加して、左下の[保存]をクリックしてください。テキストフィールドの内容は次のようになります。

calendar/%y/%m/%i

●head要素にscript要素の追加

「ヘッダー」テンプレートモジュール（サンプルテンプレート）

...前略...
  <mt:if name="index_template">
    <mt:CCLicenseRDF />
  </mt:if>
<script type="text/javascript" src="<mt:blogURL />prototype.js"></script>
<script type="text/javascript" src="<mt:blogURL />ajaxCalendar.js"></script>
<script type="text/javascript" src="<mt:blogURL />dayChecker.js"></script>
</head>
...後略...

★「HTMLヘッダー」テンプレートモジュール（デフォルトテンプレート）

006～008を追加します。

    ...前略...
001:<link rel="stylesheet" href="<mt:blogURL />litebox/css/lightbox.css" type="text/css" media="screen" />
002:<link rel="stylesheet" href="<$MTLink template="styles"$>" type="text/css" />
003:<link rel="start" href="<$MTBlogURL$>" title="Home" />
004:<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$MTLink template="feed_recent"$>" />
005:<script type="text/javascript" src="<$MTLink template="javascript"$>"></script>
006:<script type="text/javascript" src="<mt:blogURL />prototype.js"></script>
007:<script type="text/javascript" src="<mt:blogURL />ajaxCalendar.js"></script>
008:<script type="text/javascript" src="<mt:blogURL />dayChecker.js"></script>
009:<$MTCCLicenseRDF$>

P.528

●サイドバーにカレンダー表示の設定

・ウィジェット名：Ajax月送りカレンダー
・テンプレートの内容：次の内容を設定

「Ajax月送りカレンダー」ウィジェットテンプレート（サンプルテンプレート）

<dd id="calendar"></dd>
<dd>
<script type="text/javascript">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL /><mt:entries lastn="1" sort_order="descend"><mt:entryDate format="calendar/%Y/%m/" /></mt:entries>");
</script>
</dd>

「Ajax月送りカレンダー」ウィジェットテンプレート（デフォルトテンプレート）

<div class="widget-calendar widget" id="calendar"></div>
<script type="text/javascript">
getCalendar("<mt:blogArchiveURL />", "<mt:blogID />", "<mt:blogArchiveURL /><mt:entries lastn="1" sort_order="descend"><mt:entryDate format="calendar/%Y/%m/" /></mt:entries>");
</script>

P.529

●スタイルシートにカレンダー用CSSの追加

「スタイルシート」インデックステンプレート（サンプルテンプレート）

...前略...
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;	←日曜・祝日の日付を赤色で表示します
    text-align: center;
    font-size: 9px;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #00f;	←土曜の日付を青色で表示します
    text-align: center;
    font-size: 9px;
}
...後略...

「スタイルシート」インデックステンプレート（デフォルトテンプレート）

#calendar table {
    width:90%; /* for IE6 */
    font-size: 100%;
    text-align: center;
    border-collapse: collapse;
}
html > body #calendar table {
    width:100%;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 83.3%;
    width: 23px;
    text-align: center;
}
#calendar td {
    padding: 5px 0; /* for IE6 */
    line-height: 1.0;
}
html > body #calendar td {
    padding: 2px 0;
}
span.day {
    text-align: center;
}
td.today {
    display: block;
    border: 1px solid #333;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
    text-align: center;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #00f;
    text-align: center;
}

P.530

ページ表示時にローディング状態を表示する

001:<dd id="calendar"></dd>
    ...後略...

Ajax呼び出しについて

ajaxCalendar.js

var blogID;
 
getCalendar = function(blogURL, id, path) {
    blogID = id;
    var cookie = readCookie("AjaxCal" + id);
    if(cookie != null) {
        if(blogURL.lastIndexOf("/") != blogURL.length - 1) {
            path = blogURL + "/calendar/" + cookie + "/";
        } else {
            path = blogURL + "calendar/" + cookie + "/";
        }
    }
    changeMonth(path);
};
 
changeMonth = function(url) {
    url += "?" + (new Date()).getTime();
    new Ajax.Updater({success: 'calendar'},
                     url, {
                         method: 'get',
                         onComplete: endProcess,
                         onFailure: errorProcess
                     });
    return false;
};
...後略...

P.531

カレンダー取得失敗時にメッセージ等を表示する

ajaxCalendar.js

...前略...
errorProcess = function () {
    $('calendar').innerHTML = 'File Not Found';
};
...後略...

カテゴリ

月別 アーカイブ

ウェブページ

Powered by Movable Type 4.261

検索

このアーカイブについて

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。