สอบถาม เรื่อง 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 ก็ประมาณโค้ดด้านล่าง

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

<!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,631

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,645
แนวทางการค้นหาข้อมูลกิจกรรมในฐานข้อมูล ประยุกต์กับ fullcalendar	อ่าน 13,631

ninenik 02-03-2020

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

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

akrit 09-03-2020 15:47

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

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

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