PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

29 October 2014 By


การสร้างไฟล์ data_events.php จากฐานข้อมูล เพื่อกำหนด event object สำหรับใช้งาน
ใน fullcalendar สามารถทำได้ดังนี้
 
ไฟล์ 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);    
include("../db_connect.php"); // เรียกใช้งานไฟล์เชื่อมต่อกับฐานข้อมูลแบบใช้ mysqli
$mysqli = connect(); // เชื่อมต่อกับฐานข้อมูล    
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;  
}  
?>  
 
จากโค้ดข้างต้นเป็นการใช้งาน 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 กับวันที่และเวลา ที่เป็นไปได้
ในปฏิทินกิจกรรม ตอนหน้า จะแนะนำเทคนิค รวมทั้งการประยุกต์ การกำหนด ฟิลด์สำหรับ
เก็บค่าที่จำเป็นในฐานข้อมูล และเงื่อนไขการนำไปแสดง



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



Tags:: fullcalendar





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