Calendar Scroll Issues

Event calendars & schedulers
1

I have an event calendar with a fixed height, so that it scrolls. However, there are 2 problems with this. I have videos for each but it won’t let me attach them here.

  1. When you use your mouse to move the scroll bar, it is constantly changing size as you scroll, and it makes it very jumpy and behave odd.
  2. Sometimes (but not always), when I scroll and then highlight a row to create an event, it will highlight and create the event on the wrong row. From my experience, this can get worse the farther I’ve scrolled, where it might be off by multiple rows instead of just 1.

Here is my full initialization, as far as what I think matters:

return $(calendarId).mobiscroll().eventcalendar({
    modules: [mobiscroll.print],
    view: {
        timeline: {
            type: 'day',
            size: initCalendarObject.range,
            resolutionHorizontal: 'day'
        }
    },
    height: '65vh',
    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,
    renderDay: function (args) {
        // Date headings
        var date = args.date;

        return '<div class="md-date-header">' +
            '<div class="md-date-header-day-name">' + (formatDate('DDD', date)).substring(0, 2) + '</div>' +
            '<div class="md-date-header-day-nr">' + formatDate('DD', date) + '</div></div>';
    },
    renderResourceHeader: function () {
        return (isSplitCalendar ? '<div class="md-resource-details-title split-calendar">' : '<div class="md-resource-details-title">') +
            '<div class="md-resource-header md-resource-header-name">Name</div>' +
            (isSplitCalendar ? '<div class="md-resource-header md-resource-header-capacity split-calendar">Min/Max</div>' : '<div class="md-resource-header md-resource-header-capacity">Min/Max</div>') +
            (isSplitCalendar ? '' : '<div class="md-resource-header md-resource-header-status">Status</div>') +
            '</div>';
    },
    renderResource: function (resource) {
        return '<div class="md-resource-details-cont" oncontextmenu="Calendar.handleResourceClick(event,' + resource.actualId + ', ' + resource.type + ')">' +
            '<div class="md-resource-header md-resource-details-name">' + resource.name + '</div>' +
            (isSplitCalendar ? '<div class="md-resource-header md-resource-details-capacity split-calendar"> ' : '<div class="md-resource-header md-resource-details-capacity">') + resource.capacity + '</div>' +
            (isSplitCalendar ? '' : '<div class="md-resource-header md-resource-details-status" style="background: linear-gradient(to right, ' + resource.color + ' 0px, ' + resource.color + ' 5px, transparent 5px)">' + resource.status + '</div>') +
            '</div>';
    },
    renderScheduleEvent: function (data) {
        // Event styling
        var ev = data.original;
        if (initCalendarObject.isHighLevelView) {
            return '<div class="md-timeline-template-event high-level-view custom-calendar-event" style="background: linear-gradient(to right, ' + ev.lineColor + ' 0px, ' + ev.lineColor + ' 5px, transparent 5px);border-color:' + ev.borderColor + ';background-color:' + ev.backgroundColor + '">' +
                '<div class="md-timeline-template-event-cont" style="' + 'color:' + ev.textColor + '">' +
                '<div class="md-timeline-template-title">' + ev.name + (ev.adults + ev.children > 0 ? (' (' + ev.adults + '/' + ev.children + ')') : '') + '</div></div></div>';
        } else {
            return '<div class="md-timeline-template-event custom-calendar-event" style="background: linear-gradient(to right, ' + ev.lineColor + ' 0px, ' + ev.lineColor + ' 5px, transparent 5px);border-color:' + ev.borderColor + ';background-color:' + ev.backgroundColor + '">' +
                '<div class="md-timeline-template-event-cont" style="' + 'color:' + ev.textColor + '">' +
                '<div class="md-timeline-template-title">' + ev.name + (ev.adults + ev.children > 0 ? (' (' + ev.adults + '/' + ev.children + ')') : '') + '</div>' +
                '<div class="md-timeline-template-notes">' + (ev.notes ?? '') + '</div></div>' +
                (ev.locked ? '<div class="md-timeline-template-lock" style="color:' + ev.textColor + '"><i class="fas fa-lock fa-xs"></i></di>' : '') + '</div>';
        }
    },
2

I made an empty page and copy pasted the code from this demo, set the height to 65vh, and added 30 more resources to it, and it has the same scrolling problem where the scroll bar will resize and jump around as you scroll down.

3

Hi @joehixson

I tried to replicate the issue using the demo you mentioned, but I couldn’t reproduce it. Could you somehow provide a video and more context about the issue?

4

If you can give me some way to provide you with a video, I can do that. The forum will not let me upload an attachment though, as I am a “new user”.

5

Hi @joehixson

Unfortunately, I can’t provide permission for attachments, but please use a file-sharing service like WeTransfer to send me the video.

6

Dropbox - Here is the video using the mobiscroll timeline demo, having set the height to 75vh and copy pasting a bunch of resources onto it so it has to scroll longer.

I have the same behavior in our customized version of the calendar but it is even worse because the resource heights are larger.

It seems like the scroll bar height is recalculating as the calendar dynamically renders in more rows as you scroll?

7

Video - We are also encountering another issue that is probably due to the same dynamically loading resources logic. You can only drag an event so far down before it won’t let you drag it any further.

8

Hi @joehixson

Thanks for the provided videos. It seems there might be an issue with the resource IDs. I’ve checked again that demo, and it appears that the strange behavior occurs only when the resource IDs are messed up. Could you please double-check the IDs?

9

It was not the resource ids. However, since you were not seeing the same problem I commented all of my custom css out and no longer had the issue. Therefore, I commented out less and less to arrive at the one that caused the problem. I’m not sure why this was added in the first place but it seems like I no longer need it, so removing it is my solution.

.mbsc-timeline-grid {
    height: auto !important;
}
10

Hi @joehixson
It’s great that you got it figured out. Thanks for sharing it!