PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การใช้งาน fullcalendar v.2.1.1 กับฐานข้อมูล สร้างปฏิทินกิจกรรม

12 October 2014 By


บทความเกี่ยวกับ fullcalendar เวอร์ชั่น 2.1.1 นี้ จะมีบทความมากกว่าหนึ่งบทความ
เพื่อเป็นการแนะนำการประยุกต์ใช้งานในแบบต่างๆ เท่าที่จะสามารถทำได้
 
การใช้งาน fullcalendar เคยมีบทความก่อนหน้าแล้วคือ 
 
ประยุกต์ ใช้รายการ จากฐานข้อมูล สร้างปฏิทินกิจกรรม ด้วย fullcalendar และ jQuery 
http://www.ninenik.com/content.php?arti_id=318 via @ninenik
 
ซึ่งเป็นเวอร์ชั่นเก่า ซึ่งเคยแนะนำเมื่อ ปี 2010 แต่ยังใช้งานได้  อย่างไรก็ตามแนะนำ
ให้เปลี่ยนมาใช้งาน เวอร์ชั่นปัจจุบันแทน เนื่องจากมีความสามารถใหม่ๆ 
รวมทั้งการประยุกต์ใช้งานที่มากกว่า
 
ดาวโหลดไฟล์ fullcalendar ได้ที่ http://fullcalendar.io/download/
 
สำหรับคนที่ต้องการศึกษาการใช้งานด้วยตัวเอง สามารถดูรายละเอียดได้ที่ 
http://fullcalendar.io/docs/
 
หรือดาวน์โหลดไฟล์เริ่มต้น สำหรับใช้งาน จากการปรับแต่งเล็กน้อยสำหรับภาษาไทย
พร้อมไฟล์ตัวอย่างเบื้องต้น ได้ที่
 
http://www.ninenik.com/demo/fullcalendar/fullcalendar.rar
 
ตัวอย่าง 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 เพิ่ม ลบ แก้ไข แสดง ข้อมูล 
http://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: %sn", mysqli_connect_error());  
    exit();  
}  
if(!$mysqli->set_charset("utf8")) {  
    printf("Error loading character set utf8: %sn", $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 เพียงแค่นี้ก่อน
รายละเอียดการประยุกต์ใช้งานส่วนอื่นๆ จะมีบทความตามมา
 



เนื้อหาที่เกี่ยวข้อง



Tags:: ปฏิทิน กิจกรรม fullcalendar



แนวทางการแทรก tooltip แสดงหัวข้อกิจกรรมเพิ่มเติม กรณีหัวข้อกิจกรรมมีความยาว
แสดงไม่หมด

ให้แทรก css ในไฟล์ปฏิทิน

<style type="text/css">   
/* css สำหรับกำหนดรูปแบบของกล่องข้อความ Tooltip */  
.iTooltip{  
    position:absolute;  
    border:1px solid #FFCC66;  
    background-color:#FFFFCC;  
    color:#000000;  
    display:none;  
    padding:5px;  
/*  width:200px;*/  
    font-size:12px;  
	z-index:90000;
}  
</style>  
ต่อไปแทรกโค้ดส่วนสำหรับแสดง tooltip
 
ไว้ใกล้ๆกับปฏิทิน ตรงไหนก็ได้

<span class='iTooltip' id="infotooltip"></span> 


ส่วนสุดท้าย
แทรก javascirpt ไฟล์ใน script.js

$(function(){



    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',  //  prevYear nextYea
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
        },  
        buttonIcons:{
            prev: 'left-single-arrow',
            next: 'right-single-arrow',
            prevYear: 'left-double-arrow',
            nextYear: 'right-double-arrow'         
        },       
        events: {
            url: 'data_events.php',
            error: function() {

            }
        },    
        eventLimit:true,
        lang: 'th',
		eventMouseover: function( event, jsEvent, view ){
        	callTooltip("#infotooltip",jsEvent,event.title);   
		},
		eventMouseout: function( event, jsEvent, view ){
        	$("#infotooltip").hide();  
		}								 		        
    });
  
	var callTooltip = function (obj,jsEvent,strText){ // ฟังก์ชั่นแสดงกล่องข้อความ Tooltip  
			var locateX=jsEvent.pageX;     
			var locateY=jsEvent.pageY;   
			locateX+=10;  
			locateY+=10;  
			$(obj).show().css({  
				left:locateX,  
				top:locateY  
			}).html(strText);                 
	}    
    
});



ส่วนที่เพิ่มเข้ามาคือ

		eventMouseover: function( event, jsEvent, view ){
        	callTooltip("#infotooltip",jsEvent,event.title);   
		},
		eventMouseout: function( event, jsEvent, view ){
        	$("#infotooltip").hide();  
		}				


และ 

	var callTooltip = function (obj,jsEvent,strText){ // ฟังก์ชั่นแสดงกล่องข้อความ Tooltip  
			var locateX=jsEvent.pageX;     
			var locateY=jsEvent.pageY;   
			locateX+=10;  
			locateY+=10;  
			$(obj).show().css({  
				left:locateX,  
				top:locateY  
			}).html(strText);                 
	}    



URL สำหรับอ้างอิง