การสร้างไฟล์ data_events.php จากฐานข้อมูล เพื่อกำหนด event object สำหรับใช้งาน
ใน fullcalendar สามารถทำได้ดังนี้
ไฟล์ dbconnect.php
1 2 3 4 5 6 7 8 9 10 11 | <?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
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 | <?phpheader('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 แบบเก่า
สามารถปรับได้ง่าย ดังนี้
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 | <?phpheader("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
มาอธิบาย เกี่ยวกับการกำหนดวันที่ และเวลาดังนี้
1 2 3 4 5 6 7 8 9 | $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 จะกำหนดด้วยหรือไม่ก็ได้
ตัวอย่างรูปแบบการกำหนด
1 2 3 4 5 6 7 8 | $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. หากกิจกรรมนั้นมีกำหนดการเวลาเริ่มต้น แต่ไม่ระบุเวลาสิ้นสุด โดยในปฏิทินจะมีการแสดง
เวลาเริ่มต้นกิจกรรมด้วย
ตัวอย่างรูปแบบการกำหนด
1 2 3 4 5 6 7 8 | $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
แบบวัน หรือแบบสัปดาห์
ตัวอย่างรูปแบบการกำหนด
1 2 3 4 5 6 7 8 | $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 (จะเห็นว่า ถ้ากำหนด
ตามโปรแกรม ก็จะทำให้สับสนเรื่องวันที่ได้ อย่างไรจะอธิบายเทคนิคการประยุกต์เพิ่มเติมในลำดับต่อไป)
เราสามารถกำหนดได้ดังนี้
1 2 3 4 5 6 7 8 | $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 กับวันที่และเวลา ที่เป็นไปได้
ในปฏิทินกิจกรรม ตอนหน้า จะแนะนำเทคนิค รวมทั้งการประยุกต์ การกำหนด ฟิลด์สำหรับ
เก็บค่าที่จำเป็นในฐานข้อมูล และเงื่อนไขการนำไปแสดง
เนื้อหาที่เกี่ยวข้อง