将Google MD图标插入Fullcalendar事件

Question

我已经开始使用fullcalendar插件来显示我的日历。日历的目标是允许用户添加标记为"住宿"或"食堂"的活动。

当我的页面加载时，我使用PHP构建一个数组，该数组被解析为显示事件的JavaScript。

我想做的是能够显示谷歌材料设计图标与匹配的事件。

住宿将是酒店的标志。

食堂将成为当地的餐饮标志。

现在，在谷歌的文档中，它显示了可以使用以下方法应用图标：

<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>

我的问题是，如何在每个事件条目中显示正确的图标？

Answer 1

您可以这样做：

$('#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>');
}
}
});

试试小提琴。