向资源列表中的每个元素添加图标全日历

问题描述

Laravel 7 Web应用程序中的一个控制器为我的fullcalender v5提供了资源供稿。效果很好,直到我尝试向资源列表中的每个单元格添加一个图标。我尝试了其他方法,但无法将HTML显示为HTML,它只是将整行<?PHP echo "<i class="material-icons">edit</i>" ?>打印到资源列表中的单元格。如何将HTML传递给FullCalendar,以将其打印为HTML输出?我不想用resourceLabelContent来做,因为控制器管理资源。

我的控制器中的代码

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

解决方法

您永远不能将HTML直接放入资源的“ title”属性中,fullCalendar始终会将其视为文本。

我建议将每个资源所需的HTML放入资源的自定义属性中,然后使用resourceLabelContent回调将其作为HTML注入由fullCalendar构建的DOM元素中。

类似这样的东西:

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

演示:https://codepen.io/ADyson82/pen/YzqrNze

P.S。您的PHP也有问题-您已将<?php标记放入字符串文字中,这没有任何意义。它们不会作为PHP执行,因此标记将按原样发送到浏览器并破坏HTML。只需使用将数据像任何普通字符串一样直接放入变量中即可。

例如

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