บทความเกี่ยวกับ fullcalendar เวอร์ชั่น 2.1.1 นี้ จะมีบทความมากกว่าหนึ่งบทความ
เพื่อเป็นการแนะนำการประยุกต์ใช้งานในแบบต่างๆ เท่าที่จะสามารถทำได้
การใช้งาน fullcalendar เคยมีบทความก่อนหน้าแล้วคือ
ประยุกต์ ใช้รายการ จากฐานข้อมูล สร้างปฏิทินกิจกรรม ด้วย fullcalendar และ jQuery
https://www.ninenik.com/content.php?arti_id=318 via @ninenik
ซึ่งเป็นเวอร์ชั่นเก่า ซึ่งเคยแนะนำเมื่อ ปี 2010 แต่ยังใช้งานได้ อย่างไรก็ตามแนะนำ
ให้เปลี่ยนมาใช้งาน เวอร์ชั่นปัจจุบันแทน เนื่องจากมีความสามารถใหม่ๆ
รวมทั้งการประยุกต์ใช้งานที่มากกว่า
ดาวโหลดไฟล์ fullcalendar ได้ที่ http://fullcalendar.io/download/
สำหรับคนที่ต้องการศึกษาการใช้งานด้วยตัวเอง สามารถดูรายละเอียดได้ที่
หรือดาวน์โหลดไฟล์เริ่มต้น สำหรับใช้งาน จากการปรับแต่งเล็กน้อยสำหรับภาษาไทย
พร้อมไฟล์ตัวอย่างเบื้องต้น ได้ที่
ตัวอย่าง fullcalendar แสดงปฏิทินกิจกรรม
ก่อนเข้าสู่รายละเอียดการใช้งานด้านต่างๆ สิ่งจำเป็นที่ต้องรู้คือ
Event Object เป็นสิ่งที่สำหรับเก็บข้อมูลที่จะใช้ใน ปฏิทิน
ขอแยกอธิบาย ออกเป็น สองส่วนคือ
1.จำเป็นต้องกำหนด
title
ข้อแสดงกิจกรรม เช่น ประชุม
start
วันที่/เวลาเริ่มกิจกรรม เช่น ในรูปแบบเช่น 2014-10-12 10:00:00
2. กำหนดเพิ่มเติม หรือไม่ก็ได้
id
ตัวเลขหรือข้อความ ที่ไม่ซ้ำกันของกิจกรรม เข่น 1,2.,3.....
สำหรับกรณีเป็นกิจกรรมที่ซ้ำๆ ในช่วงเวลาเดิม ควรจะกำหนด id เป็นค่าเดียวกันได้
allDay
กำหนดว่าเป็นกิจกรรมทั้งวันหรือไม่ เช่นกำหนด true เป็นกิจกรรมทั้งวัน | false ไม่ได้เป็นกิจกกรมตลอดวัน
end
วันที่/เวลาที่สิ้นสุดกิจกรรม เช่น ในรูปแบบเช่น 2014-10-12 10:00:00
url
กรณีกำหนดเป็นกิจกรรมเป็น ลิ้งค์ ใส่ url เพจหรือเว็บที่ต้องการลิ้งค์ไป
className
ชื่อ css class ที่เราจะกำหนดเองให้กับ กิจกรรม เพื่อสามารถใช้อ้างอิง หรือเรียกใช้งาน ผ่าน jquery ได้
editable
กำหนด true หรือ false ให้กับกิจกรรมหนึ่งใด ที่ต้องการให้สามารถแก้ไขหรือย้ายกิจกรรมได้
ซึ่งจะทำได้ทั้งการลากและการย่อขยายกิจกรรมได้พร้อมกัน
กรณีใช้งานจริง จำเป็นต้องมีการเขียนโค้ดรองรับการเปลี่ยนแปลงข้อมูลด้วย
startEditable
กำหนด true หรือ false ให้กับกิจกรรมหนึ่งใด ที่ต้องการให้สามารถแค่ ย้ายตำแหน่งกิจกรรมได้
แต่ไม่อนุญาตให้ขยายช่วงเวลาของกิจกรรม
durationEditable
กำหนด true หรือ false ให้กับกิจกรรมหนึ่งใด ที่ต้องการให้ทำการย่อขยายช่วงเวลาของกิจกรรมได้
แต่ไม่สามารถย้ายตำแหน่งของกิจกรรม หรือย้ายวันที่เริ่มต้นของกิจกรรมได้
color
กำหนดสีของกิจกรรม ทั้งที่เป็นสีพื้นหลังและสีขอบ
backgroundColor
กำหนดสีของกิจกรรม โดยกำหนดเฉพาะสีพื้นหลัง
borderColor
กำหนดสีของกิจกรรม โดยกำหนดเฉพาะสีขอบ
textColor
กำหนดสีของข้อความของกิจกรรม
ต่อไปมาดูตัวอย่างโค้ด และการใช้งานเบื้องต้น อย่าลืมว่าให้โหลดไฟล์ที่เกี่ยวข้อง
จากลิ้งค์ด้านบนก่อนทดสอบการใช้งาน
ตัวอย่างโค้ดไฟล์ แสดงปฏิทินกิจกรรม fullcalendar1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fullcalendar 1</title>
<link rel="stylesheet" href="js/fullcalendar-2.1.1/fullcalendar.min.css">
<style type="text/css">
html,body{
maring:0;padding:0;
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
#calendar{
max-width: 700px;
margin: 0 auto;
font-size:13px;
}
</style>
</head>
<body>
<br><br>
<div style="margin:auto;width:800px;">
<div id='calendar'></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/fullcalendar-2.1.1/lib/moment.min.js"></script>
<script type="text/javascript" src="js/fullcalendar-2.1.1/fullcalendar.min.js"></script>
<script type="text/javascript" src="js/fullcalendar-2.1.1/lang/th.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
ไฟล์ script.js
$(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
events: {
url: 'data_events.php?gData=1',
error: function() {
}
},
eventLimit:true,
lang: 'th'
});
});
ไฟล์ json ดึงข้อมูลจากฐานข้อมูลมาใช้งาน (การเชื่อมต่อกับฐานข้อมูล สามารถกำหนดเองตามต้องการ
หรือใช้โค้ดนี้แทนได้)
สร้าง php function ใช้งาน mysqli เพิ่ม ลบ แก้ไข แสดง ข้อมูล
https://www.ninenik.com/content.php?arti_id=531 via @ninenik
ไฟล์ dbconnect.php
<?php
$mysqli = new mysqli("localhost", "root","","test");
/* check connection */
if ($mysqli->connect_errno) {
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
if(!$mysqli->set_charset("utf8")) {
printf("Error loading character set utf8: %s\n", $mysqli->error);
exit();
}
ไฟล์ data_events.php
<?php
header("Content-type:application/json; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
require("dbconnect.php");
if($_GET['gData']){
$q="SELECT * FROM tbl_event WHERE date(event_start)>='".$_GET['start']."' ";
$q.=" AND date(event_end)<='".$_GET['end']."' ORDER by event_id";
$result = $mysqli->query($q);
while($rs=$result->fetch_object()){
$json_data[]=array(
"id"=>$rs->event_id,
"title"=>$rs->event_title,
"start"=>$rs->event_start,
"end"=>$rs->event_end,
"url"=>$rs->event_url,
"allDay"=>($rs->event_allDay==true)?true:false
// กำหนด event object property อื่นๆ ที่ต้องการ
);
}
}
$json= json_encode($json_data);
if(isset($_GET['callback']) && $_GET['callback']!=""){
echo $_GET['callback']."(".$json.");";
}else{
echo $json;
}
?>
เบื้องต้นเขอจบรายละเอียดการใช้งาน fullcalendar เวอร์ชั่น 2.1.1 เพียงแค่นี้ก่อน
รายละเอียดการประยุกต์ใช้งานส่วนอื่นๆ จะมีบทความตามมา
เนื้อหาที่เกี่ยวข้อง