完整日历仅将图像添加到资源的 1 列

Question

Fullcalendar很棒，我可以使用resourceRender回调将图像添加到resourceObject。我正在使用基于资源分组演示的日历。https://fullcalendar.io/docs/v4/resourceColumns-grouping-demo

但问题是我只想将图像添加到第 3 列 - 占用率，而不是前 2 列。

当我添加以下代码时，它会将图像追加到所有列，而不仅仅是占用列。

resourceRender: function(resourceObj, labelTds, bodyTds) {
   labelTds.append(
     '<div style="text-align:center">' + 
     '<img src="../../images/icon.png" width="30" height="30">' +                    
     '</div>'
    };
},

谁能告诉我如何仅对占用 td 元素执行此操作？

Answer 1

找到了。首先，按照 John 的建议，向 resourceObj 添加其他资源，以便您也可以选择要添加图像的行。然后使用 jQuery 列表函数遍历 labelTds 数组，将图像添加到 labelTds 数组中所需的 td 元素中。在此示例中，最后一行 - 占用是要替换为图像的 td 元素。此外，您可以将"onclick"javascript添加到图像中以执行其他操作。

下面的示例代码。

resourceRender: function(resourceObj, labelTds, bodyTds) {
    if(resourceObj.roomtype != 'Manage' ) {
        var roomid = resourceObj.id;
        var roomno = resourceObj.roomno;
        var msg = 'Peform some action on '+roomno+' ?';
        if(resourceObj.roomstatus == 'C') {
            labelTds.last().empty();
            labelTds.last().append(
                '<div style="text-align:center">' +
                '<img src="../../images/image1.png" width="20" height="20" onclick="confirm(''+msg+'');">' +
                '</div>'
            );
        };
        if(resourceObj.roomstatus == 'L') {
            labelTds.last().empty();
            labelTds.last().append(
                '<div style="text-align:center">' +
                '<img src="../../images/image2.png" width="20" height="20">' +
                '</div>'
            );
        };
    };
},