FullCalendar time slot height

Question

I have a requirement to be able to adjust the height of the time slot intervals in the vertical resource view.

datesRender: function(dayRenderInfo)
{
    $(calendarEl).find('tr[data-time]').css('height', '50px');
}

this works on the first load. everything is great. the event bubbles stretch to fit the new height and properly extend from start time to end time.

however, as soon as I perform any navigation, the event bubbles no longer size properly, even though the time slots themselves still have the new set height. it seems the event bubbles no longer realize that the time slot height has been changed.

is there a better way to do this?
if not, how can I get my event bubbles to stay properly sized on date navigation?

codepen: https://codepen.io/julesx-the-decoder/pen/pozyzNL?editors=0010

Can you make a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) please - it's hard to understand any cause of the problem from such a tiny snippet of code. Give us enough detail so we can look into the issue. I forked the CodePen of the Vertical Resource view on the fullCalendar website, and added your code (or as close to it as I could get, since you didn't use a standard syntax): https://codepen.io/ADyson82/pen/vYBLbpK?&editable=true&editors=001 . It produces an error saying `_container` is undefined.Do you have some other custom code in your page? — ADyson, Aug 14 '19 at 08:11
https://codepen.io/julesx-the-decoder/pen/pozyzNL?editors=0010 if you navigate forwards one day, you'll notice the event bubble is misplaced and missized — Julien, Aug 14 '19 at 14:23

Lee Taylor · Accepted Answer · 2019-08-19T16:38:47.367

2

I've added a dropdown with available sizes. See the following fork:

https://codepen.io/lee-taylor/pen/rNBMWrv

$("#rowHeight").on("change", function(e)
{
    var height = $(this).children("option:selected").val();
    $("head style#height").remove();
    $("head").append('<style id="height"> .fc-time-grid .fc-slats td {height: ' + height + 'px;}</style>');

    calendar.render();
});

By forcing the creation/update of a style tag and using the refresh method of the calendar I think I have achieved what you want.

edited Aug 19 '19 at 16:38

answered Aug 19 '19 at 14:03

Lee Taylor

7,761
16
33
49

the requirement is that the user can configure the height. i don't think that's possible if the height is being embedded into css. and to be clear, the javascript style changes are not being destroyed, but the event bubbles do not seem to always respect the adjusted height. – Julien Aug 19 '19 at 15:08
I don't know what's going on with your demo. Sometimes the events are at 2am and sometimes 5am. Is that the problem? – Lee Taylor Aug 19 '19 at 15:18
the problem is that the event bubbles are sizing and positioning themselves as if the height of each time slot was still the original size. yes, that is the problem. – Julien Aug 19 '19 at 15:54
Glad I could help. – Lee Taylor Aug 19 '19 at 18:00

FullCalendar time slot height

1 Answers1