fullcalendar

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>

但我的问题是某些资源名称比其他资源名称大，因此它们会换行到下一行，而其他资源名称则不会换行，这在我的背景设置下看起来很奇怪：

关于如何解决这个问题的任何提示？我希望背景填满整个 space 并且单行文本垂直居中：

我希望在尝试 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> 都具有相同的高度。

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

fullcalendar - Scheduler - resourceRender Not Using Multiline

fullcalendar-scheduler