使用jquery fullcalender将值附加到粗体的数据库值

Question

我使用fullcalender与jQuery，我想知道它是否可能，如果我的数组有'bold' = true/false,我可以使用jquery附加一个新类。

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
     editable: false, 
     allDay: false, 
     events: "json-events.php", 
     eventDrop: function(event, delta) { 
      alert(event.title + ' was moved ' + delta + ' days\n' + 
       '(You cannot update these fields!)'); 
     }, 
     loading: function(bool) { 
      if (bool) $('#loading').show(); 
      else $('#loading').hide(); 
     }, 
    }); 
}); 

如果我有一个数据库值id'bold'我可以让jquery添加一个'title'样式。

$result = $dbh->query($sql)->fetchAll(PDO::FETCH_ASSOC); 

foreach ($result as $row){ 
$return[]=array('id'=>$row['id'], 
       'title'=>$row['title'], 
       'start'=>$row['start'].' '.$row['time'], 
       'end'=>$row['end'], 
       'url'=>$row['url'], 
       'backgroundColor'=>$row['backgroundColor'], 
       'textColor'=>$row['textColor'], 
       'borderColor'=>$row['borderColor'], 
       'description'=>$row['description'], 
       "allDay" => false); 
} 
$dbh = null; 

header('Content-type: application/json'); 
echo json_encode($return); 

我想使用jQuery或编辑phpscript可能。但我不想编辑fullcalender.js文件。

编辑

我一直在寻找更成这样了，如果事件：“JSON-events.php”我可以补充一点，会增加大胆风格的CSS功能。

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
     editable: false, 
     allDay: false, 
     events: function() {... 

也许通过添加getElementById的变量，如果它是真的，让它追加样式的CSS。

Answer 1

不完全确定它是否是你需要的，但是当你将鼠标放在一个日期上时，我使用这段代码将类添加到jQuery日历中的一些元素中。如果鼠标悬停的日期包含元素，则会打开一个工具提示，其中包含有关该特定元素的详细信息。

/// <reference path="jquery-1.7.1-vsdoc.js" /> 


$(document).ready(function() { 
    $.getJSON("getProductJSON.json", null, 
     function (data) { 
      $('#calendar').fullCalendar({ 
       editable: false, 
       theme: true, 
       header: { 
        left: 'prev,next today', 
        center: 'title' 
       }, 
       events: data, 
       eventMouseover: function (calEvent, jsEvent) { 
        xOffset = 1; 
        yOffset = 8; 



       $("body").append(GetEventDetails(calEvent)); 
       $("#tooltip") 
         .css("top", (jsEvent.clientY + yOffset) + "px") 
         .css("left", (jsEvent.clientX - xOffset) + "px") 
         .fadeIn("fast"); 
      }, 
      eventMouseout: function (calEvent, jsEvent) { 
       $("#tooltip").remove(); 
      }, 
      eventClick: function (calEvent, jsEvent) { 

       w = window.open('', 'More details Event: ', 'width=300,height=200') 
       w.document.write(GetEventDetails(calEvent)); 
       w.focus(); 
       return false; 
      } 
     }); 
    } 
); 
}); 

function GetEventDetails(e) { 
    var output = "<p id='tooltip'>"; 
    output += "<label class='tt'> Heure :</label>" + e.heure + "<br />"; 
    output += "<label class='tt'> Durée :</label>" + e.duree + "<br />"; 
    output += "<label class='tt'> Description :</label><br />" + e.desc + "</p>"; 
    return output; 

} 

JSON data : 
[ 
{ "title":"souper pizza", "desc":"5 a 7 pizza, initiation", "start":"2012/02/29","heure":"17:00:00","duree":"120", 
    "url": "#" 
}, 
{ "title":"cours","desc":"cours6gei470","start":"2012/02/12","heure":"16:00:00","duree":"180", 
    "url": "#"}, 
{ "title":"Cool","desc":"Cool Yo","start":"2012/02/1","end":"2012/02/4","heure":"16:00:00","duree":"999", 
    "url": "#"} 
]