我使用fullcalendar.io添加了调度程序段。我使用以下代码覆盖了resourceRender:
function (resourceObj, labelTds) {
const textColor = this.calculateForeground(resourceObj.color);
labelTds.html('<div style="background: ' + resourceObj.color + ';
color: ' + textColor + '">'
+ resourceObj.name +
'</div>');
}
(calculateForeground(..)只计算文本是黑色还是白色)
因此,在呈现资源时,它看起来像这样:
<th class="fc-resource-cell" data-resource-id="4">
<div style="background: #EB0007; color: white">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Resource Name</font>
</font>
</div>
</th>
但我的问题是,有些资源名称比其他资源名称更大,所以它们会换行到下一行,而其他资源名称并不像我的背景设置那样奇怪:
有关如何解决此问题的任何提示?我喜欢填充整个空间的背景和垂直居中的单行文本:
我希望在尝试jQuery之前使用内联样式来解决这个问题。谢谢!
答案 0 :(得分:0)
我认为问题是你在每个td中不必要地添加<div>
。相反,您可以直接操纵标签<td>
的CSS,而无需重写资源名称:
resourceRender: function (resourceObj, labelTds) {
const textColor = this.calculateForeground(resourceObj.color);
labelTds.css("background-color", resourceObj.color);
labelTds.css("color", textColor);
}
这样,颜色适用于整个<td>
,而不仅仅是<div>
。每个<div>
只有其内容的高度,因此您的问题,但<td>
都具有彼此相同的高度。