Adding icon to each element in resource list (fullcalendar)

Question

A controller in my Laravel 7 webapp gives me the resource feed for my fullcalender v5. It worked great until I tried to add an icon to each cell in the resource list. I tried different approaches but can't get the HTML displayed as HTML, it just prints the whole line <?php echo "<i class="material-icons">edit</i>" ?> to the cells in the resource list. How can I pass the HTML to FullCalendar to have it printed as HTML output? I don't want to do it by resourceLabelContent, because the controller manages the resources.

Code from my controller:

    public function resourceFeedProcessplan(Request $request)
    {
(...)
      $data = [];
      $map = $processes->map(function($items){
        $data['id'] = $items->id;
        $data['title'] = $items->title.' ('.$items->id.')'.'<?php echo "<i class="material-icons">edit</i>" ?>'; // HTML part not rendered as HTML by FullCalendar.
        return $data;
      }); 
      return $map;
    }

Answer 1

You can never put HTML directly into the "title" property of a resource, fullCalendar will always treat it as text.

I suggest putting the required HTML for each resource into a custom property of the resource, and then use the resourceLabelContent callback to inject that as HTML into the DOM element being constructed by fullCalendar.

Something like this:

resourceLabelContent: function (arg)
{
  return { html: arg.resource.title + " " + arg.resource.extendedProps.html };
}

Demo: https://codepen.io/ADyson82/pen/YzqrNze

P.S. Your PHP is faulty as well - you've put <?php tags into a string literal, which makes no sense. They won't be executed as PHP, so the tags will be sent to the browser as-is and will screw up the HTML. Just use put the data into your variable directly like any normal string.

e.g.

$map = $processes->map(function($items){
    $data['id'] = $items->id;
    $data['title'] = $items->title.' ('.$items->id.')';
    $data['html'] = '<i class="material-icons">edit</i>';
    return $data;
});