1

FullCalendar では、特にビュー内のさまざまな日付に多くのリソースと多くの列がある Scheduler プラグインを使用すると、ページのスペースが不足しているため、イベントの幅が非常に狭くなります。この場合、イベント テキストは、デフォルトの左から右ではなく、上から下に垂直に配置する方が適切です。これにより、テキストはより大きな高さを利用できるようになり、幅が狭くなったためにテキストが途切れることがなくなります。イベント テキストを 90 度回転するにはどうすればよいですか?

一緒に押しつぶされたときのデフォルトのイベントは次のようになります。 デフォルトの水平ラベル イベント

イベントを次のように表示したいです。 必要な垂直ラベルのイベント

4

1 に答える 1

0

eventAfterAllRenderコールバックを使用して、レンダリングされたイベントの幅が小さすぎるかどうか、およびカレンダーが特定のビューにあるかどうかを確認します。これらの条件が満たされている場合は、CSS 変換を使用してイベント要素内のテキストを回転させます。また、時間と名前のサブ要素をインライン ブロックにして、スペースを活用するために 1 行にまたがるようにします。

  eventAfterAllRender: function(view) {
     if(view['name'] != "month") {
        $('.fc-event .fc-content').each(function() {
           var e = $(this);
           if(e.width() < 40) {
              var p = e.parent();
              var h = p.height();
              var w = p.width();
              e.css({
                 'float': 'left',
                 'transform': 'rotate(90deg)',
                 'transform-origin': 'left top 0',
                 'width': h+'px',
                 'margin-left': w+'px'
              });
              e.find('.fc-time').css({
                 'display': 'inline-block',
                 'margin-right': '5px'
              });
              e.find('.fc-title').css('display', 'inline-block');
           }
        });
     }
  }

この場合、イベント要素の幅が 40 ピクセル未満で、カレンダーが月表示でない場合にのみ、ラベルを 90 度回転させます。

于 2016-12-17T03:38:24.497 に答える