1.ดาวน์โหลดเวอร์ชั่นล่าสุดได้ ที่ http://arshaw.com/fullcalendar/ มีรายละเอียดวิธีการใช้ พร้อมตัวอย่าง
หรือ ดาวน์โหลดเวอร์ชั่น พร้อมใช้งาน ได้ที่ https://www.ninenik.com/download/fullcalendar.rar
หลังจากดาวน์โหลดไฟล์ fullcalendar.rar แตกไฟล์ แล้วก็อบปี้โฟลเดอร์ fullcalendar ไว้ใช้งาน
2. สร้างตารางฐาน ตามโครงสร้างตารางฐานข้อมูล ดังนี้
-- -- 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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
<?php
header("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 มาแสดง
* รูปแบบการสร้างฟอร์มบันทึกลงฐานข้อมูล ขึ้นอยู่กับการนำไปประยุกต์ใช้
เนื้อหาที่เกี่ยวข้อง