javascript - 将 Google MD 图标插入 Fullcalendar 事件

Question

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

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

我想做的是能够显示带有匹配事件的 Google Material Design 图标。

住宿将成为酒店图标。

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

现在在 Google 的 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>

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

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

试试 fiddle .