Question

我正在使用带有jQuery的fullcalender，我想知道它是否可能，如果我的数组有'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的变量，如果为true，请将样式附加到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": "#"}
]

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

1 个答案: