将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事件

回答

相关问题