我正在寻找一种方法来为我的fullcalendar.js条目添加不同的图标。这些图标取决于用户的状态，因此我使用以下PHP代码实现这些状态：
if ($icon==1) { print "<i class='ace-icon fa fa-check-circle green bigger-250'></i>"; }
if ($icon==2) { print "<i class='ace-icon fa fa-times-circle red bigger-250'></i>"; }
if ($icon==3) { print "<i class='ace-icon fa fa-clock-o blue bigger-250'></i>"; }
if ($icon==4) { print "<i class='ace-icon fa fa-check-circle yellow bigger-250'></i>"; }
我现在的问题是，我不知道如何在fullcalendar.js条目的标题旁边或标题下包含这些状态。因此，每个条目都会有一个不同的图标，具体取决于用户的当前状态。
这是我的fullcalendar.js代码：
// ------------------------- TIMETABLE-ANZEIGE -------------------------
print "<div class='col-sm-12'>";
print "<br /><br />";
print "<div class='main-container' id='main-container'>\n";
print " <div class='row'>\n";
print " <div id='calendar'></div>\n";
print " </div>\n";
print "</div><!-- /.main-container -->\n";
print "<!-- page specific plugin scripts -->\n";
print "<script src='./bootstrap/assets/js/jquery-ui.custom.js'></script>\n";
print "<script src='./bootstrap/assets/js/jquery.ui.touch-punch.js'></script>\n";
print "<script src='./bootstrap/assets/js/date-time/moment.js'></script>\n";
print "<script src='./bootstrap/assets/js/fullcalendar.js'></script>\n";
print "<script src='./bootstrap/assets/js/bootbox.js'></script>\n";
// initialize the external events
//-----------------------------------------------------------------
?>
<!-- inline scripts related to this page -->
<script type="text/javascript">
jQuery(function($) {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
<?php
print "var date = new Date();\n";
print "var d = date.getDate();\n";
print "var m = date.getMonth()-1;\n";
print "var y = date.getFullYear();\n";
print "var unixTimestamp = Date.now(); // in milliseconds;"
?>
var calendar = $('#calendar').fullCalendar({
//isRTL: true,
buttonHtml: {
prev: '<i class="ace-icon fa fa-chevron-left"></i>',
next: '<i class="ace-icon fa fa-chevron-right"></i>'
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
<?php
$dates=getPcalInfoOfHour($gl_userid,0,0);
print "events: [\n";
for ($x=0;$x<count($dates["id"]);$x++) {
print " {\n";
print " id: '".$dates["id"][$x]."',\n";
print " title: '[".$dates["type"][$x]."] ".$dates["title"][$x]."',\n";
print " start: new Date(".date("Y",$dates["start"][$x]).", ".(date("n", $dates["start"][$x]) - 1).", ".date("j",$dates["start"][$x]).", ".date("G",$dates["start"][$x]).", ".date("i",$dates["start"][$x]).",0,0),\n";
print " end: new Date(".date("Y",$dates["end"][$x]+1).", ".(date("n", $dates["end"][$x]+1) - 1).", ".date("j",$dates["end"][$x]+1).", ".date("G",$dates["end"][$x]+1).", ".date("i",($dates["end"][$x]+1)).",0,0),\n";
print " allDay: false,\n";
print "durationEditable : false,\n";
print "draggable : false,\n";
print " className: 'label-info',\n";
if ($dates["type"][$x]=="A") { print "backgroundColor: '#3399FF',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="C") { print "backgroundColor: '#0000FF',\n textColor: '#FFFFFF',\n"; }
if ($dates["type"][$x]=="SE") { print "backgroundColor: '#0099FF',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="SAC") { print "backgroundColor: '#0099FF',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="SD") { print "backgroundColor: '#66DDFF',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="PM") { print "backgroundColor: '#33CC66',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="AM") { print "backgroundColor: '#FFFF66',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="S") { print "backgroundColor: '#FF3333',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="SM") { print "backgroundColor: '#FF6600',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="SS") { print "backgroundColor: '#990033',\n textColor: '#FFFFFF',\n"; }
if ($dates["type"][$x]=="MJ") { print "backgroundColor: '#CCCCCC',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="PR") { print "backgroundColor: '#CCCCCC',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="XA") { print "backgroundColor: '#CCCCCC',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="XC") { print "backgroundColor: '#CCCCCC',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="XAC") { print "backgroundColor: '#CCCCCC',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="XPM") { print "backgroundColor: '#CCCCCC',\n textColor: '#333333',\n"; }
if ($dates["type"][$x]=="XAM") { print "backgroundColor: '#CCCCCC',\n textColor: '#333333',\n"; }
if ($x<(count($dates["id"])-1)) {
print " },\n";
} else {
print " }\n";
}
}
print "]\n";
timeFormat: 'h:mm'
?>
,
disableDragging: true,
editable: false,
droppable: false, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
var $extraEventClass = $(this).attr('data-class');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
calendar.fullCalendar('unselect');
}
,
eventClick: function(calEvent, jsEvent, view) {
loadContent(calEvent.id);
$('#date_content_box').modal({
show: 'true'
});
console.log(calEvent.id);
console.log(jsEvent);
console.log(view);
// change the border color just for fun
//$(this).css('border-color', 'red');
}
});
})
</script>
<?php
print "<script language='JavaScript'>\n";
print "function loadContent(pcal_id) {\n";
// print "$('#date_content_box').modal('hide');\n";
print "var url = 'index.php?func=mycalendar&show_pcal=' + pcal_id + '&sid=$sid';\n";
print "document.getElementById('date_content_box_body').innerHTML = ('<p>loading details...</p>');\n";
print "$('#date_content_box_body').load(url);\n";
print "}\n";
print "function loadEditContent(pcal_id) {\n";
print "var url = 'index.php?func=mycalendar&edit_pcal=' + pcal_id + '&sid=$sid';\n";
print "document.getElementById('edit_date_content_box_body').innerHTML = ('<p>loading details...</p>');\n";
print "$('#edit_date_content_box_body').load(url);\n";
print "$('#edit_date_content_box').modal({\n";
print " show: 'true'\n";
print "});\n";
print "}\n";
print "function loadDateReport(pcal_id,cstate,aid,pers_id) {\n";
print "var url = 'index.php?func=datereport&id=' + pcal_id + '&cstate=' + cstate + '&aid=' + aid + '&pers_id=' + pers_id + '&src=$func&sid=$sid';\n";
print "document.getElementById('datereport_content_box_body').innerHTML = ('<p>loading details...</p>');\n";
print "$('#datereport_content_box_body').load(url);\n";
print "$('#datereport_content_box').modal({\n";
print " show: 'true'\n";
print "});\n";
print "}\n";
print "</script>\n";
print "</div>"; // Ende Widget-Main
print "</div>"; // Ende Widget-Body
print "</div>"; // Ende Widget-Box
print "</div>"; // Ende Column 12
print "</div>"; // Ende Column 12
有人可以告诉我我的代码应该是什么样的，以便这些图标出现在日历概述中吗？这对我来说非常重要。
谢谢， 克里斯
答案 0 :(得分：4)
制作事件数组时，您可以设置自定义属性，例如event.icon =＆＃39; fa-times-circle＆＃39;然后使用eventRender
http://jsfiddle.net/9por3Lod/1/
$('#calendar').fullCalendar({
defaultDate: '2015-11-01',
events: [{
start: '2015-11-01',
end: '2015-11-03',
title: 'test fa-check-circle',
icon: 'fa-check-circle'
}, {
start: '2015-11-05',
end: '2015-11-10',
title: 'testing fa-clock-o',
icon: 'fa-clock-o'
}, {
start: '2015-11-11',
end: '2015-11-15',
title: 'testing fa-times-circle',
icon: 'fa-times-circle'
}],
eventRender: function (event, element, view) {
var i = document.createElement('i');
// Add all your other classes here that are common, for demo just 'fa'
i.className = 'fa'; /*'ace-icon fa yellow bigger-250'*/
i.classList.add(event.icon);
// If you want it inline with title
element.find('div.fc-content').prepend(i);
// If you want it on a line before
// element.prepend(i);
// Or the next line after title
//element.append(i)
}
});