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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
ปฏิทินกิจกรรม fullcalendar jquery ฐานข้อมูล

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





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 


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







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



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







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ