Google MDアイコンをFullcalendarイベントに挿入する

Question

私はカレンダー表示のためにfullcalendarプラグインを使用し始めました。 カレンダーの目標は、ユーザーが宿泊施設またはカントリーのイベントを追加できるようにすることです。

私のページが読み込まれると、PHPを使用して、イベントを表示するJavaScriptに解析される配列を作成します。

私がしたいのは、一致するイベントのGoogleマテリアルデザインアイコンを表示できることです。

宿泊施設はホテルのアイコンになります。

郷土料理のアイコンになります。 Googleのdocumentationで今

それはアイコンは以下の方法を使用して適用することができることを示しています

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

プラグインにイベントを渡すときしかし、これを可能にしていないようです。

配列が構築されますPHP：私のjavascriptの

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

パート：

<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を試してみてください。

よろしくお願いいたします。
Krzyszof