Menu
I am looking for a way to add different icons to my fullcalendar.js entries. Those icons depend on the state of a user, so I achieve those states with the following PHP code:
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>"; }
My problem is now, that I have no idea how I can include those states next to the title or under the title at the fullcalendar.js entries. So every entry will have a different icon, depending on the current state of a user.
Here is my fullcalendar.js code:
// ------------------------- 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
Can someone tell me what my code should look like, so that those icons appear at the calendar overview? This is really important for me.
Thanks, Chris
778
When making the event array you can set a custom property like event.icon = 'fa-times-circle'; then use 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)
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
