PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ประยุกต์ ใช้รายการ จากฐานข้อมูล สร้างปฏิทินกิจกรรม ด้วย fullcalendar และ jQuery

24 August 2010 By


1.ดาวน์โหลดเวอร์ชั่นล่าสุดได้ ที่ 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 มาแสดง

* รูปแบบการสร้างฟอร์มบันทึกลงฐานข้อมูล ขึ้นอยู่กับการนำไปประยุกต์ใช้




เนื้อหาที่เกี่ยวข้อง



Tags:: ฐานข้อมูล jquery fullcalendar ปฏิทินกิจกรรม



แนะนำการกำหนดรูปแบบการดึงข้อมูลจากฐานข้อมูล มาใช้ใน fullcalendar ใหม่ที่ลิ้งค์นี้

การกำหนด วันที เวลา ของ Event Object ใน fullcalendar v.2.1.1 
http://www.ninenik.com/content.php?arti_id=571 via @ninenik

 



URL สำหรับอ้างอิง