将图标添加到fullcalendar.js

Question

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

Answer 1

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)
    }
});