將Google MD圖標插入Fullcalendar事件

我已經開始使用fullcalendar插件來顯示我的日曆。日曆的目標是允許用戶添加標記住宿或食堂的活動。將Google MD圖標插入Fullcalendar事件

當我的頁面加載時，我使用PHP來構建一個數組，解析爲顯示事件的JavaScript。

我想要做的是能夠顯示帶有匹配事件的Google Material Design圖標。

住宿將是酒店的圖標。

食堂將是當地的餐飲圖標。

現在，在谷歌的documentation它顯示的圖標可以使用以下方法來施加：

<i class="material-icons">hotel</i>

但是通過事件插件的時候，這似乎並不可能。

當數組被內置的PHP：

$events = array(); 
while (!$result->eof()) { 
    if ($result->valueof('date_canteen_available') == 't') { 


     $events[] = array("title" => "Canteen", "start" => $result->valueof('date_date')); 
    } 
    if ($result->valueof('date_accommodation_available') == 't') { 
     $events[] = array("title" => "Accommodation", "start" => $result->valueof('date_date')); 
    }

我的JavaScript的部分：

<script> 
    $('#calendarAccomo').fullCalendar({ 
       header: { 
       }, 
       defaultView: 'month', 
       editable: true, 
       selectable: true, 
       allDaySlot: false, 
       events: <?php echo json_encode($events) ?>, 
</script>

我的問題是，我怎麼能顯示與每個事件條目正確的圖標？

來源

2017-01-31 Albertus Brand Venter

你可以這樣做：

$('#calendar').fullCalendar({ 
    events: [{ 
    title: 'Accommodation', 
    start: '2017-02-01', 
    description: 'This is a cool event' 
    }, { 
    title: 'Canteen', 
    start: '2017-02-02', 
    description: 'This is a cool event' 
    }], 
    eventRender: function(event, element, view) { 
    if (event.title == 'Accommodation') { 
     element.append('<i class="material-icons">hotel</i>'); 
    } else { 
     element.append('<i class="material-icons">local_dining</i>'); 
    } 
    } 
});

嘗試fiddle。

此致敬禮！
Krzysztof

來源

2017-02-01 19:12:12

將Google MD圖標插入Fullcalendar事件

回答

相關問題