fullcalendar - 调度程序 - resourceRender不使用多行

Question

我使用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之前使用内联样式来解决这个问题。谢谢！

Answer 1

我认为问题是你在每个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>都具有彼此相同的高度。