fullcalendar - Scheduler - resourceRender Not Using Multiline

Question

I'm using fullcalendar.io with the added scheduler piece. I've overridden the resourceRender with the following code:

function (resourceObj, labelTds) {
   const textColor = this.calculateForeground(resourceObj.color);
   labelTds.html('<div style="background: ' + resourceObj.color + ';
                color: ' + textColor + '">'
                + resourceObj.name +
                '</div>');
}

(calculateForeground(..) just calculates whether the text should be black or white)

So that when resources are rendered, it looks like this:

<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>

But my issue is that some of the resource names are bigger than others so that they wrap to the next line while the others do not which looks weird with my background setting:

Any tips on how to fix this? I'd like the background to fill the whole space and the single-lined text to be vertically centered:

I'm hoping to fix this with inline styling before attempting jQuery. Thanks!

Answer 1

The problem I think is that you're unnecessarily adding a <div> within each td. Instead you can just manipulate the CSS of the label <td> directly, with no need to re-write the name of the resource, either:

resourceRender: function (resourceObj, labelTds) {
  const textColor = this.calculateForeground(resourceObj.color);
  labelTds.css("background-color", resourceObj.color);
  labelTds.css("color", textColor);
}

This way, the colour applies to the whole of the <td>, not just the <div> within it. Each <div> would only have the height of its contents, hence your problem, but the <td>s all have the same height as each other.