Change to scheduler.templates.hour_scale shortens event

[fivefoot12]

I have implemented the following code to have a 15 minute hour scale,

var step = 15;
var format = scheduler.date.date_to_str("%h:%i %A");

            scheduler.config.hour_size_px = (60 / step) * 21;
            scheduler.templates.hour_scale = function (date) {
                html = "";
                for (var i = 0; i < 60 / step; i++) {
                    html += "<div style='height:21px;line-height:21px;'>" + format(date) + "</div>";
                    date = scheduler.date.add(date, step, "minute");
                }
                return html;
            }

In doing this any event that is greater than 15 minutes is shortened by 15 minutes.
Is there a way to correct this?

[Ilya]

Hello,

Please attach screenshot.

Kind regards,
Ilya

[fivefoot12]

The screenshot is attached. There are a couple of things that are happening, most of the events that fit into the 15 minute time slots are overrunning the timeslot, and events greater than 15 minutes do not represent the complete time. The event details are displayed to show the actual event time. Thank you for your assistance.