CODEWITHSUNDEEP
javascriptcssfullcalendarfullcalendar-scheduler
Julien
Julien

Reputation: 282

FullCalendar time slot height

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

Upvotes: 4

Views: 2794

Answers (1)

Lee Taylor
Lee Taylor

Reputation: 7994

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.

Upvotes: 2

Related Questions