FullCalendar - Change event (appointment, diary entry) height

Question

I'm trying to change the height of an event (appointment) in FullCalendar.

I followed the suggestion in this answer How to edit width of event in FullCalendar?

The problem is that I'm not too sure how to set the height so that it's relative to the calendar size.

I tried this:

  eventAfterRender: function (event, element, view) {
    $(element).css('height', '100%');
    }

but it actually shows as a thin sliver, ditto for 200%, as if it's not having an effect.

This works:

  eventAfterRender: function (event, element, view) {
    $(element).css('height', '200px');
    }

but it's only good for 1920 x 1080 resolution. Smaller resolutions will cause the appointments to spill over, which is not good.

Any ideas how to set the height of the event to be the same as the cell?

or even better the actual available height of the cell. As events are only displayed below the date.

The usage of this calendar is for an application that only has full day events, so it won't be an issue to just get a single event per cell.

TIA

Answer 1

You could try something like this:

eventRender: function(event, element, view) {
    var cellheight = $('.fc-widget-content').height();
    $(element).css('height', cellheight);
},

Doesn't seem to work as well with eventAfterRender but if you play around with it a bit you should get something to meet your needs