TopMovable Typeカスタマイズカレンダー > 2006年3月
2006年3月27日

休日表示付きリアルタイムカレンダー(月送り・横型) for Movable Type

March 27,2006 1:50 AM
Tag:[, , ]
Permalink

休日表示付きリアルタイムカレンダー(月送り・横型)休日表示付リアルタイムカレンダーの月送り・横型タイプです。これまでにエントリーした横型カレンダーはすべてPHP化が必要でしたが、JavaScript で休日表示および本日表示を行うためPHP化は不要となります。完成するとスクリーンショットのような表示になります(画像をクリックすると全体が表示されます)。
以下設定方法です。

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

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

download

2.スクリプトのアップロード

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。このスクリプトをインクルードするための script 要素は4項のテンプレートに含まれています。

3.アーカイブパスの設定

Movable Type のバージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれて、その下に表示されたフォームに下記の内容を設定します。

  • アーカイブURL:http://ブログURL/archives/
  • アーカイブパス:アーカイブURLまでのパス

例えば当サイトであれば

  • アーカイブURL:http://www.koikikukan.com/archives/
  • アーカイブパス:/home/koikikukan/public_html/archives

という具合になります。

バージョンが 3.1x-ja 以前の場合は、管理メニューの「ウェブログの設定」→「基本設定」の「ローカル・アーカイブ・パス」と「アーカイブのURL」に、上記と同様、

  • ローカル・アーカイブ・パス:アーカイブURLまでのパス
  • アーカイブのURL:http://ブログURL/archives/

を設定します。すでに設定済みの場合はそのままでも結構ですが、以降のカスタマイズで出現する「archives」というディレクトリ名を適宜変更または削除する必要があります。ここでは説明を割愛しますのでお分かりにならない場合はコメントにてご質問ください。

4.カレンダー用アーカイブテンプレートの設定

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。
次画面で下記を設定してください。

  • テンプレート名:カレンダー(名称は何でもOKです)
  • このテンプレートにリンクするファイル:(設定不要)
  • テンプレートの内容:下記

設定が終わったら「保存」をクリックしてください。

5.カレンダー用スタイルシートの設定

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「インデックス」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「インデックステンプレート」右の「新しいインデックステンプレートを作る」をクリック。 次画面で下記を設定してください。

  • テンプレート名:カレンダー用スタイルシート(名称は何でもOKです)
  • 出力ファイル名:calendar.css
  • このテンプレートにリンクするファイル:(設定不要)
  • テンプレートの内容:下記

設定が終わったら「保存」をクリックし、次の画面で「このテンプレートを再構築する」をクリックしてください。

6.カレンダーテンプレートを月別アーカイブに関連付け

バージョンが 3.2-ja 以降の場合、予め、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成 」をクリックして下記の設定を実施してください。 バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。

アーカイブの種類:月別

テンプレート:カレンダー(←4項で設定した「テンプレート名」です)

「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、4項で付与した「テンプレート名(ここでは"カレンダー")」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「アーカイブ・ファイルのテンプレート(3.1x 以前)」または「出力フォーマット(3.2-ja 以降)」に下記を設定してください。

アーカイブ・ファイルのテンプレート(3.1x-ja 以前):下記

<$MTArchiveDate format="calendar/%Y/%m/index.html"$>

出力フォーマット(3.2-ja 以降):下記

calendar/%y/%m/index.html

これがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。

またカレンダーを初めてご利用になる場合は、「アーカイブ種類」欄の「日別アーカイブ」をチェックして保存してください。このチェックがされていないと、再構築で下記のようなエラーが発生します。

日付アーカイブ「Monthlyxxxx」の再構築に失敗しました: テンプレート「カレンダー」の再構築に失敗しました: <MTCalendar>タグでエラーが発生しました: <MTCalendarIfEntries>タグでエラーが発生しました: <MTEntryLink>タグでエラーが発生しました:<$MTEntryLink$>タグを使って、Dailyアーカイブにリンクしようとしましたが、そのアーカイブ・タイプは公開されていません。

7.各テンプレートの修正

カレンダーを利用したいテンプレート(メインページ/カテゴリー・アーカイブ/日別アーカイブ/エントリーアーカイブ等)のタイトル設定の下に下記のカレンダー表示用の iframe 要素(青色部分)を追加してください。

<!-- タイトル開始 -->
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
<!-- タイトル終了 -->
 
<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTEntries lastn="1" sord_order="descend"><$MTEntryDate format="%Y/%m/index" $></MTEntries>.html" width="698" height="20" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

サイドバーに既存のカレンダーを表示している場合は併せて削除してください。コメントアウトをされても構いませんが、その場合でも再構築の対象になります(つまりその分再構築時間がかかります)ので、削除されることをお勧めします。

8.CSS設定

スタイルシート(styles-site.css)に、iframe セレクタに対するプロパティ(青色)を追加してください。

#globalnavi {
    text-align: center;
    padding-bottom: 3px;
    border-bottom : 1px solid #666699;
}

以上です。
ここまでの設定が終わったら、管理メニューの「サイトを再構築」→「すべてを再構築」を選択・再構築を実行して、カレンダーを設定したページを表示し、横型カレンダーがタイトル下に表示されること、月送りができることを確認してください。スタイルは Windows2000/XP:IE/Firefox/Opera で確認しています。

2006.03.30 追記
6項で設定する拡張子が誤ってましたので修正しました。

2006.06.14 追記
日別アーカイブのチェックについて追記しました。

Comments [96] | Trackbacks [14]
2006年3月16日

休日表示付リアルタイムカレンダー for Movable Type

March 16,2006 12:38 AM
Tag:[, , ]
Permalink

休日表示付リアルタイムカレンダーMovable Type のカレンダーに土・日・休日・本日を表示するカスタマイズです。ここではデフォルトテンプレートおよび公開テンプレートを利用したテーブルタイプのカレンダー、および公開テンプレートの月送りカレンダーに対するカスタマイズをご紹介します。CSSを変更すれば他のテンプレートでもご利用可能です。
スクリーンショットはデフォルトテンプレートに設定した完成例です。

余談ですが、これまで公開してきたカレンダーのHTMLマークアップおよびCSSの設定を若干見直しました。

2006.10.10 追記本カスタマイズを Ajax 化した「Ajax 月送りカレンダー」を公開しています。

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

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

download

2.スクリプトのアップロード

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

3.テンプレートの修正1(スクリプトのインクルード)

テンプレートの <head>~</head> の間に下記の設定を追加します。月送りカレンダーの場合はカレンダーテンプレートの <head>~</head> の間に挿入してください。

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

src 属性には配置したスクリプトのURLを設定してください。スクリプトは utf-8 で作成しておりますので、ブログの文字コードが異なる場合は、スクリプトの文字コードをエディタ等を用いてブログの文字コードに変更するか、

<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js" charset="utf-8"></script>

と、青色で示した charset 属性に utf-8 を設定し、追加してください。

4.テンプレートの修正2(カレンダー表示タグの設定)

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

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

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="module-calendar module">
<h2 class="module-header"><$MTDate format="%B %Y"$></h2>
<div class="calendar">
<table id="calendarTable" summary="<$MTDate 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>
<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 type="text/javascript">
setCurrentDate();
setWeekendAndHoliday('<$MTDate format="%Y"$>','<$MTDate format="%m"$>');
</script>
 
</MTIfArchiveTypeEnabled>

4.2 公開テンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTDate format="%Y/%m"$>">
<caption class="calendarhead"><$MTDate format="%B %Y"$></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>
<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 type="text/javascript">
setCurrentDate();
setWeekendAndHoliday('<$MTDate format="%Y"$>','<$MTDate format="%m"$>');
</script>
 
</MTIfArchiveTypeEnabled>

4.3 月送りカレンダーの場合

カレンダー用アーカイブテンプレートの最後に下記を追加してください。

<script type="text/javascript">
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>
2006.09.12 以前に月送りカレンダーのカスタマイズをされた方

カレンダー用テンプレートの table 要素に id 属性を追加してください。

<table id="calendarTable" ?>
2006.03.23 以前に月送りカレンダーのカスタマイズをされた方

カレンダー用テンプレートの table 要素の summary 属性を下記のように変更してください。

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

また、下記の赤色部分を削除してください。

<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center"><span class="calendar">
<!--追加--><MTCalendarIfToday><b></MTCalendarIfToday><!---->
<MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" title="[<$MTEntryTitle$>]" target="_top">
<$MTCalendarDay$></a>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><!--追加--><MTCalendarIfToday></b></MTCalendarIfToday><!----></span>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
2006.03.23 以降に月送りカレンダーのカスタマイズをされた方

下記の赤色部分を削除してください。

<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span<MTCalendarIfToday> class="today"</MTCalendarIfToday>></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>

5.テンプレートの修正3(スクリプト追加)

休日表示カレンダースクリプトを起動するスクリプトを <head>~</head> の間に下記の設定を追加するか、外部ファイル(この場合、dayChecker.js に追加するのが良いでしょう)として保存します。外部ファイルにする場合はリストの最初と最後にある script 要素を削除してください。
月送りカレンダーの場合はカレンダーテンプレートの </body> の直前に挿入してください。

<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');
            }
        }
    }
}
</script>

6.CSS修正

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

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

初めてカレンダーをご利用になる場合はすべて追加し、すでにご利用の場合は 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;
}

6.2 公開テンプレートの場合

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

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

また下記の color プロパティ(赤色)を削除してください。これは本日と土日祝日が重複した時に土日祝日の色を優先させるためです。

.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}

6.3 月送りカレンダーの場合

カレンダー用スタイルシートに下記を追加してください。

.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;
}

7.PHP化によるリアルタイムカレンダーから変更される場合

上記のカレンダーに置き換えてください。拡張子は .php のままで問題ありません。

2006.03.19 追記
月送りカレンダー(4.3項)のタグが誤ってましたので修正しました。

2006.03.23 追記
月送りカレンダーの説明が不足していましたので追記しました。

2006.03.24 追記
4.3の最初のリストが誤っていました(MTData→MTArchiveDate)ので修正しました。

2006.03.30 追記
土日祝日にリンクがある場合の考慮がもれてましたので、CSSを修正しました。

2006.04.07 追記
4項に日別アーカイブのアーカイブマッピングを追加する記述を追加しました。
また5.2項に追加すべきスタイルを追加しました(途中でセレクタ名を変更したことによる修正もれ)。

2006.09.12 追記
カレンダーのセレクタ名を一部修正しました。

Comments [123] | Trackbacks [22]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3