How to rotate FullCalendar event text 90 degrees to be vertical

Question

Sometimes in FullCalendar, especially using the Scheduler plugin where there are many resources and many columns for the various days in the view, the events have such small widths because of lack of space on the page. In this case, it would be more appropriate for the event text to be oriented vertically, written from top to bottom - instead of the default left to right. This would allow the text to take advantage of the larger height and eliminate it getting cut off due to the reduced width. How can I rotate the event text 90 degrees?

Here's what the default events look like when squished together:

Here's what I want the events to look like:

Answer 1

Using the eventAfterAllRender callback, check if the rendered events' widths are too small and whether the calendar is in a specific view. If these conditions are met, then use CSS transform to rotate the text within the event element. Also, make the time and name sub elements inline-block so they span one line to take advantage of the 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');
           }
        });
     }
  }

In this case, I only want to rotate the labels 90 degrees if the event element is less than 40 pixels wide and the calendar is not in the month view.