Fullcalendar-Sheduler - How to add icon / html on second resourceAreaColumn

Question

iam using fullcalendar-scheduler-5.3.0.

My events and resources comes from json url:

resources: {
    url: "content/exe/json_load_bm_ressourcen_v2.php"
  }, 

Resource Area definition:

resourceAreaColumns: [
    {
      headerContent: 'Betriebsmittel',
      field: 'title',
      width: 360
    },
    {
      headerContent: '',
      field: 'status',
      width: 40,
      cellDidMount: function(arg) {
        var resource = arg.resource;

        arg.el.addEventListener('click', function() {         
          
          res_id = resource.id.substring(0, 1); 
          var parentId = arg.resource._resource.parentId;
          dep_id = parentId;            
          console.log(dep_id);

          if(res_id != 'd'){
            console.log('User RES ID ' + res_id);
            console.log('User RESOURCE ID ' + resource.id);
            //edit_wpl(resource.id);          
          }
        });
      }
    }
  ],

Example:

[{ 
"id": "d1",
"sort_id":"1",
"title": "Leitern/ Gerüste",
"children": [
{
    "id": "374",
    "title": "Alu-Klappgerüst, Günzburger ",
    "status": "<i class='fal fa-fw fa-times-circle text-danger'></i>",
    "datum_anfang":"1602453600"
  }
]}]

I want to show the icon from field "status" in the second row of my resources list. But i only get the clear html in this field.

Any suggestions?

Answer 1

Suggest that using cellDidMount with jquery to change the cell content:

let init_parms = {
  initialView: 'resourceTimelineMonth',
  resourceAreaHeaderContent: 'Resource',
  resources: resources,
  events: events,
  resourceAreaColumns: [
    {
      headerContent: 'My Column',
      cellDidMount: function(arg) {
        $(arg.el)
          .children(".fc-datagrid-cell-frame")
          .children(".fc-scrollgrid-sync-inner")
          .children(".fc-datagrid-cell-main")
          .html(`<input type="text" value="${arg.fieldValue}" />`)
      }
    }
  ]
}
var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), init_parms)
calendar.render()

Reference