如何将 FullCalendar 事件文本旋转 90 度使其垂直

Question

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

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

这是我希望事件的样子：

Answer 1

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

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

如何将 FullCalendar 事件文本旋转 90 度使其垂直

How to rotate FullCalendar event text 90 degrees to be vertical

javascript

jquery

css

fullcalendar

fullcalendar-scheduler