'FullCalendar V2 Event Title cut off in month view

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?

jquerycssfullcalendar


Solution 1:[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

Solution 2:[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

Solution 3:[3]

Based on the structure of jQuery Calendar, there is really no possible way to achieve what you want. This is because the events are in table rows. As mentioned in the first comment to your question:

Between the V2.0.0 (I'm using this one) and the V2.2.6 (the one you're using) the construction of the agenda moved from divs to tables. If you downgrade your CSS and JS to the V2.0.0, you'll see that your problem disappears: jsfiddle.net/uawsdebv/12 I reckon this is more a work around than an answer. It may be possible to modify the css concerning the tag but I am not advanced enough in CSS to know what could be a solution.

You can probably see this is the only way to solve this, as far as I know.

Solution 4:[4]

There is no straightforward solution to your problem. The problem resides in the fact that the calendar is structured using tables.

Solution 5:[5]

Your intentions here work against the core operations of the table structure.

A table row's height is constant for each row respectively, if you have td's of varying height in a row then the row will adapt it's height to the largest td and smaller td's in that row will have empty space between them and the next row.

You can get around this with nested tables, which essentially using tables within td's.

Solution 6:[6]

Seems the problem relies on white-space property in fc-content class. In my case, I've got rid of it as follows:

.fc-content{white-space:normal}

Solution 7:[7]

It appears the class names have changed for the latest version (v5.11.0 as of the time of this post). The following CSS override does the trick for me:

  .fc-daygrid-event .fc-event-title {
    white-space: normal;
    text-overflow: ellipsis;
    max-height:20px;
  }
  .fc-daygrid-event:hover .fc-event-title {
    max-height:none !important;
  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ash1f
Solution 2 Jerry
Solution 3
Solution 4 Grigoris Thanasoulas
Solution 5
Solution 6 Mario Vázquez
Solution 7 Burton

Related Questions