Fullcalendar添加图片到只有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

找到了。首先，约翰的建议，增加额外的资源，以resourceObj，所以你可以选择线条添加图像了。然后使用jQuery列表功能通过labelTds阵列来迭代添加的图像中进行所需的横向元件labelTds的在数组中。在这个例子中的最后一行 - 占用了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>'
            );
        };
    };
},