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.
- 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.
- 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>';
}
},