การนำไอคอน มาแสดงบน Fullcalendar

เนื่องจากมีน้องคนหนึ่งให้ช่วยดูโค้ดเกี่ยวกับ Fullcalendar ให้หน่อย แล้วพอดีช่วงนี้ผมก็กำลังสนใจปฏิทิน Fullcalendar อยู่พอดี จึงลองหาสาเหตุที่ไม่สามารถแสดงข้อมูลจาก MySQL และไม่สามารถแทรก icon เข้าไปใน Fullcalendar ได้

จากที่สังเกตุได้ครั้งแรกคือ Error ที่ Console ของ Firefox เกี่ยวกับฟังก์ชั่นที่เขียนผิด และก็มีการ echo ค้างไว้ในส่วนของไฟล์ getCalendar.php ก็เลยจัดการทดสอบแล้วลบ echo ออกให้เหลือแค่ echo json_encode($event_array); ที่ได้ใช้งานจริงเท่านั้น

ขั้นตอนการตรวจสอบความถูกต้องของโค้ด PHP

1) ต้องแน่ใจว่าคำสั่งที่เขียนไว้ สามารถดึงข้อมูลมาแสดงผลได้ด้วยการ echo $sql;

2) นำคำสั่งที่ได้ไปรันในโปรแกรมจัดการฐานข้อมูล ในที่นี้คือ phpMyAdmin

3) เมื่อตรวจสอบดูผลลัพธ์ที่ได้ หากถูกต้องมีข้อมูลก็แสดงว่าการ Query ทำงานได้

4) มาดูการทำงานของ JavaScript ในส่วนของ jQuery มีการแจ้งเตือนที่ฟังก์ชั่น .on() ซึ่งจะใช้กับ jQuery เวอร์ชั่นใหม่เท่านั้น นั่นหมายถึงเวอร์ชั่น jQuery ที่มากับ Fullcalendar เป็นเวอร์ชั่นเก่า ก็ให้เปลี่ยนไปใช้ .live() แทน ก็จะทำงานได้ปกติ

5) มีส่วนที่ Error อีกส่วน ่นั่นก็คือ eventRender ในส่วนของข้อมูลรูปภาพมีการซ้อนเครื่องหมาย " ทับกันจึงต้องเปลี่ยนเป็นเครื่องหมาย ' ครอบ " ไว้แทนแบบเดิม และมีการแยกบรรทัดเพื่อนอ่านง่าย

ผลลัพธ์ที่ได้

Download Fullcalendar ได้ที่
http://fullcalendar.io/download/

ซอร์สโค้ดที่เรียกใช้ 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" />

<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">
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: "getCalendar.php?gData=1",
eventRender: function(event, element, calEvent) {
var html_data = '<img src="img/r09.gif" /><img src="img/122.gif" /><img src="img/21.gif" /><img src="img/032.gif" />';
var elem = $("<span class=\"fc-event-icons\"></span>").html(html_data);
element.find(".fc-event-title").after(elem);
}
});
$('.fc-event-icons img').live('click','img',function(event) {
alert($(this).attr('src'));
});
});
</script>

<title>t</title>
</head>
<body>
<div >
<div id='calendar' style='width:60%' ></div>
</div>
</body>
</html>

ซอร์สโค้ด PHP สำหรับเรียกข้อมูลจาก MySQL (เวอร์ชั่น MySQLi)

<?php
if(isset($_GET['gData'])){
$link = mysqli_connect("127.0.0.1", "tobedev", "1234", "tobedev_example", "33065");
mysqli_set_charset($link, 'utf8');
if (!$link) {
echo "Error: Unable to connect to MySQL." . PHP_EOL;
echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
exit;
}
$event_array=array();
$i_event=0;
$sql="SELECT * FROM tbl_event WHERE date(event_start)>='". date('Y-m-d', $_GET['start']) ."'
AND date(event_end)<='". date('Y-m-d', $_GET['end']) ."' ORDER by event_id";
//echo $sql."<br/>";
if ($result = $link->query($sql)) {
while($rs = $result->fetch_assoc()){
$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'];
$i_event++;
}
echo json_encode($event_array);
}
mysqli_close($link);
}
?>

SQL Database

-- phpMyAdmin SQL Dump
-- version 4.3.11
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1:33065
-- Generation Time: Sep 29, 2015 at 05:34 PM
-- Server version: 5.5.40
-- PHP Version: 5.5.24
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
--
-- Database: `tobedev_example`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_event`
--
CREATE TABLE IF NOT EXISTS `tbl_event` (
`event_id` int(3) NOT NULL,
`event_title` varchar(50) NOT NULL,
`event_start` date NOT NULL,
`event_end` date NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_event`
--
INSERT INTO `tbl_event` (`event_id`, `event_title`, `event_start`, `event_end`) VALUES
(1, 'test1', '2015-09-30', '2015-09-30'),
(2, 'test2', '2015-09-21', '2015-09-21');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_event`
--
ALTER TABLE `tbl_event`
ADD PRIMARY KEY (`event_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_event`
--
ALTER TABLE `tbl_event`
MODIFY `event_id` int(3) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=3;

PHP วิถีเริ่มต้นของโปรแกรมเมอร์ รับทำเว็บไซต์

ค้นหาบล็อกนี้