Skip to main content

การใช้งาน Fullcalendar2 with Bootstrap Modal And MySQL

การใช้งาน Fullcalendar2 ในตัวอย่างจะเป็นการดึงข้อมูลมาจากฐานข้อมูล MySQL มาแสดงใน Fullcalendar2

สร้าง class PHP/MySQLi เพิ่ม แก้ไข และ ลบ ข้อมูล และ ประยุกต์ใช้งาน ร่วมกับ Bootstrap Modal

สร้างฐานข้อมูลชื่อว่า demo

สร้างTable calendar ใน ฐานข้อมูล demo

CREATE TABLE `calendar` (
`id` int(11) PRIMARY KEY AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `start` date NOT NULL,
  `end` date NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

ตัวอย่างไฟล์ fullcalendar.class.php

สร้าง class Fullcalendar เพื่อ เพิ่ม แก้ไข และ ลบข้อมูล ใน MySQL

<?php
class Fullcalendar {
 
    private $host = 'localhost'; //ชื่อ Host 
	   private $user = 'root'; //ชื่อผู้ใช้งาน ฐานข้อมูล
	   private $password = ''; // password สำหรับเข้าจัดการฐานข้อมูล
	   private $database = 'demo'; //ชื่อ ฐานข้อมูล

	//function เชื่อมต่อฐานข้อมูล
	protected function connect(){
		
		$mysqli = new mysqli($this->host,$this->user,$this->password,$this->database);
			
			$mysqli->set_charset("utf8");

			if ($mysqli->connect_error) {

			    die('Connect Error: ' . $mysqli->connect_error);
			}

		return $mysqli;
	}
	
	//function show data in fullcalendar
	public function get_fullcalendar(){
		
		$db = $this->connect();
		$get_calendar = $db->query("SELECT * FROM calendar");
		
		while($calendar = $get_calendar->fetch_assoc()){
			$result[] = $calendar;
		}
		
		if(!empty($result)){
			
			return $result;
		}
	}
	
	//show data in modal
	public function get_fullcalendar_id($get_id){
		
		$db = $this->connect();
		$get_user = $db->prepare("SELECT id,title,start,end FROM calendar WHERE id = ?");
		$get_user->bind_param('i',$get_id);
		$get_user->execute();
		$get_user->bind_result($id,$title,$start,$end);
		$get_user->fetch();
		
		$result = array(
			'id'=>$id,
			'title'=>$title,
			'start'=>$start,
			'end'=>$end
		);
		
		return $result;
	}
	
	//save new data 
	public function new_calendar($data){
		
		$db = $this->connect();
		
		$add_user = $db->prepare("INSERT INTO calendar (id,title,start,end) VALUES(NULL,?,?,?) ");
		
		$add_user->bind_param("sss",$data['title'],$data['start'],$data['end']);
		
		if(!$add_user->execute()){
			
			echo $db->error;
			
		}else{
			
			echo "บันทึกข้อมูลเรียบร้อย";
		}
	}
	
	//edit data 
	public function edit_calendar($data){
		
		$db = $this->connect();
		
		$add_user = $db->prepare("UPDATE calendar SET title = ? , start = ? ,end = ? WHERE id = ?");
		
		$add_user->bind_param("sssi",$data['title'],$data['start'],$data['end'],$data['edit_calendar_id']);
		
		if(!$add_user->execute()){
			
			echo $db->error;
			
		}else{
			
			echo "บันทึกข้อมูลเรียบร้อย";
		}
	}
	
	//delete data
	public function del_calendar($id){
		
		$db = $this->connect();
		
		$del_user = $db->prepare("DELETE FROM calendar WHERE id = ?");
		
		$del_user->bind_param("i",$id);
		
		if(!$del_user->execute()){
			
			echo $db->error;
			
		}else{
			
			echo "ลบข้อมูลเรียบร้อย";
		}
	}	
}
?>

สร้างไฟล์ json-event.php

ในไฟล์ json-event.php จะรับข้อมูลจาก FORM เพื่อส่งข้อมูลให้กับ Method ต่าง ๆ ภายในไฟล์ fullcalendar.class.php ตาม เงื่อนไข IF

<?php
require "fullcalendar.class.php";

//new object
$fullcalendar = new Fullcalendar();

//check data for show fullcalendar
if(isset($_GET['get_json'])){
	
	//call method get_fullcalendar
	$get_calendar = $fullcalendar->get_fullcalendar();

	foreach($get_calendar as $calendar){
		
		$json[] = array(
			'id'=>$calendar['id'],
			'title'=>$calendar['title'],
			'start'=>$calendar['start'],
			'end'=>$calendar['end'],
			'url'=>'javascript:get_modal('.$calendar['id'].');',
		);
	}
	
	//return JSON object
	echo json_encode($json);
}

//show edit data modal
if(isset($_POST['id'])){
	
	$get_data = $fullcalendar->get_fullcalendar_id($_POST['id']);
	
	echo'<div class="modal-body">
			<form id="edit_fullcalendar">
				  <div class="form-group">
					<label >เรื่อง</label>
					<input type="text" class="form-control" name="title" value="'.$get_data['title'].'">
				  </div>
				  <div class="form-group">
					<label >วันที่เริ่มต้น</label>
					<input type="text" class="form-control" name="start"  value="'.$get_data['start'].'">
				  </div>
				  <div class="form-group">
					<label >วันที่สิ้นสุด</label>
					<input type="text" class="form-control" name="end" value="'.$get_data['end'].'">
				  </div>
					<input type="hidden" name="edit_calendar_id" value="'.$get_data['id'].'">
				</form>
			</div>
		  <div class="modal-footer">
				<button type="button" class="btn btn-danger pull-left" onclick="return del_calendar('.$get_data['id'].');">Delete</button>
				<button type="button" class="btn btn-primary" onclick="return edit_calendar();">Save changes</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		  </div>';
}

//save new data
if(isset($_POST['new_calendar_form'])){
	
	$fullcalendar->new_calendar($_POST);
}

//edit new data
if(isset($_POST['edit_calendar_id'])){
	
	$fullcalendar->edit_calendar($_POST);
}

//delete data
if(isset($_POST['del_id'])){
	
	$fullcalendar->del_calendar($_POST['del_id']);
}

สร้างไฟล์ script.js

โดยจะมีการใช้ Jquery Ajax มาช่วยในการส่งข้อมูลจาก FORM ไปยังไฟล์ json-event.php

$(document).ready(function() {
	//show full calendar
	$('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		editable: false,
		eventLimit: true, // allow "more" link when too many events
		events:{
			url:'json-event.php?get_json=get_json',
		}
	});
	
});

//show data for edit	
function get_modal(id){
	
	//trigger modal
	$("#trigger_modal").trigger('click');
	
	//call data from File json-event.php
	$.ajax({
		type:"POST",
		url:"json-event.php",
		data:{id:id},
		success:function(data){
			$("#get_calendar").html(data);
		}
	});
	
	return false;
}

//save new form
function new_calendar(){

	$.ajax({
		type:"POST",
		url:"json-event.php",
		data:$("#new_calendar").serialize(),
		success:function(data){
			
			$(".close").trigger('click');
			alert(data);
			location.reload();
		}
	});
	return false;
}

//save edit form
function edit_calendar(){

	$.ajax({
		type:"POST",
		url:"json-event.php",
		data:$("#edit_fullcalendar").serialize(),
		success:function(data){
			
			$(".close").trigger('click');
			alert(data);
			location.reload();
		}
	});
	return false;
}

//delete data
function del_calendar(del_id){
	
	if(confirm("คุณต้องการลบข้อมูลใช่หรือไม่")){
		
		$.ajax({
			type:"POST",
			url:"json-event.php",
			data:{del_id:del_id},
			success:function(data){
				
				$(".close").trigger('click');
				alert(data);
				location.reload();
			}
		});	
		
	}

	return false;
}

ตัวอย่างไฟล์ calendar.php สำหรับการแสดงผลข้อมูล

ในไฟล์ calendar.php

ในส่วนของ Tag head จะมีการนำเข้าไฟล์ Css จาก fullcalendar และ bootstrap

ในส่วนของ Javascript มีการนำเข้าไฟล์ จาก jquery fullcalendar bootstrap และไฟล์ script.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8' />
			<link href='http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.css'  rel='stylesheet' />
			<link href='http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.print.css'  rel='stylesheet' media='print' />

			<!-- Latest compiled and minified CSS -->
			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

			<!-- Optional theme -->
			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
			<style>
				#calendar{
					margin-top:10px;
				}
			</style>
	</head>
	<body>

		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<h4>Example Fullcalendar Modal With MySQL</h4>
					<!-- Button trigger modal New data-->
					<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#new_calendar_modal">
					  เพิ่มข้อมูล
					</button>
					
					<div id='calendar'></div>
				</div>
			</div>
		</div>
		
			<!-- Button trigger modal Edit data-->
			<span id="trigger_modal" data-toggle="modal" data-target="#calendar_modal"></span>

				<!-- Modal For edit data-->
				<div class="modal fade" id="calendar_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				  <div class="modal-dialog" role="document">
					<div class="modal-content">
					  <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">Fullcalendar Modal With MySQL</h4>
					  </div>
							<div id="get_calendar"></div>
					</div>
				  </div>
				</div>
				
				
				<!-- Modal For new data-->
				<div class="modal fade" id="new_calendar_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				  <div class="modal-dialog" role="document">
					<div class="modal-content">
					  <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">New Fullcalendar Modal With MySQL</h4>
					  </div>
					  <div class="modal-body">
							<form id="new_calendar">
							  <div class="form-group">
								<label >เรื่อง</label>
								<input type="text" class="form-control" name="title" placeholder="">
							  </div>
							  <div class="form-group">
								<label >วันที่เริมต้น</label>
								<input type="text" class="form-control" name="start"  placeholder="">
							  </div>
							  <div class="form-group">
								<label >วันที่สิ้นสุด</label>
								<input type="text" class="form-control" name="end"  placeholder="">
							  </div>
							  <input type="hidden" name="new_calendar_form">
							</form>
					  </div>
					  <div class="modal-footer">
							<button type="button" class="btn btn-primary" onclick="return new_calendar();">บันทึกข้อมูล</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">ปิด</button>
						
					  </div>
					</div>
				  </div>
				</div>
			
		<!-- Javascript -->
		<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
		<script src='https://fullcalendar.io/js/fullcalendar-2.4.0/lib/moment.min.js'></script>
		<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js'></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  <!-- นำเข้า script File -->
  <script src='script.js'></script>	
	</body>
</html>