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

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

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

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


Takabe 18-02-2020 11:06:27

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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

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

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

1
2
3
4
5
<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
และแสดงข้อมูลที่ค้นหา (ถ้ามี) 
แนวทางเช่น

1
2
3
4
5
6
7
    // เมื่อคลิกที่ปุ่มค้นหา
    $("#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,631
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
ลองดูตัวอย่างโค้ดนี้ ประกอบกับเนื้อหาบทความ เป็นแนวทาง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!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,631
ninenik 19-02-2020
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ