การแสดงข้อมูลเพิ่มเติม ใน fullcalendar อัพเดทปี 2020 ตอนที่ 5

08 June 2020 เขียนเมื่อ 4 ปีก่อน โดย Ninenik Narkdee

แสดง modal modal fullcalendar

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ แสดง modal modal fullcalendar

ดูแล้ว 10,509 ครั้ง

จากเนื้อหาในตอนที่ 4 เราได้ให้แนวทางการสร้าง และ

บันทึกข้อมูลกิจกรรมลงในฐานข้อมูล และได้พูดถึงการ

กำหนดฟิลด์พิเศษเพิ่มเติม ในกรณืที่เราต้องการให้

กิจกรรมนั้น มีรายละเอียดเพิ่มเติม หรือมีฟิลด์ข้อมูลนอกเหนือ

จากฟิลด์ข้อมูลหลักแล้ว ทบทวนตอนที่แล้วได้ที่

บักทึก และสร้าง event ใน fullcalendar อัพเดทปี 2020 ตอนที่ 4 http://niik.in/977

https://www.ninenik.com/content.php?arti_id=977 via @ninenik

เนื้อหาตอนต่อไปนี้ เราจะให้แนวทาง การใช้งานข้อมูลเพิ่มเติมนั้น โดยจะประยุกต์ใช้งานกับ

modal ของ bootstrap เพื่อแสดงรายละเอียดของกิจกรรมเพิ่มเติม เมื่อคลิกที่ กิจกรรมนั้นๆ

ในปฏิทินกิจกรรม ทำตามแนวทางต่อไปนี้ตามลำดับ

การใช้งานฟิลด์เพิ่มเติมในไฟล์ json

จะขอยกโครงสร้าง ไฟล์ events.php จากตอนที่แล้วมาประกอบการอธิบาย

ไฟล์ events.php

<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
 require_once("dbconnect.php");
$json_data = array();

$sql ="
SELECT * FROM tbl_event WHERE event_startdate>='".$_GET['start']."' 
AND event_enddate<='".$_GET['end']."'
";
$result = $mysqli->query($sql);
if(isset($result) && $result->num_rows>0){
	while($row = $result->fetch_assoc()){
		$_start_date = $row['event_startdate'];
		$_end_date = false;
		$_start_time = false;
		$_end_time = false;
		$_repeat_day = false;
		$_all_day = ($row['event_allday']!=0)?true:false;
		if($row['event_starttime']!="00:00:00"){
			$_start_date = $row['event_startdate']."T".$row['event_starttime'];
			if($row['event_endtime']!="00:00:00" && ($row['event_starttime']==$row['event_enddate'] || 
			$row['event_enddate']=="0000-00-00") ){
				$_end_date = $row['event_startdate']."T".$row['event_endtime'];
			}
		}
		if($row['event_enddate']!="0000-00-00"){
			$_end_date = $row['event_enddate'];
			if($row['event_endtime']!="00:00:00"){
				$_end_date = $row['event_enddate']."T".$row['event_endtime'];
			}else{
				$_end_date = date("Y-m-d",strtotime($row['event_enddate']." +1 day"));
			}
		}
		if($row['event_enddate']!="0000-00-00" && $row['event_enddate']!=$row['event_startdate'] 
		&& $row['event_starttime']!="00:00:00" && $row['event_endtime']!="00:00:00" ){
			$_start_date = $row['event_startdate'];
			$_end_date = $row['event_enddate'];				
			$_start_time = $row['event_starttime'];
			$_end_time = $row['event_endtime'];		
			$_all_day = false;			
		}
		// ทำการเปลี่ยน หรือกำหนดการใช้งาน url หรือลิ้งค์ เป็นการเรียกใช้งาน javascript ฟังก์ชั่น
		$row['event_url'] = "javascript:viewdetail('{$row['event_id']}');"; // ส่งค่า id ไปในฟังก์ชั่น
		$arr_eventData = array(
			"id" => $row['event_id'],
			"groupId" => str_replace("-","",$row['event_startdate']),
			"allDay" => $_all_day,
			"start" => $_start_date,
			"end" => $_end_date,
			"startTime" => $_start_time,
			"endTime" => $_end_time,
			"title" => $row['event_title'],
			"url" => $row['event_url'],
			"textColor" => $row['event_color'],
			"backgroundColor" => $row['event_bgcolor'],
			"borderColor" => "transparent",
			"detail" => $row['event_detail'],// กำหนดฟิลด์เพิ่มเติมที่จะใช้งานข้อมูล
		);
		if($row['event_repeatday']!=""){
			$arr_eventData['daysOfWeek'] = explode(",",$row['event_repeatday']);
		}				
		if($row['event_enddate']!="0000-00-00" && $row['event_enddate']!=$row['event_startdate'] 
		&& $row['event_starttime']!="00:00:00" && $row['event_endtime']!="00:00:00" ){
			$arr_eventData['startRecur'] = $_start_date;
			$_end_date = date("Y-m-d",strtotime($row['event_enddate']." +1 day"));
			$arr_eventData['endRecur'] = $_end_date;
		}
		if(!$_all_day){unset($arr_eventData['allDay']);}
		if(!$_end_date){unset($arr_eventData['end']);}
		if(!$_start_time){unset($arr_eventData['startTime']);}
		if(!$_end_time){unset($arr_eventData['endTime']);}
		$json_data[] = $arr_eventData;
	}
}
// แปลง array เป็นรูปแบบ json string  
if(isset($json_data)){  
    $json= json_encode($json_data);    
    if(isset($_GET['callback']) && $_GET['callback']!=""){    
    echo $_GET['callback']."(".$json.");";        
    }else{    
    echo $json;    
    }    
}
?>

ดูบรรทัดที่เราได้ทำการเพิ่ม ตามที่ได้ highlight ไว้ 45 46 60

หากเป็นแนวทางอย่างง่าย ในการแสดงข้อมูลเพิ่มเติม เราก็แค่อาจจะใส่ลิ้งค์ หรือกำหนด url เป็นไฟล์ข้อมูลใหม่ โดยส่ง

event_id แล้วไปทำการคิวรี่แสดงข้อมูลก็ได้ เช่น เรากำหนด url เป็นดังนี้

$row['event_url'] = "http://www.mywebsite.com/viewevent.php?id=".$row['event_id'];

แล้วใช้ไฟล์หน้า viewevent.php คิวรี่ดึงข้อมูลจาก event ของ id นั้นมาแสดง

แต่ในที่นี้ เราจะทำการแสดงข้อมูลในหน้าเดียวกับปฏิทิน จึงใช้วิธีเรียกใช้งาน คำสั่ง javascript ชื่อฟังก์ชั่นว่า viewdetail()

$row['event_url'] = "javascript:viewdetail('{$row['event_id']}');"; // ส่งค่า id ไปในฟังก์ชั่น

ซึ่งเราจะต้องไปสร้างฟังก์ชั่นนี้ในไฟล์ที่เรียกใช้งาน fullcalendar ในฟังก์ชั่น เราทำการส่งค่า event_id เข้าไป เพื่อใช้สำหรับ

ดึงข้อมูลกิจกรรมมาแสดงอีกที

นอกจากกำหนดในส่วนของ url แล้ว เราก็มีการกำหนด property เพิ่มเติม ซึ่งจะเพิ่มกี่ property ก็ได้ ในที่นี้เราเพิ่มมาแค่

อันเดียวเป็นแนวทาง ชื่อว่า detail โดยใช้ข้อมูลจากฐานข้อมูลที่เราเพิ่มในตอนต้นชื่อฟิลด์ว่า event_detail ข้อมูลส่วนนี้ จะเป็น

รายละเอียดเพิ่มเติมที่แราจะแสดงใน modal

การแสดงข้อมูลเพิ่มเติมของ fullcalendar ใน modal

ก่อนไปดูการเพิ่มโค้ดเพิ่มเติม เพื่อแสดงข้อมูล modal จะขอยกโค้ดไฟล์ ตัวอย่าง ในบทความก่อนหน้าก่อนปรับแต่ง

มาอธิบายเพิ่มเติมดังนี้

ไฟล์ demo.php

<?php
$fullcalendar_path = "fullcalendar-4.4.2/packages/";
?>
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />

    <link href='<?=$fullcalendar_path?>/core/main.css' rel='stylesheet' />
    <link href='<?=$fullcalendar_path?>/daygrid/main.css' rel='stylesheet' />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<!--	  ส่วนที่เพิ่มเข้ามาใหม่-->	  
    <link href='<?=$fullcalendar_path?>/timegrid/main.css' rel='stylesheet' />
	<link href='<?=$fullcalendar_path?>/list/main.css' rel='stylesheet' />

    <script src='<?=$fullcalendar_path?>/core/main.js'></script>
    <script src='<?=$fullcalendar_path?>/daygrid/main.js'></script>
<!--	  ส่วนที่เพิ่มเข้ามาใหม่-->
    <script src='<?=$fullcalendar_path?>/core/locales/th.js'></script>
    <script src='<?=$fullcalendar_path?>/timegrid/main.js'></script>
    <script src='<?=$fullcalendar_path?>/interaction/main.js'></script>
    <script src='<?=$fullcalendar_path?>/list/main.js'></script>	  
	  

	 <style type="text/css">
		 #calendar{
			 width: 800px;margin: auto;
		 }
	  </style>

  </head>
  <body>

    <div id='calendar'></div>
	  
	  <script  src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
			  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" 
			  crossorigin="anonymous"></script>
	 <script type="text/javascript">
	  $(function(){
		  // กำหนด element ที่จะแสดงปฏิทิน
        var calendarEl = $("#calendar")[0];

		  // กำหนดการตั้งค่า
        var calendar = new FullCalendar.Calendar(calendarEl, {
			plugins: [ 'interaction','dayGrid', 'timeGrid', 'list' ], // plugin ที่เราจะใช้งาน
			defaultView: 'dayGridMonth', // ค้าเริ่มร้นเมื่อโหลดแสดงปฏิทิน
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
			},	
			events: { // เรียกใช้งาน event จาก json ไฟล์ ที่สร้างด้วย php
				url: 'events.php?gData=1',
				error: function() {

				}
			},    			
			eventLimit: true, // allow "more" link when too many events
			locale: 'th',	 // กำหนดให้แสดงภาษาไทย
			firstDay: 0, // กำหนดวันแรกในปฏิทินเป็นวันอาทิตย์ 0 เป็นวันจันทร์ 1
			showNonCurrentDates: false, // แสดงที่ของเดือนอื่นหรือไม่
			eventTimeFormat: { // รูปแบบการแสดงของเวลา เช่น '14:30' 
				hour: '2-digit',
				minute: '2-digit',
				meridiem: false
			}
        });
		 
		 // แสดงปฏิทิน 
		calendar.render();  
		  
	  });
	  </script> 
  
	  
  </body>
</html>

สิ่งที่เราจะจัดการก็คือ เรียกใช้ css และ js ไฟล์ของ bootstrap เพราะเราจะมีการใช้งาน modal เป็น component หนึ่งของ

boostrap และจำเป็นต้องใช้งาน bootstrap js ด้วย

ต่อด้วยย้ายการประกาศตัวแปรที่เป้น instant ของ fullcalendar ที่ชื่อ calendar ให้มาอยู่ด้านนอก ขอบเขตของ jquery เพื่อให้

สามารถเรียกใช้งานหน้าเว็บได้ทุกส่วน จะอธิบายต่อด้านล่าง

ต่อด้วยกำหนด modal component หรือ โครงสร้าง html ของ modal ที่เราจะใช้งาน หลักๆ จะเน้นไปที่กำหนดกำหนด id ให้กับ

ส่วนที่เราจะแสดงข้อมูล ก็จะมี id ของ modal , id ของหัวข้อ และ id ของรายละเอียด เพิ่มเติมได้ตามต้องการ

และส่วนสุดท้ายก็คือ ฟังก์ชั่น javascript ที่ชื่อ viewdetail() ฟังก์ชั่นนี้จะรับค่า id มา เราจะเอา id นี้ไปดึงข้อมูลจาก calendar

ผ่าน api แล้วนำมาแสดงใน modal

ดูโค้ดที่มีการปรับใช้งานแล้วได้ดังต่อไปนี้

<?php
$fullcalendar_path = "fullcalendar-4.4.2/packages/";
?>
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />

    <link href='<?=$fullcalendar_path?>/core/main.css' rel='stylesheet' />
    <link href='<?=$fullcalendar_path?>/daygrid/main.css' rel='stylesheet' />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<!--	  ส่วนที่เพิ่มเข้ามาใหม่-->	  
    <link href='<?=$fullcalendar_path?>/timegrid/main.css' rel='stylesheet' />
	<link href='<?=$fullcalendar_path?>/list/main.css' rel='stylesheet' />

    <script src='<?=$fullcalendar_path?>/core/main.js'></script>
    <script src='<?=$fullcalendar_path?>/daygrid/main.js'></script>
<!--	  ส่วนที่เพิ่มเข้ามาใหม่-->
    <script src='<?=$fullcalendar_path?>/core/locales/th.js'></script>
    <script src='<?=$fullcalendar_path?>/timegrid/main.js'></script>
    <script src='<?=$fullcalendar_path?>/interaction/main.js'></script>
    <script src='<?=$fullcalendar_path?>/list/main.js'></script>	  
	  

	 <style type="text/css">
		 #calendar{
			 width: 800px;margin: auto;
		 }
	  </style>

  </head>
  <body>

    <div id='calendar'></div>
<!-- Modal -->
<div class="modal fade" id="calendarmodal" tabindex="-1" role="dialog" > <!--กำหนด id ให้กับ modal-->
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="calendarmodal-title">Modal title</h5> <!--กำหนด id ให้ส่วนหัวข้อ-->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"  id="calendarmodal-detail"> ก<!--ำหนด id ให้ส่วนรายละเอียด-->
		Modal detail
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
	  

	  <script  src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
			  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" 
			  crossorigin="anonymous"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
	 <script type="text/javascript">
      var calendar; // สร้างตัวแปรไว้ด้านนอก เพื่อให้สามารถอ้างอิงแบบ global ได้
	  $(function(){
		  // กำหนด element ที่จะแสดงปฏิทิน
        var calendarEl = $("#calendar")[0];

		  // กำหนดการตั้งค่า
        calendar = new FullCalendar.Calendar(calendarEl, {
			plugins: [ 'interaction','dayGrid', 'timeGrid', 'list' ], // plugin ที่เราจะใช้งาน
			defaultView: 'dayGridMonth', // ค้าเริ่มร้นเมื่อโหลดแสดงปฏิทิน
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
			},	
			events: { // เรียกใช้งาน event จาก json ไฟล์ ที่สร้างด้วย php
				url: 'events.php?gData=1',
				error: function() {

				}
			},    			
			eventLimit: true, // allow "more" link when too many events
			locale: 'th',	 // กำหนดให้แสดงภาษาไทย
			firstDay: 0, // กำหนดวันแรกในปฏิทินเป็นวันอาทิตย์ 0 เป็นวันจันทร์ 1
			showNonCurrentDates: false, // แสดงที่ของเดือนอื่นหรือไม่
			eventTimeFormat: { // รูปแบบการแสดงของเวลา เช่น '14:30' 
				hour: '2-digit',
				minute: '2-digit',
				meridiem: false
			}
        });
		 
		 // แสดงปฏิทิน 
		calendar.render();  
		  
	  });
	  </script> 
	  <script type="text/javascript">
	  function viewdetail(id){
		  // ก่อนที่ modal จะแสดง
			$('#calendarmodal').on('show.bs.modal', function (e) {
				var event = calendar.getEventById(id) // ดึงข้อมูล ผ่าน api
			   $("#calendarmodal-title").html(event.title);
				$("#calendarmodal-detail").html(event.extendedProps.detail);// ข้อมูลเพิ่มเติมจะเรียกผ่าน extendedProps
			});		  		 
		  	$("#calendarmodal").modal();// แสดง modal
	  }
	  </script>
	  
	  
  </body>
</html>

บรรทัดที่ 11 และ 59 เราเรียกใช้งาน css และ js ของ bootstrap

บรรทัดที่ 61 เราประกาศตัวแปร calendar ไว้นอก jquery จากเดิมที่ประกาศ และกำหนดค่าทันทีด้านในขอบเขตของ jquery

ก็เปลี่ยนมาประกาศตัวแปรด้านนอกก่อน เพื่อให้เป็น global แล้วค่อยกำหนดค่าอีกทีด้านใน โดยมีมีคำว่า var ในบรรทัด 67

ตัวแปร calendar จะเป็นเหมือน instnant object หรือตัวแทนของ fullcalendar ที่เราจะอ้างอิงการใช้งาน

บรรทัดที่ 36 - 53 เป็นส่วนของการกำหนด modal component ในส่วนนี้ เรากได้กำหนดค่า id ต่าง เพื่อใช้อ้างอิงการแสดงค่า

ในบรรทัดที่ 36 40 และ 45 ข้อมูล Modal Title และ Modal detail จะถูกแทนที่ด้วยข้อมูลใหม่ เมื่อเราทำการโหลด modal

และสุดท้าย บรรทัดที่ 98 จนถึง 106 เราสร้างฟักง์ชั่นไว้ด้านนอกของ jquery เพื่อเรียกใช้งานจากการกดลิ้งค์ในปฏิทิน โดยส่งค่า

id ของ event เข้ามา โดยก่อนที่แสดง modal เราได้ทำการเรียก fullcalendar api ผ่านตัวแปร instant ที่ชื่อ calendar ตรงนี้จะเห็น

ว่าเพราะ ตัวแปร calendar เป้นแบบ global เราจึงสามารถเรียกใช้งานในนี้ได้ ตามเหตุผลที่พยายามอธิบายไปแล้วในตอนต้น

ตัว fullcalendar api มีคำสั่งที่ชื่อว่า getEventById ที่สามารถเรียกข้อมูล event object มาใช้งานได้ ซึ่งในที่นี้เราจะใช้แค่สองค่า

คือค่า title ซึ่งป็น property หลักของ event object อยู่แล้ว และอีกอันคือ detail

สำหรับ detail นั้นเป็น ค่า property เพิ่มเติมที่เรากำหนดเอง ดังนั้น เวลาอ้างอิงการเรียกใช้ จึงใช้เป็น event.extendedProps.detail

แทนที่จะเป้น event.detail แนวทางนี้ใช้กับ property เพิ่มเติมอื่นๆ ถ้ามี

เมื่อเราได้ค่า event.title และ event.extendedProps.detail ก็นำค่าทั้งสองนี้ไปแสดงใน modal ตามตำแหน่ง id ที่เรากำหนดไว้

และ เมื่อ modal โชว์ขึ้นมา ค่าต่างๆ ก็จะแสดงใน modal ตามที่เรากำหนดนั่นเอง

สามารถดู demo แนวทางผลลัพธ์ได้จากด้านล่าง โดยคลิกกิจกรรม ที่ต้องการแสดงข้อมูลเพิ่มเติม

เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-10-2020

การซ่อนเวลาในปฏิทิน Fullcalendar

เราสามารถซ่อนเวลาในปฏิทิน ที่มีรูปแบบ dayGridMonth โดยกำหนด

displayEventTime: false,

และถ้าต้องการกำหนดว่า ให้ซ่อนเวลา เฉพราะปฏิทินในรูปแบบ dayGridMonth เท่านั้น

ก็สามารถใช้ event ดักการทำงาน และกำหนดค่าได้

 // แสดงปฏิทิน 
calendar.render();  
// ซ่อนเวลาตามเงื่อนไขปฏิทินที่แสดง
calendar.on('viewSkeletonRender', function(info) {
  if(info.view.type == 'dayGridMonth'){
	calendar.setOption('displayEventTime', false);
  }else{
	calendar.setOption('displayEventTime', true);
  }
});

หรือใช้รูปแบบนี้แทนได้

calendar.on('viewSkeletonRender', function(info) {
  var timeStatus = true;
  if(info.view.type == 'dayGridMonth'){
    timeStatus = false;
  }
  setTimeout(function(){
       calendar.setOption('displayEventTime', timeStatus);
  },1);    
});

ดูตัวอย่างใน DEMO 2

เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 05-11-2020

โหลดเนื้อหากิจกรรม จากภายนอก

กรณีเราต้องการเปิดรายละเอียดเพิ่มเติมผ่าน modal และไม่ต้องการแทรกรายละเอียด

ทั้งหมดไว้ใน event ต้องการแค่ส่ง id หรือข้อมูลบางตัว แล้วเปิดไฟล์ ใหม่ ใน modal

สามารถใช้แนวทางนี้ได้

ส่วนของ modal body กำหนด iframe แทรกไปในลักษณะนี้

<div class="modal-body"  id="calendarmodal-detail"> ก<!--ำหนด id ให้ส่วนรายละเอียด-->
	<iframe name="event-box" frameborder="0" style="width:100%;border: none;height: 300px;" src=""></iframe>
</div>

ส่วนของไฟล์ events.php กำหนด url ให้เรียกใช้งาน javascript ฟังก์ชั่น ส่งค่า paramter ตามต้องการ

ในตัวอย่างส่งค่าแค่ id

$row['event_url'] = "javascript:viewdetail('{$row['event_id']}');"; // ส่งค่า id ไปในฟังก์ชั่น

ถ้าส่งหลายค่า เช่นอาจจะส่งวันที่มาด้วยก็กำหนดเป็นประมาณนี้

$row['event_url'] = "javascript:viewdetail('{$row['event_id']}','{$row['event_startdate']}');";

ต่อไปส่วนของแสดงรายละเอียด สมมติไฟล์รายละเอียดเพิ่มเติมเราชื่อ showdetail.php และรับค่า เพื่อดึงข้อมูล

จากตัวแปร GET สมมติส่งมาแค่ id ก็จะเป็น showdetail.php?event_id=xxx

เราจะได้วิธีการกำหนดในฟังก์ชั่น viewdetail(id) หรือ viewdetail(id,date) ประมาณนี้

<script type="text/javascript">
function viewdetail(id,date){
  // ก่อนที่ modal จะแสดง
	$('#calendarmodal').on('show.bs.modal', function (e) {
			$("iframe[name='event-box']").attr("src","show.php?id="+id+"&date="+date);
		});   
	});              
	$("#calendarmodal").modal();// แสดง modal
}
</script>

เพิ่มเติมเนื้อหา ครั้งที่ 3 วันที่ 05-11-2020

กรณีดึงข้อมูลจากภายนอกด้วย ajax สามารถใช้รูปแบบนี้ได้

ส่วนของ modal body

<div class="modal-body"  id="calendarmodal-detail"> ก<!--ำหนด id ให้ส่วนรายละเอียด-->

</div>

ส่วนของฟังก์ชั่น

<script type="text/javascript">
function viewdetail(id,date){
  // ก่อนที่ modal จะแสดง
	$('#calendarmodal').on('show.bs.modal', function (e) {
			$.get("show.php",{id:id,date:date},function(res){
				$("#calendarmodal-detail").html(res);
			});
		});   
	});              
	$("#calendarmodal").modal();// แสดง modal
}
</script>

หรือแบบนี้ก็ได้

<script type="text/javascript">
function viewdetail(id,date){
  // ก่อนที่ modal จะแสดง
	$('#calendarmodal').on('show.bs.modal', function (e) {
			$("#calendarmodal-detail").load("show.php?id="+id+"&date=+"+date);
		});   
	});              
	$("#calendarmodal").modal();// แสดง modal
}
</script>

เพิ่มเติมเนื้อหา ครั้งที่ 4 วันที่ 10-03-2021

กรณีต้องการกำหนดให้แสดงเวลาเริ่มต้นและเวลาสิ้นสุดในหน้าแสดงแบบเดือน

ให้กำหนดสองค่าเป็นดังนี้ แต่อย่าลืมว่า ข้อมูลในฐานข้อมูล จะต้องมีการกำหนดเวลาสิ้นสุดด้วย

ข้อมูลจึงจะแสดง

displayEventTime: true,
displayEventEnd: true,

ดูผลลัพธ์ที่ DEMO 3 ด้านล่าง

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

เนื้อหาที่เกี่ยวข้อง

03 Jun
2020

การสร้างปฏิทินกิจกรรม ด้วย fullcalendar อัพเดทปี 2020 ตอนที่ 1 อ่าน 15,590
เนื้อหานี้จะเป็นแนวทางการใช้งาน fullcalendar และเป็นการอัพเดท เนื้อหาเพร้
04 Jun
2020

การตั้งค่าปฏิทินกิจกรรม fullcalendar อัพเดทปี 2020 ตอนที่ 2 อ่าน 11,715
เนื้อหานี้เรามาดูการตั้งค่า ที่มักใช้งานบ่อย โดยเฉพาะภาษาไทย รวมถึง plugi
05 Jun
2020

รูปแบบกิจกรรม event ใน fullcalendar อัพเดทปี 2020 ตอนที่ 3 อ่าน 8,879
เนื้อหานี้เราจะมาดูรูปแบบ event หรือกิจกรรมรูปแบบต่างๆ ที่ใช้งานใน fullca
06 Jun
2020

บักทึก และสร้าง event ใน fullcalendar อัพเดทปี 2020 ตอนที่ 4 อ่าน 8,504
เมื่อเราได้รู้จักการเรียกใช้งาน การตั้งค่า และรูปแบบกิจกรรม ของ fullcalen
กำลังอ่านเนื้อหานี้อยู่

08 Jun
2020

การแสดงข้อมูลเพิ่มเติม ใน fullcalendar อัพเดทปี 2020 ตอนที่ 5 อ่าน 10,509
จากเนื้อหาในตอนที่ 4 เราได้ให้แนวทางการสร้าง และ บันทึกข้อมูลกิจกรรมลงในฐ

URL สำหรับอ้างอิง

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน