Fullcalendar แสดงวันที่ที่กำหนดไม่ครบทำไงดีคะ เช่นลงไป3วัน จะแสดงแค่2วัน
ถ้าไม่ได้ระบุเวลา ค่า "allDay"=>true น่าจะต้องเป็น true ครับ
แต่ถ้ากำหนดเวลา ก็ xxxx-xx-xx 23:59:59
Date :
2020-10-20 14:46:30
By :
{Cyberman}
เก็บวันที่เป็นแบบไหนครับ
date_start - date_end
2020-10-01 - 2020-10-02
หรือ
date
1 2020-10-01
2 2020-10-02
3 2020-10-03
Date :
2020-10-20 14:47:34
By :
Pong Thep
เติมเวลาเข้าไปด้วย ตอนเอาไปใช้งานครับ
start: '2020-10-20T00:00:00 ',
end: '2020-10-22T23:59:59 '
https://jsfiddle.net/n7Ljbp6v/
Date :
2020-10-21 11:01:27
By :
{Cyberman}
วิเคราะห์ จากคห 5 ให้ดีครับ เขาเน้น นัยยะสำคัญไว้แล้ว
เช็คข้อมูลของตัวเองดูว่า ถูกต้องไหม type date หรือ datetime
ถ้าเวลา มี ชม นาที ก็ต้องเขียนใหครอบคุม ชม นาทีด้วย
ปล ตัวอย่าง
Code (SQL)
where fieldname >= '2020-09-01'
and fieldname < add_date('2020-09-03', interval 1 day)
ประวัติการแก้ไข 2020-10-21 14:46:41
Date :
2020-10-21 14:39:46
By :
Chaidhanan
ก็ต้องดู config ของ tools ที่ใช้สร้างปฏิทิน ครับ เขาให้กำหนดอะไรอย่างไร
Date :
2020-10-22 11:05:21
By :
Chaidhanan
บรรทัดที่ 7 ลืม ; ครับ
ถาม fullcalendar ไม่เอา fullcalendar มาดู
อย่างน้อยสมมติมาก็ได้ ถ้าไม่สะดวกเปิดเผย
ประวัติการแก้ไข 2020-10-22 11:23:27
Date :
2020-10-22 11:20:52
By :
PhrayaDev
<?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">
html,body{
maring:0;padding:0;
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
#calendar{
max-width: 800px;
margin: 0 auto;
font-size:13px;
}
</style>
</head>
<body>
<br>
<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">×</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: 'load.php',
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
}
});
33
// แสดงปฏิทิน
calendar.render();
});
</script>
<script type="text/javascript">
// ส่งค่า id ไปในฟังก์ชั่น
function detail_list(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>
<span class='iTooltip' id="infotooltip"></span>
<style type="text/css">
/* css สำหรับกำหนดรูปแบบของกล่องข้อความ Tooltip */
.iTooltip{
position:absolute;
border:1px solid #FFCC66;
background-color:#FFFFCC;
color:#000000;
display:none;
padding:5px;
/* width:200px;*/
font-size:12px;
z-index:90000;
}
</style>
</body>
</html>
อันนี้เป็นโค้ด fullcalendar ที่ลองทำค่ะ
Date :
2020-10-22 13:14:42
By :
natchaauk
ตอบความคิดเห็นที่ : 10 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-10-22 11:20:52
รายละเอียดของการตอบ ::
<?php
header('Access-Control-Allow-Origin: *');
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);
require_once("dbconnect.php");
$json_data = array();
$sql = "SELECT * FROM project WHERE StartDate>='".$_GET['start']."'
AND EndDate<='".$_GET['end']."'ORDER by ID";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
while($row = $result->fetch_assoc()){
$row['url'] = "javascript:detail_list('{$_GET['ID']}');";
$json_data[] = array(
'ID' => $row["ID"],
'title' => $row["name"],
'start' => $row["StartDate"],
'end' => $row["EndDate"],
'detail' => $row["detail"],
"url" => $row['url'],
"allDay"=>($row->allDay==true)?true:false
);
}
}
if(isset($json_data)){
$json= json_encode($json_data);
if(isset($_GET['callback']) && $_GET['callback']!=""){
echo $_GET['callback']."(".$json.");";
}else{
echo $json;
}
}
?>
อันนี้เป็น data_event ค่ะ
Date :
2020-10-22 13:30:16
By :
natchaauk
Code (PHP)
'end' => $row["EndDate"], // ตรงนี้ +1 วัน หรือ ใส่เวลา มาดูหน่อยครับ
ประวัติการแก้ไข 2020-10-22 13:51:54 2020-10-22 13:54:39
Date :
2020-10-22 13:50:33
By :
PhrayaDev
+1 วัน
Code (PHP)
if ($result && $result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$date = new DateTime($row["EndDate"]);
$date->modify('+1 day');
$endDate = $date->format('Y-m-d');
$row['url'] = "javascript:detail_list('{$_GET['ID']}');";
$json_data[] = array(
'ID' => $row["ID"],
'title' => $row["name"],
'start' => $row["StartDate"],
'end' => $endDate,
'detail' => $row["detail"],
"url" => $row['url'],
"allDay" => $row->allDay == true ? true : false
);
}
}
ส่วนการบวกเวลาก็ต่อ string ธรรมดา
Code (PHP)
'end' => $row["EndDate"] . "T23:59:59",
Date :
2020-10-22 15:42:00
By :
PhrayaDev
ถ้าเลือกวิธีใส่เวลา
allDay: false // ใน event
และ
displayEventTime: false // ใน Fullcalendar Constructor
Date :
2020-10-27 12:25:01
By :
PhrayaDev
Load balance : Server 00