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.相反，您可以直接操作标签 <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>s 都具有彼此相同的高度。