fullcalendar - スケジューラ - resourceRenderマルチラインを使用していません

Question

私は追加されたスケジューラ部分でfullcalendar.ioを使用しています。

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

（calculateForeground（..）だけでテキストが黒または白であるべきかどうかを計算する）ので、リソースがレンダリングされるとき、それはこのようになっていることを

：私は、次のコードでresourceRenderを上書きしました：

<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>を追加していることです。

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

この方法では、色が<td>の全体に適用されるだけでなく、：代わりに、あなただけのいずれか、リソースの名前を再書き込みする必要はありませんし、直接ラベル<td>のCSSを操作することができますその中の<div>各<div>はその内容の高さしか持たないので、問題はありませんが、<td>はすべて同じ高さです。