FullCalendar V2 Event Title cut off in month view

Question

After upgrading to V2 of jquery fullcalendar I noticed that events with long titles had the title cut off.

I worked around this issue by adding CSS, but now another issue arises - an event with a long title seems to expand the entire row, causing a white space to appear in adjacent days which have events with short titles.

CSS added

.fc-day-grid-event > .fc-content {
white-space: inherit; }

See: http://jsfiddle.net/uawsdebv/10/

The 2 events on 13th November have a empty row / height between them caused by the long event on the 12th November.

I'm at a loss - can anyone help?

Answer 1

Since the Calendar HTML structure is based on rows it's not possible to float elements as it was before (row height is set for the highest height element inside the row).

Alternatively you can do this,

.fc-day-grid-event > .fc-content {
   white-space: normal;
   text-overflow: ellipsis;
   max-height:20px;
}
.fc-day-grid-event > .fc-content:hover {
   max-height:none!important; 
}

This will default hide the title and when you hover it will show the title in full.

Here's how it works jsfiddle

Answer 2

You can specify a max-height for each event and use text-overflow ellipsis. Entire event title can be shown on mouse over using title html attribute. //css

    .fc-day-grid-event > .fc-content {
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer; // for showing title 
    max-height:20px; // can be adjusted according to your requirement
}

//jquery

$(".fc-content").each(function(){
  $(this).attr("title",$(this).text());
  })

Here is the working jsFiddle link