หลักการทำงาน
เรียกข้อมูลจากตาราง tb_event ด้วยฟังก์ชั่นของ MySQLi
ข้อมูลจากฐานข้อมูลจะถูกวนลูปเก็บไว้ใน $data
และจะถูกส่งไปที่ Fullcalendar ด้วยการแปลงข้อมูลจาก PHP
ให้อยู่ในรูปแบบ JSON อาร์เรย์ด้วยฟังก์ชั่น json_encode()
ดูโค้ดเต็มๆที่นี่
การนำไอคอน มาแสดงบน Fullcalendar
PHP Code
<?php
//Database
$data = array();
$link = mysqli_connect("127.0.0.1", "tobedev", "1234", "tobedev_example");
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;
}
$query = "SELECT * FROM tb_event";
if ($result = $link->query($query)) {
/* fetch object array */
while ($obj = $result->fetch_object()) {
$data[] = array(
'id' => $obj->id,
'title'=> $obj->title,
'start'=> $obj->start,
'end'=> $obj->end
);
}
/* free result set */
$result->close();
}
mysqli_close($link);
/*
$array = array(
array('title'=> 'Long Event',
'start'=> '2015-02-07',
'end'=> '2015-02-10'),
array('id'=> 999,
'title'=> 'Repeating Event',
'start'=> '2015-02-16T16:00:00')
);
*/
?>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '<?php echo date('Y-m-d');?>',
editable: true,
eventLimit: true, // allow "more" link when too many events
events : <?php echo json_encode($data);?>
});
});
</script>
<h3>ทดสอบ Fullcalendar</h2>
<div id='calendar'></div>
วิดีโอตัวอย่าง
ผลลัพธ์ดังภาพ
SQL ฐานข้อมูลตาราง tb_event
-- phpMyAdmin SQL Dump-- version 4.4.13.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Sep 10, 2015 at 07:51 AM
-- Server version: 5.5.44-0ubuntu0.14.04.1
-- PHP Version: 5.5.9-1ubuntu4.12
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
--
-- Database: `tobedev_example`
--
-- --------------------------------------------------------
--
-- Table structure for table `tb_event`
--
CREATE TABLE IF NOT EXISTS `tb_event` (
`id` int(11) NOT NULL,
`title` varchar(100) NOT NULL,
`start` varchar(30) NOT NULL,
`end` varchar(30) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COMMENT='ทดสอบปฏิทิน';
--
-- Dumping data for table `tb_event`
--
INSERT INTO `tb_event` (`id`, `title`, `start`, `end`) VALUES
(1, 'กิจกรรมที่ 1', '2015-09-01', '2015-09-03'),
(2, 'Event no 2', '2015-09-03T08:15:00', '2015-09-07T16:00:00');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tb_event`
--
ALTER TABLE `tb_event`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tb_event`
--
ALTER TABLE `tb_event`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=3;
หากเอาไปรันแล้ว Error นั่นเพราะยังไม่ได้แทรก JavaScript ในส่วน <head></head> ให้ดูโค้ดเต็มๆที่นี่
การนำไอคอน มาแสดงบน Fullcalendar
การนำไอคอน มาแสดงบน Fullcalendar
ความคิดเห็น
แสดงความคิดเห็น