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

Question

I'm using fullcalender with jQuery and I'm wonder if its possible, if my array has 'bold' = true/false, I could use jquery to attach a new class to it.

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

If I had a database value id 'bold' can I make jquery add a style the '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);

I'd like to use jQuery or edit the phpscript possibly. But I do not want to edit fullcalender.js file.

EDIT

I've been looking more into this, and if events: "json-events.php" I could add a function that would add bold style to the css.

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

maybe by adding variables of getElementById and if it is true, have it append a style to the css.

Answer 1

Not exactly sure if it's what you need but I used this code to add class to some of my elements in a jquery calendar when you mouse over a date. If the date you mouse over contains an element, a tool tip open with detail about that specific element.

/// <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": "#"}
]