Question

我正在尋找一種方法將不同的圖標添加到我的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 

誰能告訴我我的代碼應該是什麼樣子，讓那些圖標顯示在日曆概要？這對我來說非常重要。

謝謝， 克里斯

Answer 1

使得事件陣列可以設置像event.icon =「FA-次圈」自定義屬性時;然後用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) 
    } 
});