javascript - 如何将 FullCalendar 事件文本旋转 90 度以垂直

Question

有时在 FullCalendar 中，尤其是使用 Scheduler 插件时，视图中的各个日期有很多资源和很多列，由于页面空间不足，事件的宽度如此之小。在这种情况下，事件文本更适合垂直定向，从上到下书写 - 而不是默认的从左到右。这将允许文本利用较大的高度并消除由于宽度减小而被截断的情况。如何将事件文本旋转 90 度？

以下是压缩在一起时默认事件的样子：

这是我希望事件看起来像的样子：

Answer 1

使用eventAfterAllRender回调，检查渲染事件的宽度是否太小以及日历是否在特定视图中。如果满足这些条件，则使用 CSS 变换来旋转事件元素内的文本。此外，将时间和名称子元素设置为内联块，以便它们跨越一行以利用空间。

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