ประยุกต์ ใช้รายการ จากฐานข้อมูล สร้างปฏิทินกิจกรรม ด้วย fullcalendar และ jQuery
24 August 20101.ดาวน์โหลดเวอร์ชั่นล่าสุดได้ ที่ http://arshaw.com/fullcalendar/ มีรายละเอียดวิธีการใช้ พร้อมตัวอย่าง
หรือ ดาวน์โหลดเวอร์ชั่น พร้อมใช้งาน ได้ที่ http://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', 'http://www.ninenik.com', 'false'); INSERT INTO `tbl_event` VALUES (2, 'Meeting', '2010-09-12 08:36:16', '0000-00-00 00:00:00', 'http://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 มาแสดง
* รูปแบบการสร้างฟอร์มบันทึกลงฐานข้อมูล ขึ้นอยู่กับการนำไปประยุกต์ใช้
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
06 Mar 11 แนะนำ ปลั๊กอิน comment ตัวใหม่ของ facebook อ่าน 3274 15 Nov 09 สร้างลิ้งค์เมนู 2 ภาษา กรณี ไทย อังกฤษ ด้วย php อย่างง่าย อ่าน 1864 21 Aug 10 เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ อ่าน 3531 02 May 10 ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip อ่าน 5973 18 Oct 08 สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4186 31 Jul 10 เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป อ่าน 4366 05 Nov 08 CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10257 23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 24732 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 3994 12 Sep 10 การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย อ่าน 2426 24 Sep 10 ประยุกต์ facebox ของ jQuery แทนการใช้ mootools facebox มาใช้งาน อ่าน 3224 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5416 25 Mar 09 ใช้งาน cookie ในการจำค่าชื่อผู้ใฃ้และรหัสผ่าน ด้วย javascript และ php อ่าน 2660 22 Apr 10 ประยุกต์ tooltip มากกว่า 1 ตัวใน ฟอร์ม ด้วย jQuery อ่าน 5109 08 Oct 08 javascript อย่างง่าย กับการสร้างปุ่มจากรูปภาพ อ่าน 2845 13 May 09 แก้ไขการตัดข้อความด้วย substrใน php แล้วมีรูปสี่เหลี่ยม อ่าน 2734 31 Oct 09 ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่าย อ่าน 4370 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 7878 09 Aug 10 ประยุกต์ jQuery UI ปฏิทิน Datepicker แสดงภาษาไทย และใช้ ปี พ.ศ. อ่าน 8700 18 Mar 09 เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery อ่าน 3131