1.ดาวน์โหลดเวอร์ชั่นล่าสุดได้ ที่ http://arshaw.com/fullcalendar/ มีรายละเอียดวิธีการใช้ พร้อมตัวอย่าง
หรือ ดาวน์โหลดเวอร์ชั่น พร้อมใช้งาน ได้ที่ https://www.ninenik.com/download/fullcalendar.rar
หลังจากดาวน์โหลดไฟล์ fullcalendar.rar แตกไฟล์ แล้วก็อบปี้โฟลเดอร์ fullcalendar ไว้ใช้งาน
2. สร้างตารางฐาน ตามโครงสร้างตารางฐานข้อมูล ดังนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | -- -- Table structure for table `tbl_event`-- CREATE TABLE `tbl_event` ( `event_id` int(11) NOT NULL auto_increment, `event_title` varchar(255) NOT NULL, `event_start` datetime NOT NULL, `event_end` datetime NOT NULL, `event_url` varchar(255) NOT NULL, `event_allDay` varchar(5) NOT NULL, PRIMARY KEY (`event_id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;-- -- Dumping data for table `tbl_event`-- INSERT INTO `tbl_event` VALUES (1, 'Birthday Party', '2010-08-02 11:35:38', '2010-08-02 15:35:52', 'https://www.ninenik.com', 'false');INSERT INTO `tbl_event` VALUES (2, 'Meeting', '2010-09-12 08:36:16', '0000-00-00 00:00:00', 'https://www.ninenik.com', 'false');INSERT INTO `tbl_event` VALUES (3, 'Lunch', '2010-08-13 12:00:00', '2010-08-13 13:00:00', 'http://www.google.com', 'false');INSERT INTO `tbl_event` VALUES (4, 'All Day Event', '2010-08-26 22:10:08', '0000-00-00 00:00:00', '', 'true');INSERT INTO `tbl_event` VALUES (5, 'Long Event', '2010-08-29 08:40:00', '2010-08-31 09:30:00', '', 'true'); |
แต่ละฟิลด์ เก็บข้อมูลดังนี้
event_id เก็บ id กิจกรรม
event_title เก็บหัวเรื่องกิจกรรมนั้นๆ
event_start เก็บวันที่และเวลาที่เริ่มต้น
event_end เก็บวันที่และเวลาที่สิ้นสุดกิจกรรม
event_url เก็บลิ้งค์สำหรับไปที่หน้ารายละเอียดกิจกรรม หรือไปเว็บอื่น
event_allDay เก็บว่าเป็นกิจกกรรมทั้งวัน หรือ กิจกรรมของช่วงเวลา
แนวทางการบันทึกข้อมูล event_allDay
event_allDay บันทึกค่าเป็น true ถ้าเป็นกิจกรรมทั้งวัน
event_allDay บันทึกค่าเป็น false ถ้าเป็นกิจกรรมในช่วงเวลาหนึ่ง หรือเป็นกิจกรรม ที่ไม่ทราบเวลาสิ้นสุดที่แน่นอน
3.สร้างไฟล์สำหรับทุดสอบ ชื่อ prac_fullcalendar.php บันทึกไว้นอกโฟลเดอร์ fullcalendar
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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>prac full calendar</title><link rel='stylesheet' type='text/css' href='fullcalendar/redmond/theme.css' /><link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' /><script type='text/javascript' src='fullcalendar/jquery/jquery.js'></script><script type='text/javascript' src='fullcalendar/jquery/jquery-ui-custom.js'></script><script type="text/javascript" src="fullcalendar/fullcalendar.min.js"></script><script type="text/javascript">$(function(){ $('#calendar').fullCalendar({ header: { left: 'month,agendaWeek,agendaDay', center: 'title', right: 'prev,next today' }, editable: true, theme:true, events: "getCalendar.php?gData=1", loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); } // put your options and callbacks here }); });</script><style type="text/css">body{ padding:0px; margin:0px; font-size:12px; font-family:Tahoma, Geneva, sans-serif; }#calendar{ width:750px; margin:auto;}</style></head><body><br /><br /><div id='calendar'></div></body></html> |
4.สร้างไฟล์ getCalendar.php สำหรับดึงข้อมูลจากฐานข้อมูลมาแสดงในปฏิทิน บันทึกไว้ที่เดียวกับไฟล์ prac_fullcalendar.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 | <?phpheader("Content-type:text/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']){ $event_array=array(); $i_event=0; $q="SELECT * FROM tbl_event WHERE date(event_start)>='".date("Y-m-d",$_GET['start'])."' "; $q.=" AND date(event_end)<='".date("Y-m-d",$_GET['end'])."' ORDER by event_id"; $qr=mysql_query($q); while($rs=mysql_fetch_array($qr)){ $event_array[$i_event]['id']=$rs['event_id']; $event_array[$i_event]['title']=$rs['event_title']; $event_array[$i_event]['start']=$rs['event_start']; $event_array[$i_event]['end']=$rs['event_end']; $event_array[$i_event]['url']=$rs['event_url']; $event_array[$i_event]['allDay']=($rs['event_allDay']=="true")?true:false; $i_event++; } echo json_encode($event_array); exit; }?> |
5.หลังจากทำตามขั้นตอนจนครบ จะได้โครงสร้างไฟล์สำหรับทดสอบ ประกอบด้วย
โฟลเดอร์ fullcalendar
ไฟล์ prac_fullcalendar.php
ไฟล์ getCalendar.php
6.ทดสอบโดยเรียกไฟล์ prac_fullcalendar.php มาแสดง
* รูปแบบการสร้างฟอร์มบันทึกลงฐานข้อมูล ขึ้นอยู่กับการนำไปประยุกต์ใช้
เนื้อหาที่เกี่ยวข้อง