การสร้างไฟล์ data_events.php จากฐานข้อมูล เพื่อกำหนด event object สำหรับใช้งาน
ใน fullcalendar สามารถทำได้ดังนี้
ไฟล์ dbconnect.php
<?php
$mysqli = new mysqli("localhost", "root","","test");
/* check connection */
if ($mysqli->connect_errno) {
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
if(!$mysqli->set_charset("utf8")) {
printf("Error loading character set utf8: %s\n", $mysqli->error);
exit();
}
ไฟล์ data_events.php
<?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();
if(isset($_GET['gData']) && $_GET['gData']!=""){
$sql = "
SELECT * FROM tbl_event WHERE date(event_start)>='".$_GET['start']."'
AND date(event_end)<='".$_GET['end']."' ORDER by event_id
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
while($row = $result->fetch_assoc()){
$json_data[] = array(
"id" => $row['event_id'],
"title" => $row['event_title'],
"start" => $row['event_start'],
"end" => $row['event_end'],
"url" => $row['event_url'],
"allDay" => ($row['event_allDay']==true)?true:false
// กำหนด event object property อื่นๆ ที่ต้องการ
);
}
}
}
// แปลง array เป็นรูปแบบ json string
if(isset($json_data)){
$json= json_encode($json_data);
if(isset($_GET['callback']) && $_GET['callback']!=""){
echo $_GET['callback']."(".$json.");";
}else{
echo $json;
}
}
?>
จากโค้ดข้างต้นเป็นการใช้งาน mysqli หากต้องการปรับใช้เป็น mysql แบบเก่า
สามารถปรับได้ง่าย ดังนี้
<?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);
$con_db=mysql_connect("localhost","root","test") or die("Cannot connect db server");
$select_db=mysql_select_db("test");
if($_GET['gData']){
$q="SELECT * FROM tbl_event WHERE date(event_start)>='".$_GET['start']."' ";
$q.=" AND date(event_end)<='".$_GET['end']."' ORDER by event_id";
$qr=@mysql_query($q);
while($rs=@mysql_fetch_object($qr)){
$json_data[]=array(
"id"=>$rs->event_id,
"title"=>$rs->event_title,
"start"=>$rs->event_start,
"end"=>$rs->event_end,
"url"=>$rs->event_url,
"allDay"=>($rs->event_allDay==true)?true:false
// กำหนด event object property อื่นๆ ที่ต้องการ
);
}
}
$json= json_encode($json_data);
if(isset($_GET['callback']) && $_GET['callback']!=""){
echo $_GET['callback']."(".$json.");";
}else{
echo $json;
}
?>
ดูเพิ่มเติมได้ที่บทความ
การใช้งาน fullcalendar v.2.1.1 กับฐานข้อมูล สร้างปฏิทินกิจกรรม
https://www.ninenik.com/content.php?arti_id=564 via @ninenik
ขอยกรูปแบบบางส่วนของการสร้างข้อความ json สำหรับ event object
มาอธิบาย เกี่ยวกับการกำหนดวันที่ และเวลาดังนี้
$json_data[]=array(
"id"=>$rs->event_id,
"title"=>$rs->event_title,
"start"=>$rs->event_start,
"end"=>$rs->event_end,
"url"=>$rs->event_url,
"allDay"=>($rs->event_allDay==true)?true:false
// กำหนด event object property อื่นๆ ที่ต้องการ
);
1. หากกิจกรรมนั้นเป็นกิจกรรมทั้งวัน หรือไม่ต้องการระบุเวลาแน่นอน แต่เข้าใจว่า
กิจกรรมนั้นจะมีขึ้นในระยะเวลาแค่วันเดียว เราสามารถกำหนด allDay ให้เท่ากับ true
และกำหนดวันที่ start เป็นวันดังกล่าว โดยจะกำหนดเวลาด้วยหรือไม่ก็ได้
และส่วนของ end จะกำหนดด้วยหรือไม่ก็ได้
ตัวอย่างรูปแบบการกำหนด
$json_data[]=array(
"id"=>$rs->event_id,
"title"=>$rs->event_title,
"start"=>"2014-10-10 00:00:00",
"end"=>"",
"allDay"=>true
// กำหนด event object property อื่นๆ ที่ต้องการ
);
2. หากกิจกรรมนั้นมีกำหนดการเวลาเริ่มต้น แต่ไม่ระบุเวลาสิ้นสุด โดยในปฏิทินจะมีการแสดง
เวลาเริ่มต้นกิจกรรมด้วย
ตัวอย่างรูปแบบการกำหนด
$json_data[]=array(
"id"=>$rs->event_id,
"title"=>$rs->event_title,
"start"=>"2014-10-10 13:30:00",
"end"=>"",
"allDay"=>false
// กำหนด event object property อื่นๆ ที่ต้องการ
);
3. หากกิจกรรมนั้น มีการกำหนดเวลาเริ่มต้น และเวลาสิ้นสุดที่แน่นอน การแสดง view แบบเดือน
ก็จะมีเวลาเริ่มต้นแสดงด้วย แต่จะไม่มีเวลาสิ้นสุด โดยเวลาสิ้นสุดกิจกรรม จะแสดงในหน้า view
แบบวัน หรือแบบสัปดาห์
ตัวอย่างรูปแบบการกำหนด
$json_data[]=array(
"id"=>$rs->event_id,
"title"=>$rs->event_title,
"start"=>"2014-10-10 13:30:00",
"end"=>"2014-10-10 15:30:00",
"allDay"=>false
// กำหนด event object property อื่นๆ ที่ต้องการ
);
4. หากเป็นกิจกรรมแบบต่อเนื่อง เช่นกิจกรรมนิทรรศการ เป็นช่วงของวัน ไม่เน้นว่าต้องมีการกำหนดเวลา
กำหนดได้ ตัวอย่าง งานออกร้าน วันที่ 1- 5 ตุลาคม
วิธีกำหนดเราต้องกำหนด allDay เท่ากับ true และวันที่สิ้นสุดต้องเป็น วันที่สุดท้ายของกิจกรรม +1
อย่างวันที่ 5 เป็นวันสุดท้ายของกิจกรรม ในการกำหนดต้องกำหนดเป็นวันที่ 6 (จะเห็นว่า ถ้ากำหนด
ตามโปรแกรม ก็จะทำให้สับสนเรื่องวันที่ได้ อย่างไรจะอธิบายเทคนิคการประยุกต์เพิ่มเติมในลำดับต่อไป)
เราสามารถกำหนดได้ดังนี้
$json_data[]=array(
"id"=>$rs->event_id,
"title"=>$rs->event_title,
"start"=>"2014-10-01",
"end"=>"2014-10-06",
"allDay"=>true
// กำหนด event object property อื่นๆ ที่ต้องการ
);
เนื้อหาในตอนนี้ ให้เข้าใจรูปแบบการใช้งาน event object กับวันที่และเวลา ที่เป็นไปได้
ในปฏิทินกิจกรรม ตอนหน้า จะแนะนำเทคนิค รวมทั้งการประยุกต์ การกำหนด ฟิลด์สำหรับ
เก็บค่าที่จำเป็นในฐานข้อมูล และเงื่อนไขการนำไปแสดง