PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

24 August 2010 By
jquery ฐานข้อมูล fullcalendar ปฏิทินกิจกรรม

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery ฐานข้อมูล fullcalendar ปฏิทินกิจกรรม



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 มาแสดง

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



   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-06-2017


แนะนำการกำหนดรูปแบบการดึงข้อมูลจากฐานข้อมูล มาใช้ใน fullcalendar ใหม่ที่ลิ้งค์นี้
การกำหนด วันที เวลา ของ Event Object ใน fullcalendar v.2.1.1 








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



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






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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