FullCalendarのイベントテキストを90度回転させて垂直にする方法

Question

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

は一緒に踏み付けたときに、デフォルトのイベントがどのように見えるかです：

ここで私はイベントが見えるようにしたいものです：レンダリングされたイベント幅があるかどうかを確認、eventAfterAllRenderコールバックを使用して

Answer 1

カレンダーが特定のビューにあるかどうかを確認します。これらの条件が満たされている場合は、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度回転したいです。