My Calendar – スケジュール表を作る

必要があってスケジュール表が欲しかった。
いろいろ調べたが、「My Calendar」と言うのが良さそうであった。
早速使ってみた。
作者の joedolson 様、ありがとうございます。

ダウンロード

My Calendar

Accessible WordPress event calendar plugin. Show events from multiple calendars on pages, in posts, or in widgets.

wordpress.org

「プラグイン」→「新規追加」から「My Calendar」を検索。
「いますぐインストール」して、有効化。

設定

インストール後、有効化すると「ダッシュボード」の中に「My Calendar」が追加されているのでここでいろいろ設定する。
殆ど日本語化されているので、特に困ることはないと思う。

便利だと思う点

• イベントはカレンダー表示とリスト表示が可能。(ウィジェットでも表示可能。)
• イベント開催場所を登録できる。
  イベント登録の際、登録した場所はドロップダウンで選択できるため、入力の手間が省ける。
• イベントをカテゴリー別に管理できる。
• ショートコードを使って投稿、ページ、ウィジェットで「今日のイベント」や「最近のイベント」を表示できる。

表示形式を携帯と PC で変更する。

携帯表示用プラグインは「Ktai Style」を使用している。
携帯電話で見た時にはカレンダー表示だと見づらいので、リスト形式にするといい感じ。
次のコードを表示させるページや投稿に入力すればよい。

<?php
//スケジュールの表示形式を携帯とそれ以外で変える
if (function_exists('is_ktai') && is_ktai()) {
//携帯からのアクセスの場合、リスト表示表示
echo "［my_calendar category=\"undefined\" format=\"list\" showkey=\"no\" shownav=\"yes\" toggle=\"no\" time=\"month\"］";
}else{
// PC からのアクセスの場合、カレンダー表示
echo "［my_calendar category=\"undefined\" format=\"calendar\" showkey=\"no\" shownav=\"yes\" toggle=\"yes\" time=\"month\"］";
}
?>

※ 上記コードの [ と ] は全角で記述している。
実際に使用する時には、半角に直すこと！！

イベント日付の表示形式

イベントカレンダー見出し部分の表示が「○月 ○○○○」となっていた。
これを「○○○○年 ○月」と表示させるために、my-calendar-output.php　530行目を以下の様に変更。
(My Calender のバージョンは「1.9.0」)
※ 変更したファイルは UTF-8 で保存すること。

• 変更前

  $current_date_header = date_i18n('F Y',$current_date);
  

• 変更後

  $current_date_header = date_i18n('Y年 F',$current_date);
  

イベントの表示形式を編集する

既定値でイベントを表示させる下図左のように住所の並びが洋式で見づらい。
また、このせいだと思うが、Google map へのリンクをクリックすると、おかしな住所を検索してしまい、「・・・に一致する情報は見つかりませんでした。」と表示されてしまう。
「my-calendar-templates.php」を編集して右図のようになるように編集した。

編集したのは以下の４カ所。

• 21行目　住所を並び替え、不要だと思われる変数を削除
  編集前

  $map_string = $event->event_street.' '.$event->event_street2.' '.$event->event_city.' '.$event->event_state.' '.$event->event_postcode.' '.$event->event_country;
  

  編集後

  $map_string = $event->event_state.' '.$event->event_city.' '.$event->event_street;
  

• 36行目　Google map へのリンクを編集
  編集前

  $map_url = "http://maps.google.com/maps?f=q&z=$zoom&q=to+$map_string";
  

  編集後

  $map_url = "http://maps.google.com/maps?f=q&z=$zoom&q=$map_string";
  

• 39行目　「Map to」と言う文字列を「地図 ：」に変更
  編集前

  $map = "<a href=\"$map_url\" class='map-link external'>".sprintf(__('Map<span> to %s</span>','my-calendar'),$map_label )."</a>";
  

  編集後

  $map = "<a href=\"$map_url\" class='map-link external'>".sprintf(__('地図 ：<span> %s</span>','my-calendar'),$map_label )."</a>";
  

• 59行目　「Visit web site」と言う文字列を「URL ：」に変更
  編集前

  $sitelink_html = "<div class='url link'><a href='$event_url' class='location-link external'>".sprintf(__('Visit web site<span>: %s</span>','my-calendar'),$event_label)."</a></div>";
  

  編集後

  $sitelink_html = "<div class='url link'><a href='$event_url' class='location-link external'>".sprintf(__('URL ：<span> %s</span>','my-calendar'),$event_label)."</a></div>";
  

• 59行目　イベントをクリックすると表示される、住所の並び方を変更
  編集前

  if ( $address == 'true' ) {
  $hcard .= "<div class=\"adr\">";
  if ($event_label != "") {$hcard .= "<strong class=\"org\">".$event_label."</strong><br />"; }
  if ($event_street != "") {$hcard .= "<div class=\"street-address\">".$event_street."</div>";}
  if ($event_street2 != "") { $hcard .= "<div class=\"street-address\">".$event_street2."</div>"; }
  if ($event_city != "") {$hcard .= "<span class=\"locality\">".$event_city."</span>, ";}
  if ($event_state != "") {$hcard .= "<span class=\"region\">".$event_state."</span> ";}
  if ($event_postcode != "") {$hcard .= " <span class=\"postal-code\">".$event_postcode."</span>";}
  if ($event_country != "") { $hcard .= "<div class=\"country-name\">".$event_country."</div>";}
  $hcard .= "</div>";
  }
  

  編集後

  if ( $address == 'true' ) {
  $hcard .= "<div class=\"adr\">";
  if ($event_label != "") {$hcard .= "<strong class=\"org\">".$event_label."</strong><br />"; }
  if ($event_postcode != "") {$hcard .= "<span class=\"postal-code\">〒 ".$event_postcode."</span><br />";}
  if ($event_state != "") {$hcard .= "<span class=\"region\">".$event_state."</span>";}
  if ($event_city != "") {$hcard .= "<span class=\"locality\">".$event_city."</span><br />";}
  if ($event_street != "") {$hcard .= "<div class=\"street-address\">".$event_street."</div>";}
  if ($event_street2 != "") { $hcard .= "<div class=\"street-address\">".$event_street2."</div>"; }
  if ($event_country != "") { $hcard .= "<div class=\"country-name\">".$event_country."</div>";}
  $hcard .= "</div>";
  }
  

カレンダーのリンクを別ウィンドウで開く

My Calendar 作者の FAQ ページで以下の記事を見つけた。
カレンダーのリンクを別ウィンドウで開くには、「My Calendar」→「JavaScript編集」→「カレンダー表示の jQuery を編集する」の中に以下の13行目から17行目を追加する。

jQuery(document).ready(function($) {
$(".calendar-event").children().not(".event-title").hide();
$(".calendar-event .event-title").live("click",
function(e) {
e.preventDefault(); // remove line if you are using a link in the event title
$(this).parent().children().not(".event-title").toggle();
});
$(".calendar-event .close").live("click",
function(e) {
e.preventDefault();
$(this).parent().toggle();
});
/* リンクを外部で開くためのコマンド */
$(".external").live("click",
function(e){
$(this).attr('target','_blank');
});
});

これだけで、リスト表示でもリンクが別ウィンドウで開く。
ちょっと変な感じもするが・・・まっいいか。

ちなみに、イベント情報の中にある「iCal」に関してはこちらでチェック。

iCalendar（アイカレンダー）とはPIMソフトなどで使われるスケジュールの標準フォーマット。RFC 2445で規定されている。「iCal」と略称されるが、アップル社の同名カレンダー・プログラムもある（→iCal）ので注意が必要である。
iCalendarをサポートしたソフトウェアを使うことで、他のユーザーに対してミーティングの時間や予定を電子メール経由で知らせることが容易になり、メールの受信者もミーティングの日時を簡単に提案できるようになる。
iCalendarは多くの製品に実装、サポートされている。そのデータは従来の電子メールで交換され、仕様上、送信プロトコルに依存しないこととなっている。たとえばWebDAVサーバやSyncMLを使って共有や編集が行えるのだ。HTTPプロトコルしか使用しないシンプルなWebサーバは、iCalendarフォーマットのスケジュールデータを配付するために使われる。「hCalendar」を使えばWebページにiCalendarデータを埋め込むことができる。

「Template Editor」を使ってイベントの表示形式を設定する

注意：この記事の内容は設置途中に行った失敗メモ書きであり、使用していない。
この記事の通りに操作すると以下の不具合があった。

• 「イベントの追加／編集」や「場所の管理」でイベント会場の URL が入力されていない場合でも、URL が表示されてしまう。
  そのリンク先は、表示されているページとなる。
  http://antonsan.net/cal にイベントカレンダーを表示している場合、http://antonsan.net/cal へのリンクとなる。
  イベント会場の URL が入力されていない場合は、リンクが表示されないショートコードがあればいいのになぁ・・・。
• 上に記した■ カレンダーのリンクを別ウィンドウで開くを実施してもリンクが別ウィンドウで開かない。
  なんでだろ・・・？

既定値でイベントを表示させる下図左のように住所の並びが洋式で見づらい。
また、このせいだと思うが、Google map へのリンクをクリックすると、おかしな住所を検索してしまい、「・・・に一致する情報は見つかりませんでした。」と表示されてしまう。
「ダッシュボード」→「My Calendar」の中の「Template Editor」画面で右図のようになるように編集した。

「Template Editor」画面の中の「My Calendar: Grid Event Template」、「My Calendar: List Event Template」および「My Calendar: Mini Event Template」内に以下のコードを記述し、テンプレートをそれぞれ保存すれば完了。
それぞれのテンプレートに違う形式を指定しても面白いかも知れない。

<p>{time} - {endtime}<br />
<p>会場：{location}<br />
<p>住所：〒{postcode}<br />
{state}{city}{street}<br />
{street2}
</p>
<p><a href="{sitelink}" target="blank">URL:{location}</a><br />
<!-- リンクマップ 既定値だとうまく表示されないので-->
<a href="http://maps.google.co.jp/maps?q={state}{city}{street}" title="{location}を Google map でみる。" target="blank">地図：{location}</a>
</p>
<p>
{shortdesc}<br />
{description}
</p>

それぞれの既定のテンプレートを記載しておく。

■ My Calendar: Grid Event Template

<span class="event-time dtstart" title="{dtstart}">{time}<span class="time-separator"> - </span><span class="end-time dtend" title="{dtend}">{endtime}</span></span>
<div class="sub-details"><span class="event-author">Posted by: <span class="author-name">{author}</span></span><br />
{hcard}
<p class="mc_details">{details}</p>
<p>{ical_html}</p>
<div class="shortdesc">{image}
{shortdesc}
</div>
<p><a href="{link}" class="event-link external">{title}</a></p></div>

■ My Calendar: List Event Template

<span class="event-time dtstart" title="{dtstart}">{time}<span class="time-separator"> - </span><span class="end-time dtend" title="{dtend}">{endtime}</span></span>
<div class="sub-details">
<h3 class="event-title summary">{icon_html}{title}</h3>
<span class="event-author">Posted by: <span class="author-name">{author}</span></span><br />
{hcard}
<p class="mc_details">{details}</p>
<p>{ical_html}</p>
<div class="shortdesc">{image}{shortdesc}</div>
<p><a href="{link}" class="event-link external">{title}</a></p></div>

■ My Calendar: Mini Calendar Template

<span class="event-time dtstart" title="{dtstart}">{time}<span class="time-separator"> - </span><span class="end-time dtend" title="{dtend}">{endtime}</span></span>
<div class="sub-details"><span class="event-author">Posted by: <span class="author-name">{author}</span></span><br />
{hcard}
<p class="mc_details">{details}</p>
<p>{ical_html}</p>
<p><a href="{link}" class="event-link external">{title}</a></p></div>