PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

เรื่อง jquery fullcalendar เกี่ยวกับสีของ event รบกวนด้วยครับ

เรื่อง jquery fullcalendar เกี่ยวกับสีของ event รบกวนด้วยครับ

จากบทความ jquery fullcanlendar 
http://www.ninenik.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99_fullcalendar_v.2.1.1_%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5_%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%9B%E0%B8%8F%E0%B8%B4%E0%B8%97%E0%B8%B4%E0%B8%99%E0%B8%81%E0%B8%B4%E0%B8%88%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1_-564.html

อยากจะสอบถามว่าจะประยุกต์เปลี่ยนสี event แบบคนละสีอย่างไรครับเช่น
event ที่ 1 สีเขียว

event ที่ 2 สีฟ้า

event ที่ 3 สีส้ม

คือถ้าเปลี่ยนสีเดียวกันผมทำได้ แต่จากบทความนี้ข้อมูลมาในรูปแบบ json ซึ่งผมไม่รู้จะกำหนดยังไงให้ event คนละสี ผม Fix event ไว้แค่ 3 event เท่ากับมีแค่ 3 สีครับ 

อยากรบกวนผู้รู้ทุกท่านแนะนำผมด้วยครับ



โดย:  Beemsaber IP: 171.7.29.xxx วันที่: 05-03-2016 เวลา: 23:03:29

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 4
removeEventSource
ลองแล้วครับ ไม่ได้เหมือนเดิม  T T


โดย:  Beemsaber IP: 202.29.54.xxx วันที่: 11-03-2016 เวลา: 12:12:57
 ความคิดเห็นที่ 3
ขาดคำสั่ง ลบ eventSource ไปหรือเปล่า
อาจจะต้องลบทั้ง events และ eventSource
ลองดูตามลิ้งค์นี้เป็นแนวทาง
http://fullcalendar.io/docs/event_data/removeEventSource/

โดย:  Ninenik IP: 122.155.45.xxx วันที่: 08-03-2016
 ความคิดเห็นที่ 2

ขอบคุณมากๆครับ คุณ Ninenik 
ผมขออนุญาติสอบถามปัญหาอีกข้อครับ

จากรูป
1. ผมทำการเลือก select box เพื่อทำการแสดงผล ปฏิทินตามเงื่อนไขที่เลือก
2. ปฏิทินจะแสดงผลลัพธ์ โดยไป select * from ที่ table tbl_events เงื่อนไขที่ sem ==1
3. เมื่อผมทำการเลือก select box ใหม่เพื่อเปลี่ยนแปลงการแสดงผล ปฏิทินสามารถแสดงผลตามเงื่อนไขได้โดยการเคลียร์ค่าของเก่าออกและแสดงผลตามเงื่อนไขใหม่ แต่
4. เมื่อผมกดปุ่ม prev หรือ next ของ fullcalendar มันกลับไม่ยอมเคลียร์ค่าที่ได้เลือก select box == sem ครั้งแรก
5. ทำให้การแสดงผลปฏิทินเป็นดังรูปที่ 5 
ในทุกๆครั้งที่เลือก select box  จะสามารถ clear ค่าได้และแสดงผลได้ตามปกติ แต่เมื่อกดปุ่ม prev กับ next มันจะไม่สามารถเคลียร์ค่าและจะมีการเพิ่ม event ไม่รู้จบ

อันนี้ js ของผมครับ รบกวนขอความช่วยเหลือด้วย ขอบคุณมากครับ

 

$(function() {
    var source = {
                    url: 'php/data_events_sem.php?gData=1'
                };
    $('#calendar').fullCalendar({  
        //theme: true,
        header: {  
            left: 'prev,next today',    
            center: 'title',  
            right: 'month',  
        },    
        
        displayEventTime: false,      
        eventColor: '#378006',
        eventLimit:false,  
        lang: 'th'  
    }); 
    
  $('#room').on('change',function(){
    //alert($('#room').val());
    $room = $('#room').val();
    
    if($room == 1)
    {
            var source1 = {
                url: 'php/data_events_sem.php?gData=1'
            };
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', source1);
            $('#calendar').fullCalendar('renderEvents');
    }//if room sem

    else if($room == 2)
    {
                var source2 = {
                    url: 'php/data_events_cd.php?gData=1'
                };
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', source2);
            //$('#calendar').fullCalendar('renderEvents');
    }//if room cd

    else if($room == 3)
    {
                var source3 = {
                    url: 'php/data_events_edx.php?gData=1'
                };
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', source3);
            //$('#calendar').fullCalendar('renderEvents');
    }//if room edx

    else
    {
                var source0 = {
                    url: 'php/data_events.php?gData=1'
                };
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', source0);
            //$('#calendar').fullCalendar('renderEvents');
    }//if room default = sem
   });
});


โดย:  Beemsaber IP: 27.130.171.xxx วันที่: 08-03-2016 เวลา: 18:51:15
 ความคิดเห็นที่ 1
เพิ่มฟิลด์เงื่อนไข ตาราง กิจกรรม เพื่อใช้กำหนดสี เช่น กิจกรรมนันทนาการ กิจกรรมวิชาการ ช่วงเวลาพัก
เราอาจจะเก็บค่าทั้งสามนี้เป็นตัวเลข 1 2 หรือ 3 ตามลำดับ
จากนั้นในไฟล์ ที่สร้าง ่event เป็น json ไฟล์ ก็กำหนดเงื่อนไขเพื่อแยกสีลงไป

<?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 = connect(); // เชื่อมต่อกับฐานข้อมูล    
$arr_type_color=array(
	"1"=>"#FFFFFF",
	"2"=>"#FFFFFF",
	"3"=>"#FFFFFF",		
);
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,
			"color"=>$arr_type_color[$rs->event_type],
            "allDay"=>($rs->event_allDay==true)?true:false      
            // กำหนด event object property อื่นๆ ที่ต้องการ
        );    
    }  
}


หรือใช้ if else กำหนดเงื่อนไขแบบนี้ก็ได้

<?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 = 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()){
		$bgColor=null;
		if($rs->event_type==1){
			$bgColor="#FFFFFF";
		}elseif($rs->event_type==2){
			$bgColor="#FFFFFF";
		}else{
			$bgColor="#FFFFFF";
		}
        $json_data[]=array(  
            "id"=>$rs->event_id,
            "title"=>$rs->event_title,
            "start"=>$rs->event_start,
            "end"=>$rs->event_end,
            "url"=>$rs->event_url,
			"color"=>$bgColor,
            "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;  
}  
?>  


โดย:  Ninenik IP: 122.155.43.xxx วันที่: 06-03-2016