Hi - thanks for working on this component! im trying to limit the space w

Hi - thanks for working on this component!

im trying to limit the space wasted on hours not needed - I need only working ours. When I limit the hours displayed it does not change the height of the rows - it only removed the rows not displayed. I would like it to take advantage of the space and make the row hight higher - its almost unreadable if a entry is 30 min. and if less its totally unreadable. I can see from the hightlight of the current day that the component does fill the full screen - just from the last row to the end of screen its blank.
Im setting the start of the day at 7 and end at 19.00 hours:

    calendar = FullCalendarBuilder.create().build();
    calendar.setLocale(new Locale("da", "DK"));
    calendar.setFirstDay(DayOfWeek.MONDAY);
    calendar.changeView(CalendarViewImpl.TIME_GRID_WEEK);
    calendar.setNowIndicatorShown(true);
    calendar.setMinTime(LocalTime.of(7, 0));
    calendar.setMaxTime(LocalTime.of(20, 0));
    calendar.setNowIndicatorShown(true);
    calendar.setWeekNumbersVisible(true);
    Timezone copenhagen = new Timezone(ZoneId.of("Europe/Copenhagen"));
    //calendar.setTimezone(copenhagen);
    calendar.setSnapDuration("00:15");
    calendar.setBusinessHours(new BusinessHours(LocalTime.of(8, 0), LocalTime.of(19, 0),BusinessHours.DEFAULT_BUSINESS_WEEK));

did I make sense? :)

if my screen has 240px left in height for the calendar it shows the 24 hours with 10px each (probably not correct but for the example). If I set the calendar to show only 12 hours, not 24, I would like it to use the full 240px for the 12 hours. It does not. It uses the same 10px per row, so leaving half the 240px unused. Since it highlights the current day and this hightlight uses the full 240px I can see the calendar component does use all space.

(agian 240px is just an example)

sorry about this - I dont know web/css/stuff. I was able to see my browser allows me to inspect the html, probabaly a bad idea, but it does.

I played around with setting a height until I hit the element that does what I need. See image attached. So the question is - can I overwrite this from server side, from css overwriting or any other means - and if so, if possible, can you be very specific on how to do this?
I tried setting 100% does not work, 1010px is just me guessing and this will of cause also depend on the actual screen size …
18261382.png

Hi,

first to say, there is no built in function to do that out of the box (in the client and so also not in Java). I’ll see if I find some workaround for that.

In the next version of the FC client library (v5) there will be such a feature, but it is currently in Beta (and not sure how fast I can adapt it, when it’s released).

Looks like this would take a bit more work and even then I cannot promise, that the client side lib will handle changes well. So at the current state and due to being short of time I have to say, that it is not possible. Maybe I find some time in near future to test around a bit more, but as said before, without any promisses.

Sorry :/

PS: here is a github thread discussing exactly the same.

Easiest way would be to set the row / cell heights to a new (fixed) height, but when I got it right, that won’t help your case and would also include some client side work (see samples for extending FC to add custom styles)

https://github.com/fullcalendar/fullcalendar/issues/265