jquery fullcalenderを使用して値を太字にデータベース値で追加する

Question

私はjQueryでfullcalenderを使用しています。もし可能ならば、私の配列には'bold' = true/false,があります。

$(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ファイルを編集したくありません。

私はもっとこの中に見ている、とされてきた

EDITイベントがあれば：「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": "#"} 
]