จากบทความ แนวทางการค้นหากิจกรรม

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

จากบทความ แนวทางการค้นหากิจกรรม

แนวทางการค้นหาข้อมูลกิจกรรมในฐานข้อมูล_ประยุกต์กับ_fullcalendar-721.html

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

Takabe 18-02-2020 11:06:27

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

รูปแบบการทำงาน ตามเนื้อหาบทความ คือ เลื่อนปฏิทินไปยังเดือนที่ต้องการ จากนั้นส่งคำค้นหาไป
เพราะรูปแบบการแสดงของปฏิทิน จะแสดงเป็นข้อมูลของช่วงเดือนได้แค่เดือนเดียว

แต่ถ้าเราต้องการ ให้สามารถเลือกเดือน พร้อมกับ กำหนดข้อความที่ต้องการค้นได้ด้วย
ให้เพิ่ม ส่วนของการเลือกเดือนเข้าไป สมมติเช่น ใช้ input date

<div class="form-group form-inline text-center">
<input type="date" name="gotodate" id="gotodate">
<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>

เมื่อทำการค้นหา ให้เราทำการเปลี่ยนปฏิทิน ไปยังเดือนที่เลือก โดยใช้ method หรือคำสั่ง gotoDate
และแสดงข้อมูลที่ค้นหา (ถ้ามี)
แนวทางเช่น

    // เมื่อคลิกที่ปุ่มค้นหา
    $("#bt_search").on("click",function(){
		var gotoDate = $("#gotodate").val();
//		var gotoDate = '2020-04-01';
		fullCarlendarObj.fullCalendar( 'gotoDate', new Date(gotoDate)); // เปลี่ยนปฏิทินไปเดือนที่ต้องการ
        fullCarlendarObj.fullCalendar( 'refetchEvents' ) // ให้ทำการดึงกิจกรรมจากไฟล์ data_events.php ใหม่      
    });

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

ninenik 18-02-2020

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

ลองแล้วครับ ค้นหาแล้วก็ไม่ไปตามเดือน var gotoDate = '2020-04-01';
ข้อมูลก็มีในวันที่ 2020-04-01 ครับ

	// เมื่อคลิกที่ปุ่มค้นหา

	    $("#bt_search").on("click",function(){

	       // var gotoDate = $("#gotodate").val();

	      var gotoDate = '2020-04-01';

	        fullCarlendarObj.fullCalendar( 'gotoDate', new Date(gotoDate)); // เปลี่ยนปฏิทินไปเดือนที่ต้องการ

	        fullCarlendarObj.fullCalendar( 'refetchEvents' ) // ให้ทำการดึงกิจกรรมจากไฟล์ data_events.php ใหม่      

});

takabe 19-02-2020 15:02

ความคิดเห็นที่ 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>

<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 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 ) {  // ปรับแต่ง ลิ้งค์ให้เปิดหน้าต่างใหม่]
			$("a.fc-event").attr("target","_blank");
		},
        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>

ตัวอย่าง DEMO

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

ninenik 19-02-2020

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

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

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