Fullcalendar仅将图像添加到资源的1列

时间:2019-02-11 08:56:35

标签: fullcalendar fullcalendar-scheduler

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元素执行此操作吗?

1 个答案:

答案 0 :(得分:0)

找到了。 首先,按照约翰的建议,将其他资源添加到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>'
            );
        };
    };
},