为资源列表中的每个元素添加图标（完整日历）答案

【问题标题】：Adding icon to each element in resource list (fullcalendar)为资源列表中的每个元素添加图标（完整日历）
【发布时间】：2020-09-01 18:04:46
【问题描述】：

我的 Laravel 7 webapp 中的控制器为我的 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;
    }

【问题讨论】：

“我不想通过 resourceLabelContent 来做，因为控制器管理资源”...当然，但在这种情况下，您只是向每个资源添加相同的静态 HTML。因此，实际上我看不出使用 resourceLabelContent 执行此操作会出现问题的具体原因 - 控制器代码不会改变 HTML 输出。
这个编辑按钮只是一个简单的测试，看看 HTML 是否显示在日历中。稍后，将有特定于 id 的按钮用于编辑和删除。但这不是问题。
好的。为了将来的参考，通常最好在你的问题中放一个现实的例子，然后人们（比如我！）不要过来“没有必要那样做”，而是他们可以专注于你的实际问题。

标签： php laravel fullcalendar fullcalendar-scheduler fullcalendar-5

【解决方案1】：

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

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

类似这样的：

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

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

附：您的 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;
});

【讨论】：

谢谢，成功了。顺便问一下：是否可以将 HTML 放到 resourceAreaHeaderContent 字段中？
是的，为什么不呢？从documentation 可以清楚地看出，它是一个内容注入输入，与 resourceLabelContent 相同。