リアルタイムカレンダー(画像表示版)

リアルタイムカレンダー(画像表示版)

Posted at February 23,2005 8:10 PM
Tag:[Calendar, Customize, Image, MovableType, PHP]

ご要望がありましたのでリアルタイムカレンダー(改)を改造して作ってみました。今回の改造に際しまして下記のサイトを参考にさせて頂きました。ありがとうございました。

ふれあい果樹園

本カレンダーの仕様は、本日の日付に画像だけを表示するというものです(日を表示しません)。日付の背景に画像を表示する場合はリアルタイムカレンダーのスタイルシートに

.today {
    background-image :url( "画像のURL");
    background-repeat: no-repeat;
}

というような設定を行えば動作します(多分)。赤字部分に表示したい画像のURLを設定してください。

ここでは通常カレンダー・月送りカレンダー・縦型カレンダー・横型カレンダーの4つのケースについて説明しています。また使用されるアーカイブの拡張子が .php になっていることが前提です。.php になっていない場合は下記のエントリーの3項から始めてください。

リアルタイムカレンダー(改)

また月送りカレンダーにつきましては本エントリーとは別にカスタマイズが必要ですのでご注意ください。

月送りカレンダー

通常カレンダー・月送りカレンダー・横型カレンダーについては、カレンダー設定がされている各テンプレートの <MTCalendar>~</MTCalendar> の部分を下記のスクリプトに変更します。縦型カレンダーは <table>~</table> で括られていることを前提に作っておりますので、該当部分を置き換えてください。また縦型カレンダーのスタイルシートは

全体:calendar
月表示:calendar-head
日表示:calendar-day

という指定になっています。スタイルシートの設定は適宜設定くださいますよう、お願い致します。
いずれも赤字部分に表示したい画像のURLを設定してください。
現状では、Windows2000・IE6.0/Firefox1.0/Opera7.23で動作の正常性を確認しています。

1.通常カレンダー

<?php
$day = date("j");
$img = "画像のURL";
?>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries>
<?php
$d="<$MTCalendarDay$>";
?>
<td align="center">
<?php
if($day != $d) {
    print "<span class=\"calendar\">";
}
?>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>">
<?php
if($day != $d) {
    print $d;
} else {
    print "<img src=\"" . $img . "\" align=\"middle\" border=\"0\" />";
}
?>
</a>
</MTEntries>
<?php
if($day != $d) {
    print "</span>";
}
?>
</td>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<td align="center">
<?php
if($day != <$MTCalendarDay$>) {
    print "<span class=\"calendar\"><$MTCalendarDay$></span>";
} else {
    print "<img src=\"" . $img . "\" align=\"middle\" />";
} 
?>
</td></MTCalendarIfNoEntries>
<MTCalendarIfBlank><td> </td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

2.月送りカレンダー

<?php
$day = date("j");
$year = date("Y");
$month = date("m");
$img = "画像のURL";
?>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
 
<MTCalendarIfEntries>
<?php
$y = "<$MTCalendarDate format='%Y'$>";
$m = "<$MTCalendarDate format='%m'$>";
$d = "<$MTCalendarDay$>";
?>
<td align="center">
<?php
if($year == $y && $month == $m && $day == $d) {
    print "<span class=\"calendar\">";
}
?>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" target="_top">
<?php
if($year == $y && $month == $m && $day == $d) {
    print "<img src=\"" . $img . "\" align=\"middle\" border=\"0\" />";
} else {
    print $d;
}
?>
</a>
</MTEntries>
<?php
if($year == $y && $month == $m && $day == $d) {
    print "</span>";
}
?>
</td>
</MTCalendarIfEntries>
 
<MTCalendarIfNoEntries>
<td align="center">
<?php
$y = "<$MTCalendarDate format='%Y'$>";
$m = "<$MTCalendarDate format='%m'$>";
$d = "<$MTCalendarDay$>";
if($year == $y && $month == $m && $day == $d) {
    print "<img src=\"" . $img . "\" align=\"middle\" />";
} else {
    print "<span class=\"calendar\"><$MTCalendarDay$></span>";
} 
?>
</td></MTCalendarIfNoEntries>
 
<MTCalendarIfBlank><td> </td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

3.縦型カレンダー

<table width="100%" class="calendar" cellpadding="2" cellspacing="4" summary="カレンダー">
<tr>
<td class="calendar-head"><$MTDate format="%B"$>月</td>
</tr>
<?php
$day = date("j");
$img = "画像のURL";
?>
<MTCalendar>
<MTCalendarIfEntries>
<?php
$d="<$MTCalendarDay$>";
?>
<tr><td align="center">
<?php
if($day != $d) {
    print "<span class=\"calendar-day\">";
}
?>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>">
<?php
if($day != $d) {
    print $d;
} else {
    print "<img src=\"" . $img . "\" align=\"middle\" border=\"0\" />";
}
?>
</a>
</MTEntries>
<?php
if($day != $d) {
    print "</span>";
}
?>
</td></tr>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<tr><td align="center">
<?php
if($day != <$MTCalendarDay$>) {
    print "<span class=\"calendar-day\"><$MTCalendarDay$></span>";
} else {
    print "<img src=\"" . $img . "\" align=\"middle\" />";
} 
?>
</td></tr></MTCalendarIfNoEntries>
</MTCalendar>
</table>

4.横型カレンダー

<?php
$day = date("j");
$img = "画像のURL";
?>
<MTCalendar> 
<MTCalendarIfEntries> 
<?php
$d = "<$MTCalendarDay$>";
if($day != $d) {
    print "<span class=\"calendar\">";
}
?>
<MTEntries lastn="1"> 
<a href="<$MTEntryLink archive_type="Daily"$>"> 
<?php
if($day == $d) {
    print "<img src=\"$img\" border=\"0\" />";
} else {
    print " $d";
}
?>
</a>
</MTEntries> 
</MTCalendarIfEntries> 
<MTCalendarIfNoEntries>
<?php
$d = "<$MTCalendarDay$>";
if($day != $d) {
    print "<span class=\"calendar\"> $d";
} else {
    print "<img src=\"$img\" border=\"0\" />";
}
?>
</MTCalendarIfNoEntries> 
<?php if($day != $d) { print "</span>"; } ?> 
</MTCalendar> 

設定終了後、それぞれ保存・再構築してください。

2005.02.26 追記
月送りカレンダーにtypoがありましたので修正しました。

2005.03.11 追記
横型カレンダーを追加しました。

2005.05.02 追記
月送りカレンダーに month="this" の設定がもれていましたので追記しました。

2005.08.07 追記
Apache のログにPHPエラーが出ていたためスクリプトを一部修正しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

カレンダーの“今日”に画像を!!・・・の巻。 from TOY COZY MUSEUM 別館
カレンダー表示の“今日”の日付については、色付きの枠線での強調表示をしていたのですが、「小粋空間」様の記事で、リアルタイムカレンダーの画像表示版として方法が紹介... [続きを読む]

Tracked on February 23, 2005 9:08 PM

本日の日付に画像だけを表示 from Magic White
小粋空間 リアルタイムカレンダー(画像表示版)を参考に本日の日付に画像だけを表示... [続きを読む]

Tracked on February 23, 2005 11:31 PM

カレンダーの本日表示だけを画像にする。再び from 我楽
以前のエントリーで、カレンダーの本日表示を画像表示にしたのですが、インラインで html に直接スタイル設定をしているせいか、ie では表示... [続きを読む]

Tracked on February 24, 2005 10:44 AM

カレンダー from mrumru
カレンダー表示を縦にしたい・・・。 そんな衝動にかられて小粋空間さまを参考にやっ... [続きを読む]

Tracked on February 28, 2005 12:40 PM

カレンダーの今日を画像に from Treasure
小粋空間さんのリアルタイムカレンダー(画像表示版)を参考に カレンダーの今日の部... [続きを読む]

Tracked on March 1, 2005 4:22 PM

カレンダー from murmur
カレンダー表示を縦にしたい・・・。 そんな衝動にかられて小粋空間さまを参考にやっ... [続きを読む]

Tracked on March 6, 2005 9:01 AM

横型月送りリアルタイム画像版 from スヌーピーキャンディー
小粋空間さん:すごいなぁ。ありがとうございます。 月送りカレンダー(横型・リアル... [続きを読む]

Tracked on June 5, 2005 5:21 PM

カレンダー使用に関するメモ from ネコの為に鈴は鳴る。 - After☆Taste Blog
このブログを設置して以来ずっとカレンダーは小粋空間さんのリアルタイムカレンダー(... [続きを読む]

Tracked on March 1, 2006 2:47 PM
コメント

こんばんはです。

早速導入させていただきました。毎度同じことしか言えませんが(笑)、有り難うございます。

ワタシの場合は、チェックマークでありながら、背景画像にしてみたのですが、日付の大きさからすると見栄えも丁度良かったような気がします。飽きてきたら、気分次第でアレコレ変えてみようかと思います(笑)。

[1] Posted by toycozy : February 23, 2005 9:12 PM

おはようございます♪
早速 日付の背景にお花を ちょこんとつけてみました(^▽^)

 ありがとうございました

[2] Posted by mayumi : February 24, 2005 9:07 AM

>toycozyさん
こんにちは。
はい、なかなかナイスですね。
いつもながらデザイン能力には感服しております。
次回(の背景)も楽しみにしております。

>mayumiさん
こんにちは。
ご利用ありがとうございます。
お花が可愛く回ってますね?!

[3] Posted by yujiro : February 24, 2005 11:03 AM

こんばんは、いつもありがとうございます。
これを導入させていただきました。
可愛く仕上がりましたが、日にちをクリックすると
iframe内に飛んでしまうようになってしまいました・・
タグとにらめっこしてみましたがお手上げです。。
どこが悪いのでしょうか・・・
おわかりでしたら教えてください。
いつも申し訳ありません

[4] Posted by ちひろ : February 26, 2005 8:51 PM

>ちひろさん
こんばんはー。
ご利用ありがとうございます。

で…すいません!!
以前と同じミスをしてしまいました。
リンクの部分に target="_top" を記述するのを忘れてました。

修正しましたので再度お試しになってみてください。
それではよろしくお願い致します。

[5] Posted by yujiro : February 27, 2005 1:18 AM

出来ました!ありがとうございました。
どこかでtarget指定をするんだろう事は
わかっていたのですが
何せアホ頭なものでさっぱりわからなくて。

わざわざありがとうございましたペコリ(o_ _)o))

[6] Posted by ちひろ : February 27, 2005 10:12 AM

>ちひろさん
こんにちは。
いえいえ、ご迷惑おかけしてすいませんでした。
無事にできてなによりです。

[7] Posted by yujiro : February 27, 2005 2:35 PM

はじめまして。はじめての書き込みなのに大変ぶしつけですが、「リアルタイムカレンダー(画像表示版)」導入がなぜかうまくいきません。半月ほど格闘しておりますが、かなり近いところまでいって、とうとう行き詰まってしまいました。どうかご助言いただけないかと思い、書き込みいたしました。もしお助けいただけるようでしたら、改めて詳しい状況などお知らせしたいと思います。コメント欄に書くべき内容でなかったら本当にごめんなさい。

[8] Posted by erilee : May 1, 2005 1:39 AM

>erileeさん
はじめまして。
記事参照ありがとうございます。

ご質問の件ですが、まずは不具合の状況(どのように表示されるか等)をお知らせいただくか、URLをお知らせ頂けますでしょうか(こちらで設定状況を確認させて頂きたいので不具合の発生している状態であることが必要です)。
ご質問は内容にかかわらず基本的になんでもお受けしておりますので、コメント欄にお気軽にご記入ください。

以上です。
それではどうぞよろしくお願い致します。

[9] Posted by yujiro : May 1, 2005 1:46 AM

さっそくお返事ありがとうございます。もうyujiroさんが神様に思えます。ほんとうにありがとうございます。
現状では、「月送り+リアルタイムカレンダー(改)」まで導入できました。……が、「画像表示版」に切り替えたところ、「<」をクリックすると月名は前月に移動していくものの、肝心のカレンダーそのものは今月のカレンダーのまま変わらないという状態です(月送り+リアルタイムカレンダー(改)」では、問題なく前月のカレンダーが表示されます)。
もしURLで状況を確認していただいたほうがよろしければ、開店準備状態でショボショボでひどくはずかしいですが、ブログのURLをお知らせいたします。
以上、どうぞよろしくお願いいたします。

[10] Posted by erilee : May 1, 2005 2:12 AM

>erileeさん
おはようございます。
サイトを拝見させて頂いた方がよさそうです。
URL公開を控えられているようでしたら私のメールアドレス

youjiroh@wd5.so-net.ne.jp

へURLを直接ご連絡ください。

以上です。
それではよろしくお願い致します。

[11] Posted by yujiro : May 1, 2005 8:10 AM

yujiroさん、こんにちは。「月送り+リアルタイムカレンダー(画像表示版)」でたいへんたいへんお世話になりましたerileeです。
yujiroさんのお力で、無事カレンダー導入に成功いたしました。感謝感激です。もうなんとお礼を申し上げて良いのやら……ほんとうにありがとうございました。
これからも小粋空間さまのページをずっとずっと応援して参ります。

[12] Posted by erilee : May 2, 2005 4:57 PM

>erileeさん
こんばんは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
こちらの typo で申し訳ございませんでした。

ずっと応援してください(笑)。
ではでは!

[13] Posted by yujiro : May 3, 2005 2:13 AM
コメントする
greeting

*必須

*必須(非表示)


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

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

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

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