Как повернуть текст события FullCalendar на 90 градусов, чтобы быть вертикальным

Question

Иногда в FullCalendar, особенно с использованием плагинов Планировщика, где много ресурсов и много столбцов для разных дней в представлении, события имеют такую ​​небольшую ширину из-за нехватки места на странице. В этом случае было бы более целесообразно ориентировать текст события вертикально, написанный сверху вниз, вместо значения по умолчанию слева направо. Это позволит тексту использовать большую высоту и исключить ее обрезание из-за уменьшенной ширины. Как я могу повернуть текст события на 90 градусов?

Вот какие события по умолчанию выглядеть, когда сплющенные вместе:

Вот что я хочу события выглядеть следующим образом:

Answer 1

Использование eventAfterAllRender обратного вызова, проверьте ширины Визуализированное событий являются слишком мала и зависит ли календарь от конкретного вида. Если эти условия выполнены, используйте CSS-преобразование для поворота текста внутри элемента события. Кроме того, создайте временные и вспомогательные элементы inline-block, чтобы они охватывали одну строку, чтобы воспользоваться пространством.

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'); 
      } 
     }); 
    } 
    } 

В этом случае, я только хочу, чтобы повернуть этикетки на 90 градусов, если элемент события менее 40 пикселей в ширину и календарь не в месяц зрения.