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元素执行此操作吗?
答案 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>'
);
};
};
},