สอบถาม เรื่อง fullcalendar อยากให้แสดงข้อความแบเต็มและให้แสดงเวลากรณีเก็บวันที่กับเวลาแยกจากกัน

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถาม เรื่อง fullcalendar อยากให้แสดงข้อความแบเต็มและให้แสดงเวลากรณีเก็บวันที่กับเวลาแยกจากกัน

<?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);    
include_once("connectdb.php");
//include("../connectdb.php"); // เรียกใช้งานไฟล์เชื่อมต่อกับฐานข้อมูล
//$mysqli = connect(); // เชื่อมต่อกับฐานข้อมูล    
if($_GET['gData']){  
    $q="SELECT * FROM meeting_list WHERE date(strdate)>='".$_GET['start']."'  ";  
    $q.=" AND date(enddate)<='".$_GET['end']."' ORDER by id";  
    $result = $conn->query($q);
    while($rs=$result->fetch_object()){
        $bgColor=null;
        if($rs->room_type==1){
            $bgColor="#FF0099";
        }elseif($rs->room_type==2){
            $bgColor="#006600";
        }else{
            $bgColor="#3300FF";
        }
        $json_data[]=array(  
            "id"=>$rs->id,
            "title"=>$rs->name,
            "start"=>$rs->strdate,
            "end"=>$rs->enddate,
            "url"=>$rs->event_url,
            "color"=>$bgColor,
          //  "allDay"=>($rs->event_allDay==true)?true:false      
            // กำหนด event object property อื่นๆ ที่ต้องการ
        );    
    }  
}
$json_data=(isset($json_data))?$json_data:NULL;
$json= json_encode($json_data);  
if(isset($_GET['callback']) && $_GET['callback']!=""){  
echo $_GET['callback']."(".$json.");";      
}else{  
echo $json;  
}  
?>

Akrit 27-02-2020 15:22:28

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

ความคิดเห็นที่ 1

ถ้าแสดงปฏิทินในรูปแบบเดือน ข้อจำกัดของพื้นที่แสดงข้อมูล

ไม่น่าจะสามารถแสดงข้อความหัวเรื่องได้เต็ม แต่ถ้าแสดงในรูปแบบสัปดาห์ ก็พอสามารถ

แสดงรายละเอียดหัวข้อได้เต็ม ถ้าไม่มีกิจกรรมอื่นในเวลาใกล้เคียงหรือคาบเกี่ยว

อีกแนวทาง คือใช้เป็น popup เมื่อเมาส์ชี้ไปที่กิจกรรม หรือวันที่นั้นๆ ในปฏิทิน แล้วแสดง

รายการข้อมูลกิจกรรมทั้งหมดเป็นรายการๆ ต้องประยุกต์การใช้งาน Ajax เพิ่มเติม

หรืออีกวิธีใช้ tooltip ตามตัวอย่าง eventRender

หรือถ้าเป็น เวอร์ชั่น 3 ก็ประมาณโค้ดด้านล่าง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fullcalendar 1</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.print.css" media='print' />    
<!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">      -->
    <link rel="stylesheet" href="https://www.ninenik.com/demo/fullcalendar/3.6.2/fullcalendar-3.6.2/fullcalendar.min.css">
    <style type="text/css">
    #calendar{
        max-width: 700px;
        margin: 0 auto;
        font-size:13px;
    }        
    </style>
</head>
<body>
<style>
 
  /*
 สร้างเป็น css ไฟล์ แล้ว เรียกใช้งาน 
  */
 
  .popper,
  .tooltip {
    position: absolute;
    z-index: 9999;
    background: #FFC107;
    color: black;
    width: 150px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    padding: 10px;
    text-align: center;
  }
  .style5 .tooltip {
    background: #1E252B;
    color: #FFFFFF;
    max-width: 200px;
    width: auto;
    font-size: .8rem;
    padding: .5em 1em;
  }
  .popper .popper__arrow,
  .tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
  }
 
  .tooltip .tooltip-arrow,
  .popper .popper__arrow {
    border-color: #FFC107;
  }
  .style5 .tooltip .tooltip-arrow {
    border-color: #1E252B;
  }
  .popper[x-placement^="top"],
  .tooltip[x-placement^="top"] {
    margin-bottom: 5px;
  }
  .popper[x-placement^="top"] .popper__arrow,
  .tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .popper[x-placement^="bottom"],
  .tooltip[x-placement^="bottom"] {
    margin-top: 5px;
  }
  .tooltip[x-placement^="bottom"] .tooltip-arrow,
  .popper[x-placement^="bottom"] .popper__arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .tooltip[x-placement^="right"],
  .popper[x-placement^="right"] {
    margin-left: 5px;
  }
  .popper[x-placement^="right"] .popper__arrow,
  .tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }
  .popper[x-placement^="left"],
  .tooltip[x-placement^="left"] {
    margin-right: 5px;
  }
  .popper[x-placement^="left"] .popper__arrow,
  .tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }
 
</style> 
 
<br><br>
<div style="margin:auto;width:750px;">
<div class="form-group form-inline text-center">
<input type="date" name="gotodate" id="gotodate" class="form-control">
<input type="text" name="keyword" id="keyword" value="" placeholder="type word to search" class="form-control">
<input type="button" name="bt_search" id="bt_search" value="Search" class="btn btn-primary">
</div>
<br>
 <div id='calendar'></div>
 </div>
   
     
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script type="text/javascript" src="https://www.ninenik.com/demo/fullcalendar/3.6.2/fullcalendar-3.6.2/lib/moment.min.js"></script>
<script type="text/javascript" src="https://www.ninenik.com/demo/fullcalendar/3.6.2/fullcalendar-3.6.2/fullcalendar.min.js"></script>
<script type="text/javascript" src="https://www.ninenik.com/demo/fullcalendar/3.6.2/fullcalendar-3.6.2/locale/th.js"></script>
<!-- <script type="text/javascript" src="script-3.6.2.js"></script>     -->
 
<script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>
 
<script type="text/javascript">  
$(function(){
 
    // สร้่างตัวแปร เพื่อไว้อ้างอิงเรียกใช้งาน fullcalendar
    var fullCarlendarObj;
  
    //  เก็บค่า 
    fullCarlendarObj = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',  //  prevYear nextYea
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
        },  
        buttonIcons:{
            prev: 'left-single-arrow',
            next: 'right-single-arrow',
            prevYear: 'left-double-arrow',
            nextYear: 'right-double-arrow'       
        },       
        events: {
            url: 'data_event.php',
            data: function(){
                return {
                    keyword: $("#keyword").val()
                }
            },
            error: function() {
   
            }
        },   
        eventAfterRender: function( event, element, view ) {  // ปรับแต่ง ลิ้งค์ให้เปิดหน้าต่างใหม่]
            console.log(event);
            console.log(element);
            console.log(view);
            $("a.fc-event").attr("target","_blank");
        },			
        eventRender: function(info,$el) {
            var tooltip = new Tooltip($el, {
              title: info.title,
              placement: 'top',
              trigger: 'hover',
              container: 'body'
            });         
        },
        eventLimit:true,
        lang: 'th'                                            
    });
     
 
    // เมื่อคลิกที่ปุ่มค้นหา
    $("#bt_search").on("click",function(){
        var gotoDate = $("#gotodate").val();
//      var gotoDate = '2020-04-01';
        if(gotoDate !=""){
            fullCarlendarObj.fullCalendar( 'gotoDate', new Date(gotoDate)); // เปลี่ยนปฏิทินไปเดือนที่ต้องการ   
        }
        fullCarlendarObj.fullCalendar( 'refetchEvents' ) // ให้ทำการดึงกิจกรรมจากไฟล์ data_events.php ใหม่      
    });  
     
    // ส่วนของการกำหนดวันที่เริ่มต้น
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); 
    var yyyy = today.getFullYear(); 
     
    var todayDate = yyyy + '-' + mm + '-' + dd;
     
    $("#gotodate").val(todayDate);
     
     
});        
</script>
</body>
</html>

ส่วนกรณีวันที่ และเวลาแยกกัน ให้ใช้วิธีสร้างตัวแปร รวมวันที่และเวลา แล้วจัดในรูปแบบวันที่

ที่ถูกต้องมาตรฐาน จากนั้นค่อยนำไปกำหนดตอนเรียกใช้

		 //  สมมติ 2020-02-27 กับ 12:00:01
		$startDate = $rs->strdate." ".$rs->strtime; //  "2020-02-27 12:00:01"
		// หรือใช้รูปแบบ 
//		$startDate = "2020-02-27 12:14";
//		$date_a = date("Y-m-d H:i:s",strtotime($startDate));		
        $json_data[]=array(  
            "id"=>$rs->id,
            "title"=>$rs->name,
            "start"=>$startDate, // นำมาใช้งาน
            "end"=>$rs->enddate,
            "url"=>$rs->event_url,
            "color"=>$bgColor,
          //  "allDay"=>($rs->event_allDay==true)?true:false      
            // กำหนด event object property อื่นๆ ที่ต้องการ
        );

ตัวอย่าง DEMO

บทความแนะนำที่เกี่ยวข้อง
แนวทางการค้นหาข้อมูลกิจกรรมในฐานข้อมูล ประยุกต์กับ fullcalendar	อ่าน 13,266

ninenik 27-02-2020

ความคิดเห็นที่ 2

ขอบคุณมากครับเดี่ยวผมลองทำดู
ได้ผลยังไงเดี่ยวมาแจ้งครับ

akrit 28-02-2020 09:10

ความคิดเห็นที่ 3

$startDate = $rs->strdate." ".$rs->strtime;

// 



เพิ่มไปแล้วไม่แสดงผลครับ

akrit 28-02-2020 09:21

ความคิดเห็นที่ 4

แสดงเวลาได้เเล้วครับ แต่อยากให้แสดงเวลาเริ่มต้นและจบด้วยครับ
ผมลองแก้ไฟล์ fullcalendar.js ตามนี้ https://www.ninenik.com/forum_view_2332_1.html
มันไม่ได้ ของผมเป็น V.3.6

akrit 28-02-2020 09:31

ความคิดเห็นที่ 5

ใช้วิธีจัดรูปแบบ แสดงข้อมูลในขั้นตอนการ render แทนการใช้งานรูปแบบเดิม เพิ่มประมาณนี้เข้าไป

eventRender: function(info,$el) {
	var startDate = new Date(info.start._i);
	var _H_start = (startDate.getHours() >= 10)?startDate.getHours():"0" startDate.getHours();
	var _i_start = (startDate.getMinutes() >= 10)?startDate.getMinutes():"0" startDate.getMinutes();
	var dataDateString = "";
	if($($el).find(".fc-time").length > 0){ // ถ้ามีการแสดงเวลา
		if(info.end !== null){ // มีเวลาสิ้นสุด
			var endDate = new Date(info.end._i);
			var _H_end = (endDate.getHours() >= 10)?endDate.getHours():"0" endDate.getHours();
			var _i_end = (endDate.getMinutes() >= 10)?endDate.getMinutes():"0" endDate.getMinutes();
			dataDateString = _H_start+":"+_i_start+"-"+_H_end+":"+_i_end+" น"; // จัดรูปแบบเวลาที่จะแสดง
			$($el).find(".fc-time").text(dataDateString);
		}else{
			dataDateString = _H_start+":"+_i_start+"-"+_H_start+":"+_i_start+" น"; // จัดรูปแบบเวลาที่จะแสดง
			$($el).find(".fc-time").text(dataDateString);
		}
	}
	var tooltip = new Tooltip($el, {
	  title: dataDateString+" "+info.title,
	  placement: 'top',
	  trigger: 'hover',
	  container: 'body'
	});
},

จัดรูปแบบตามต้องการ ผลลัพธ์ก็จะประมาณรูปด้านล่าง แต่อย่าลืมว่า หากมีการใช้งานเวลา ในข้อมูลต้องมีกำหนดเวลาด้วย

ถึงจะแสดงในปฏิทิน

บทความแนะนำที่เกี่ยวข้อง
ทบทวน วันที่ date object ใน javascript	อ่าน 17,408
แนวทางการค้นหาข้อมูลกิจกรรมในฐานข้อมูล ประยุกต์กับ fullcalendar	อ่าน 13,266

ninenik 02-03-2020

ความคิดเห็นที่ 6

ขอบคุณมากครับ เดี่ยวผมลองทำดุ

akrit 09-03-2020 15:47

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

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

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