การใช้งาน 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">×</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">×</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>