Вставка значков Google MD в событие Fullcalendar

Question

Я начал использовать плагин fullcalendar для отображения моего календаря. Целью календаря является предоставление пользователю возможности добавлять события в категорию «Проживание» или «Столовая».

Когда моя страница загружается, я использую PHP для построения массива, который анализируется на JavaScript, который отображает события.

Что я хотел бы сделать, так это отображать значки Google Material Design с соответствующим событием.

Размещение будет значок отеля.

Столовая будет местной столовой.

В настоящее время в компании Google documentation это показывает, что иконки можно применять, используя следующий метод:

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

Однако при переходе события в плагин, это не представляется возможным.

РНР, где массив будет построен:

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

С уважением!
Krzysztof