Accuracy of Event Color Bar to the Event's Start/End Time

Correction -- The rounding goes to the earliest 30 minute block below (not above). So in my cited event of 2:50pm to 3:45pm, the color bar would should it from 2:30pm to 3:30pm.

Well the best answer is to get the Pro version -- the feature I described is built-in and maintained.

However, I have made some adjustments to the "calendar.src.js" file below around line 2005. Be sure to backup your original:

// Commented-out original two lines below, and enhanced draw height logic between "~~~~~~" lines.
// Still room for improvements/tweaks, but does work on the tests I've tried.

// Original lines:
// --> ep.Top = Math.floor(top / this.cellHeight) * this.cellHeight + 1;
// --> ep.Height = Math.max(Math.ceil(boxBottom / this.cellHeight) * this.cellHeight - ep.Top, this.cellHeight - 1) + 1;

// ~~~~~~~~~~~~ START ~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Get duration of content (in minutes)
var eventStartTicks = ((ep.Start.getTime() * 10000) + 621355968000000000);
var eventEndTicks = ((ep.End.getTime() * 10000) + 621355968000000000);
var deltaTicks = (eventEndTicks - eventStartTicks);
var durationMinutes = (deltaTicks / 10000000) / 60; // this is the tentative height.

// Initialize calculated values
ep.Top = top + 1;
ep.Height = durationMinutes;

// Handle cases of overflow from previous day to current day
if (colStart > ep.Start) {
var dayStartTicks = ((colStart.getTime() * 10000) + 621355968000000000);
var diff = eventEndTicks - dayStartTicks;
var durationSinceMidnight = (diff / 10000000) / 60;
ep.Top = Math.floor(top / this.cellHeight) * this.cellHeight + 1;
ep.Height = durationSinceMidnight;

// Ensure minimum height of event so title is readable
var minEventHeight = 30;
if (durationSinceMidnight < minEventHeight) {
ep.Height = minEventHeight;
}
}

// Handle case of overflow from current day to next day... or is that necessary?
if (ep.End > colEnd) {
ep.Height = Math.max(Math.ceil(boxBottom / this.cellHeight) * this.cellHeight - ep.Top, this.cellHeight - 1) + 1;
}
// ~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~~~~~~~~~

(The code is provided without any warranty, support, supervision, and offers no guarantee that it won't break your site, disrupt a hard drive, or punch you in the stomach.)

Quick fix for short events on day of calendar view:

// Commented-out original two lines below, and enhanced draw height logic between "~~~~~~" lines.
// Still room for improvements/tweaks, but does work on the tests I've tried.

// Original lines:
// --> ep.Top = Math.floor(top / this.cellHeight) * this.cellHeight + 1;
// --> ep.Height = Math.max(Math.ceil(boxBottom / this.cellHeight) * this.cellHeight - ep.Top, this.cellHeight - 1) + 1;

// ~~~~~~~~~~~~ START ~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Get duration of content (in minutes)
var eventStartTicks = ((ep.Start.getTime() * 10000) + 621355968000000000);
var eventEndTicks = ((ep.End.getTime() * 10000) + 621355968000000000);
var deltaTicks = (eventEndTicks - eventStartTicks);
var durationMinutes = (deltaTicks / 10000000) / 60; // this is the tentative height.

// declare static values
var minimumEventHeight = 30;

// Initialize calculated values
ep.Top = top + 1;
ep.Height = durationMinutes;

// Handle cases of overflow from previous day to current day
if (colStart > ep.Start) {
var dayStartTicks = ((colStart.getTime() * 10000) + 621355968000000000);
var diff = eventEndTicks - dayStartTicks;
var durationSinceMidnight = (diff / 10000000) / 60;
ep.Top = Math.floor(top / this.cellHeight) * this.cellHeight + 1;
ep.Height = durationSinceMidnight;

// Ensure minimum height of event so title is readable
if (durationSinceMidnight < minimumEventHeight) {
ep.Height = minimumEventHeight;
}
}

if (ep.Height < minimumEventHeight) {
ep.Height = minimumEventHeight;
}

// Handle case of overflow from current day to next day... or is that necessary?
if (ep.End > colEnd) {
ep.Height = Math.max(Math.ceil(boxBottom / this.cellHeight) * this.cellHeight - ep.Top, this.cellHeight - 1) + 1;
}
// ~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~~~~~~~~~