การกำหนด วันที เวลา ของ Event Object ใน fullcalendar v.2.1.1

29 October 2014 By Ninenik Narkdee
fullcalendar

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ fullcalendar



การสร้างไฟล์ data_events.php จากฐานข้อมูล เพื่อกำหนด event object สำหรับใช้งาน
ใน fullcalendar สามารถทำได้ดังนี้
 
ไฟล์ 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('Access-Control-Allow-Origin: *'); 
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_once("dbconnect.php");
$json_data = array();
if(isset($_GET['gData']) && $_GET['gData']!=""){
	$sql = "
	SELECT * FROM tbl_event WHERE date(event_start)>='".$_GET['start']."'  
	AND date(event_end)<='".$_GET['end']."' ORDER by event_id 
	";
	$result = $mysqli->query($sql);
	if($result && $result->num_rows > 0){
		while($row = $result->fetch_assoc()){
			$json_data[] = array(
				"id" => $row['event_id'],
				"title" => $row['event_title'],
				"start" => $row['event_start'],
				"end" => $row['event_end'],
				"url" => $row['event_url'],
				"allDay" => ($row['event_allDay']==true)?true:false			
				// กำหนด event object property อื่นๆ ที่ต้องการ										                
			);
		}
	}	
}
// แปลง array เป็นรูปแบบ json string  
if(isset($json_data)){  
    $json= json_encode($json_data);    
    if(isset($_GET['callback']) && $_GET['callback']!=""){    
    echo $_GET['callback']."(".$json.");";        
    }else{    
    echo $json;    
    }    
}
?>
 
จากโค้ดข้างต้นเป็นการใช้งาน mysqli หากต้องการปรับใช้เป็น mysql แบบเก่า
สามารถปรับได้ง่าย ดังนี้
 
<?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);   
$con_db=mysql_connect("localhost","root","test") or die("Cannot connect db server");  
$select_db=mysql_select_db("test");  
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";  
    $qr=@mysql_query($q);  
    while($rs=@mysql_fetch_object($qr)){  
        $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 v.2.1.1 กับฐานข้อมูล สร้างปฏิทินกิจกรรม  
http://www.ninenik.com/content.php?arti_id=564 via @ninenik
 
ขอยกรูปแบบบางส่วนของการสร้างข้อความ json สำหรับ event 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 อื่นๆ ที่ต้องการ
);    
 
 
1. หากกิจกรรมนั้นเป็นกิจกรรมทั้งวัน หรือไม่ต้องการระบุเวลาแน่นอน แต่เข้าใจว่า
กิจกรรมนั้นจะมีขึ้นในระยะเวลาแค่วันเดียว เราสามารถกำหนด allDay ให้เท่ากับ true
และกำหนดวันที่ start เป็นวันดังกล่าว โดยจะกำหนดเวลาด้วยหรือไม่ก็ได้ 
และส่วนของ end จะกำหนดด้วยหรือไม่ก็ได้
 
ตัวอย่างรูปแบบการกำหนด
 
$json_data[]=array(  
    "id"=>$rs->event_id,
    "title"=>$rs->event_title,
    "start"=>"2014-10-10 00:00:00",
    "end"=>"",
    "allDay"=>true      
    // กำหนด event object property อื่นๆ ที่ต้องการ
);   
 
2. หากกิจกรรมนั้นมีกำหนดการเวลาเริ่มต้น แต่ไม่ระบุเวลาสิ้นสุด โดยในปฏิทินจะมีการแสดง
เวลาเริ่มต้นกิจกรรมด้วย
 
ตัวอย่างรูปแบบการกำหนด
 
$json_data[]=array(  
    "id"=>$rs->event_id,
    "title"=>$rs->event_title,
    "start"=>"2014-10-10 13:30:00",
    "end"=>"",
    "allDay"=>false      
    // กำหนด event object property อื่นๆ ที่ต้องการ
);   
 
3. หากกิจกรรมนั้น มีการกำหนดเวลาเริ่มต้น และเวลาสิ้นสุดที่แน่นอน การแสดง view แบบเดือน
ก็จะมีเวลาเริ่มต้นแสดงด้วย แต่จะไม่มีเวลาสิ้นสุด โดยเวลาสิ้นสุดกิจกรรม จะแสดงในหน้า view
แบบวัน หรือแบบสัปดาห์
 
ตัวอย่างรูปแบบการกำหนด
 
$json_data[]=array(  
    "id"=>$rs->event_id,
    "title"=>$rs->event_title,
    "start"=>"2014-10-10 13:30:00",
    "end"=>"2014-10-10 15:30:00",
    "allDay"=>false      
    // กำหนด event object property อื่นๆ ที่ต้องการ
);   
 
4. หากเป็นกิจกรรมแบบต่อเนื่อง เช่นกิจกรรมนิทรรศการ เป็นช่วงของวัน ไม่เน้นว่าต้องมีการกำหนดเวลา
กำหนดได้ ตัวอย่าง งานออกร้าน วันที่ 1- 5 ตุลาคม 
วิธีกำหนดเราต้องกำหนด allDay เท่ากับ true และวันที่สิ้นสุดต้องเป็น วันที่สุดท้ายของกิจกรรม +1
อย่างวันที่ 5 เป็นวันสุดท้ายของกิจกรรม ในการกำหนดต้องกำหนดเป็นวันที่ 6 (จะเห็นว่า ถ้ากำหนด
ตามโปรแกรม ก็จะทำให้สับสนเรื่องวันที่ได้ อย่างไรจะอธิบายเทคนิคการประยุกต์เพิ่มเติมในลำดับต่อไป)
 
เราสามารถกำหนดได้ดังนี้
 
$json_data[]=array(  
    "id"=>$rs->event_id,
    "title"=>$rs->event_title,
    "start"=>"2014-10-01",
    "end"=>"2014-10-06",
    "allDay"=>true      
    // กำหนด event object property อื่นๆ ที่ต้องการ
);   
 
 
เนื้อหาในตอนนี้ ให้เข้าใจรูปแบบการใช้งาน event object กับวันที่และเวลา ที่เป็นไปได้
ในปฏิทินกิจกรรม ตอนหน้า จะแนะนำเทคนิค รวมทั้งการประยุกต์ การกำหนด ฟิลด์สำหรับ
เก็บค่าที่จำเป็นในฐานข้อมูล และเงื่อนไขการนำไปแสดง


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-10-2017


แจกโค้ดตัวอย่าง fullcalendar เวอร์ชั่น 3.6.2 ฉบับปรับแต่ง รองรับภาษาไทย และปี พ.ศ.

ดาวน์โหลดได้ที่ https://goo.gl/426JGS



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ







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



Tags:: fullcalendar







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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ