Sticky Header on Calendar with 100% Height

Event calendars & schedulers
1

I have a calendar that has the height set to 100% so it can take up as much height as it needs to display everything. Therefore, the calendar does not scroll, but the page does. When the page scrolls, it would be nice to see the calendar’s header the entire time so you know what day each column is for. However, it seems this only works when I set a height that adds a scroll to the calendar, which is not an option.

Is there any way to set the header to be sticky/fixed in this case?

2

Hi,
which view are you using for the Event calendar?

3

Here is my full initialization:

return $(calendarId).mobiscroll().eventcalendar({
    modules: [mobiscroll.print],
    height: '100%',
    view: {
        timeline: {
            type: 'day',
            size: initCalendarObject.range,
            resolutionHorizontal: 'day'
        }
    },
    refDate: startDate,
    selectedDate: startDate,
    showControls: false,
    dragToCreate: true,
    dragToMove: true,
    dragToResize: true,
    dragTimeStep: 1440,
    eventDelete: true,
    allDay: true,
    showEventTooltip: false,
    data: initCalendarObject.data,
    resources: initCalendarObject.resources,
    invalid: initCalendarObject.invalids,
    colors: initCalendarObject.colors,
4

Hi, thank you for the shared initialization code!

Can you send a mockup, a screenshot or a link so that I can see how the page looks like, what elements does it contain? I am asking this in order to understand why calendar scroll is not an option for your case.

Thank you!
​

5

I did have the calendar scrolling initially, by setting the height to 65vh or something like that. However, the client doesn’t like to have two scrollbars, one within the calendar, and one for the page, because not all the content will fit on one page even if we make the calendar scrollable. Therefore, we removed the height so the calendar could expand to be as much height as it needed, to get rid of that inner scrollbar. So I am wondering if I can have the “best of both worlds” so to speak where the calendar doesn’t scroll but the header it sticky to the page so that when the page scrolls, the calendar header scrolls with it.

Anyways, here is the top of the calendar, which continues much further down the page.

image
image1816×822 40.8 KB

6

Hi,

Thanks for the reply! The point of asking the mockup was to see what else does the page contain besides the calendar. Feel free to share it here or if it has sensitive data, send it via the website chat or a support ticket.

According to the documentation: The calendar needs to be to placed inside a container which has a height. This can be either a fixed height, a height in percentage, or a flex height. When the calendar is placed directly in a container with a fixed height, it will work out of the box.
If the height of the container is specified in percentage, e.g. you’d like to fill the full page height, you need to make sure that all parent elements also have height: 100% specified, up until the body and html elements, or until the closest parent which has a fixed height.
If the container is inside a parent with flex layout, it will also work out of the box.