「Ajax Event Calendar」でイベントクリック時にイベント詳細ページへ移動

前回に引き続き、WordPressカレンダープラグイン
「Ajax Event Calendar」用のショートコード作成です。

今回はカレンダーでクリック時、詳細ページを表示する様なショートコードを作成します。

Ajax Event Calendarの元々の仕様では、カレンダーでイベントをクリックすると
イベントの詳細情報がAjax処理で画面上部からポップアップ表示されます。

この表示だと、PCで見る分には良いですが
スマホでは見づらいんじゃないのかなーと思ったのが作成しようと思った理由です。
ちなみに実際にスマホでAjax Event Calendar見たこと無いです。
どんな感じがご存知の方は教えてもらえると嬉しいです

では、実装

１．イベントクリック時のページ移動する様に修正

イベントクリック時にページ移動する様に修正します。

plugins/ajax-event-calendar/js/jquery.init_show_calendar.js

１）ページ移動用メソッド定義

eventDialog = function (e) {
　～色々処理

  });
},

上記コードはカレンダーでのイベントクリック時にダイアログを表示するメソッドです。
このメソッドの後ろに、クリック時にページ移動用のメソッド作成します。

eventLink = function (e) {
	window.location = 'http://localhost/?page_id=123&event_id=' + e.id;
},

上記でのpage_id=123は例となりますが「イベント詳細ページ」用の固定ページです。
環境に応じてURLは変更下さい。
※以降の手順３で作成する「イベント詳細ページ」のURLになります
クエリパラメータの「event_id=' + e.id」があればOKです

２）クリック時の呼び出しメソッドをダイアログ表示からリンク移動に変更

イベントクリック時の呼び出しメソッドをページ移動用メソッドに変更します。
以下では元の呼び出しメソッドをコメントアウトしていますが削除でもOKです

eventClick: function (e) {
	eventDialog(e);
},

↓変更↓

eventClick: function (e) {
	eventLink(e);
	//eventDialog(e);
},

３．イベント詳細ページ表示用ショートコード作成

functions.php
に下記メソッド追加します。
[aec-event-detail]というショートコードを作成します。
以下のメソッドでは、カテゴリ表示用にカテゴリテーブルも参照しています。
出力結果はサンプルです。
表示するイベント詳細情報を調整する場合はSQL文と取得処理を、
デザインを調整する場合は「取得結果を元に表示HTML生成」以降を修正下さい

/* 
  ショートコード
　AEC指定IDのイベント詳細を表示する
*/
add_shortcode('aec-event-detail', 'aceEventDetail');
function aceEventDetail() {

	$event_id = htmlspecialchars($_GET['event_id'], ENT_QUOTES);
	global $wpdb;
	//SQL
	$sql = "SELECT ".
			" title, start, end,  ".
			" allDay, category_id, description, venue, b.category ".
			" FROM " .$wpdb->prefix . AEC_EVENT_TABLE . " a, " .$wpdb->prefix . AEC_CATEGORY_TABLE . " b".
			" WHERE a.id = " . $event_id . " and a.category_id=b.id ; ";
	$result = $wpdb->get_results($sql);
	$out = "";
	//取得結果を元に表示HTML生成
	if (count($result)) {
		foreach ($result as $value) {
			$dateRange = "";
			$week = array("日", "月", "火", "水", "木", "金", "土");
			$strtotimeStart = strtotime("$value->start");
			$strtotimeEnd = strtotime("$value->end");
			$youbiStart = $week[date("w", $strtotimeStart)];
			$youbiEnd = $week[date("w", $strtotimeEnd)];
			//終日の場合は開始日の年月日を表示
			if ($value->allDay == 1) {
				$dateRangeStart = date("Y年m月d日",$strtotimeStart). " (". $youbiStart. ")";
				$dateRange = $dateRangeStart;
			} else {
				$dateStart = date("Y年m月d日",$strtotimeStart);
				$timeStart = date("G:i",$strtotimeStart);
				$weekStart = "(". $youbiStart. ")　";
				$dateEnd = date("Y年m月d日",$strtotimeEnd);
				$timeEnd = date("G:i",$strtotimeEnd);
				$weekEnd = "(". $youbiEnd. ")　"; 

				if ($dateStart === $dateEnd) {
					$dateRange = $dateStart. $weekStart. $timeStart. '　～　'. $timeEnd;
				} else {
					$dateRange = $dateStart. $weekStart. $timeStart. '　～　'. $dateSEnd. $weekEnd. $timeEnd;
				}
			}
			$out .= '<dl class="detail">';
			$out .= '<dt>イベント名：</dt><dd>' .$value->title .'</dd>';
			$out .= '<dt>カテゴリ：</dt><dd>' .$value->category.'</dd>';
			$out .= '<dt>会場・場所：</dt><dd>' .$value->venue .'</dd>';
			$out .= '<dt>イベント期間：</dt><dd>' .$dateRange. '</dd>';
			$out .= '<dt>詳細：</dt><dd>' .$value->description .'</dd>';
			$out .= '</dl>';
		}
	} else {
		$out .= "該当するイベント情報はありません。";
	}
	return $out;

４．イベント詳細ページ用固定ページ作成。

イベントクリック時の遷移後のイベント詳細ページを作成します。
（タイトルは適当に、私は「カレンダーイベント詳細」としました）
ページには実装したショートコードを記述します

[aec-event-detail]

５．完成

以上を実装後、AECカレンダーでイベントをクリックすると、
該当イベントの詳細情報が記述された「カレンダーイベント詳細」ページへ移動します。

キャプチャが無く文章だけの説明で分かりにくいかと思いますが、
これで「Ajax Event Calendar」でのカレンダーイベントクリック時に
イベント詳細ページへ移動とイベント詳細表示が実現できました。
参考までにどうぞです、利用は自己責任で。。