fullcalendarのイベントクリックで表示したダイアログの中に記事の内容を表示させたい

前提・実現したいこと

fullcalendarをWPの固定ページで表示させ、カスタム投稿タイプとカスタムフィールドで設定した記事の情報をカレンダーに反映させています。
fullcalendarはv5.9.0を使用しています。

イベントをクリックしたとき、ダイアログを表示させるのは上手くいったのですが、中身にタイトルと記事のリンク以外の情報が表示できません。
アイキャッチ画像とタームの名前、カスタムフィールドで設定したテキストエリアの内容を表示させたいです。

あと、できればダイアログの位置をクリックした場所にしたい（＆画面からはみ出さない位置にしたい）のですが、それも上手くいきませんでした。。

該当のソースコード

<script>

	document.addEventListener('DOMContentLoaded', function() {
		var calendarEl = document.getElementById('calendar');

		var calendar = new FullCalendar.Calendar(calendarEl, {
			locale: 		'ja',	//日本語
			navLinks: 		false,	//カレンダー内の日付クリックで日表示に遷移しない
			editable: 		false,	//イベントを編集できないようにする
			contentHeight: 	'auto',
			headerToolbar: {
				left: 'prevYear,prev,next,nextYear today',
				center: 'title',
				right: 'dayGridMonth,dayGridWeek,listMonth'
			},
			navLinks: true, // can click day/week names to navigate views
			editable: true,
			dayMaxEvents: true, // allow "more" link when too many events

			dayCellContent: function(e) { //日付の「日」表記を削除
				e.dayNumberText = e.dayNumberText.replace('日', '');
				},

			buttonText: { //ボタンの文字
				today: '今月',
				month: '月',
				week: '週',
				list: 'リスト'
				},

			events: [ //予定の設定
<?php 
		//▽投稿記事を取得
			$schedule = array(
				'post_type' => 'schedule',
				'posts_per_page' => -1,	// 全件表示
				'paged' => $paged,
				'type' => 'DATE',
				);
			$schedule_post = get_posts($schedule);
			if($schedule_post) : foreach($schedule_post as $post) : setup_postdata( $post ); ?>

				{
					editable: 	false,
					title: 		'<?php echo get_the_title(); ?>',
					start: 		'<?php echo esc_html(get_post_meta($post->ID , "start_date" ,true)); ?>', 
					end: 		'<?php echo esc_html(get_post_meta($post->ID , "end_date" ,true)); ?>',	
					url: 		'<?php echo get_permalink(); ?>',
					
<?php 			//休日が選択されている時は色を付ける
				if ($schedule_categories = get_the_terms($post->ID, 'schedule_category')) {

						foreach ( $schedule_categories as $schedule_category ) {

							$term_slug = $schedule_category->slug;
							$term_name = $schedule_category->name;

							if( $term_slug == "closed" ){ ?>
					display: 	"background",
					color: 		"#ccc",
<?php 							} else {
									} //endif ?>
					cat_name: 	"<?php echo $term_name; ?>",
<?php 							}
						}
 ?>
					img: 		'<?php echo get_the_post_thumbnail_url(); ?>',

<?php 			//記事の概要
			if ( get_field('schedule_text') == true ) { ?>
					description: '<?php echo esc_html(get_post_meta($post->ID , "schedule_text" ,true)); ?>',
<?php 				} ?>

				},

<?php endforeach; ?>
			],

			eventClick: function(info) {
				info.jsEvent.preventDefault();

				if ($('#sample-dialog').css('display') != 'block') {
				// タイトルクリックによりパーマリンクに遷移
					$("#mesTitle").html("<a href=\"" + info.event.url + "\">" + info.event.title + "</a>\n");

					$(".dialog-title").html(info.event.cat_name);

				// 記事の概要を表示
					$("#description").html("<p>" + info.event.description + "</p>\n");

				// 画像クリックによりパーマリンクに遷移
					$("#eyecatchialog").html("<a href=\"" + info.event.url + "\">" + info.event.img + "</a>\n");

				// ダイアログの表示位置調整
				var leftPosition = (($(window).width() - 
					$("#sample-dialog").outerWidth(true)) / 2);
					//CSSを変更
					$("#sample-dialog").css({"left": leftPosition + "px"});

/*					$('#sample-dialog').css('left', info.clientX);
					$('#sample-dialog').css('top', info.clientY); */

				//ダイアログを表示する
					$("#sample-dialog").show(200);
					}
				},



		});

<?php endif;
 wp_reset_postdata(); ?>

		calendar.render();
	});

 //閉じるボタンで非表示
  $(".dialog-close").on("click", function(){
      $(this).parents(".dialog").hide(200);
  });

</script>

html
1		<div class="dialog" id="sample-dialog">
2			<div class="dialog-header">
3				<span class="dialog-title"></span>
4				<button type="button" class="dialog-close">閉じる☓</button>
5			</div>
6
7			<div class="dialog-content">
8				<p id="mesTitle"></p>
9				<div id="description"></div>
10				<div id="eyecatchialog"></div>
11			</div>
12		</div>
13
14		<div id="calendar"></div>

css
1.dialog {
2  overflow: hidden;
3  position: fixed;
4  top: 30%;
5  height: auto;
6  width: 350px;
7  display: none;
8  border:1px solid #aaa;
9  z-index:99;
10}
11.dialog-header {
12  border: 1px solid #aaa;
13  background: #cccccc;
14  color: #222222;
15  font-weight: bold;
16  overflow: hidden;
17  padding:5px;
18}
19.dialog-title {
20  float: left;
21}
22.dialog-close {
23  float: right;
24  border: 1px solid #d3d3d3;
25  background: #e6e6e6;
26  font-weight: normal;
27  color: #555555;
28}
29.dialog-content {
30  position: relative;
31  border: 0;
32  padding: .5em 1em;
33  background: #fff;
34  overflow: auto;
35  width: auto;
36  height: auto;
37}
38#eyecatchialog {
39
40  margin-left: 10px;
41}
42.dialog-title {
43  background: #555;
44  color: white;
45  line-height: 1.5em;
46  margin: 5px;
47  padding: 5px;
48}

参考

ダイアログの表示方法はほぼこちらの記事のものを使用しています。
https://www.codingstock.jp/wordpress-fullcalendar/

ご教示の程、宜しくお願い致します。

行動規範の内容に同意します

回答1件

※直接の解決策ではないです。

大前提として、PHPはサーバーサイドの言語なので、ブラウザが画面を表示した際には既に処理を終えています。
JavaScriptのイベントのところに書いたからってそのタイミングで実行してくれるわけではありません。
画面表示した際には既に全て終わった後です。

例えば「ボタンクリックしたときに実行させたい」のでしたら、Formリクエストを送るか、Ajaxなど非同期で実行する必要があります。
今回必要なのはおそらく後者。
取得したい情報だけをJSON形式で返して一つ一つJavaScriptでセットするか、「表示したいHTML部分だけ」を返してそのままセットするかのいずれかです。

※HTML側にdata属性などでデータ持たせておいて要素名と紐づけてクリック時に取得することもなくはないですが、最新の情報ではないので非推奨

投稿2021/10/01 23:33