Span time frames in hour section

I have an hour split into 15 minute increments, using the following code,
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;
            }

and have double the size of an hour with the following command,
scheduler.config.hour_size_px = 168;

Most of my events are in 15 minute increments, doing it this way allows for the events to display so that the header for the next event does not lay over the text.

I need some assistance getting the 15 minute time frames to span properly. I have attached a screenshot do display the issue I am having.


html += “

” + format(date) + “
”;

In this line, instead of 21 you need to use 1/4 of hour height

var scale_height = scheduler.config.hour_size_px / 4; html += "<div style='height:"+scale_height+"px;line-height:"+scale_height+"px;'>" + format(date) + "</div>";

Thank you, that solved my issue.