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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
fullcalendar

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

ดูแล้ว 13,268 ครั้ง




การสร้างไฟล์ 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 กับฐานข้อมูล สร้างปฏิทินกิจกรรม  
 
ขอยกรูปแบบบางส่วนของการสร้างข้อความ 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 สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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