time.hbs

<div class="{{CSS_PREFIX}}time-date-schedule-block-wrap" style="margin-right: {{styles.marginRight}};">
{{#each matrices}}
    {{#each this}}
        {{#each this}}
        {{#if this ~}}
        <div class="{{CSS_PREFIX}}time-date-schedule-block {{#if model.isPending}} {{CSS_PREFIX}}time-date-schedule-block-pending{{/if}}" data-id="{{stamp model}}"
            style="{{time-scheduleBlock this}};
                {{#fi left '!==' 0}}
                    padding-left: {{@root.styles.paddingLeft}};
                {{/fi}}
            ">
            <div data-schedule-id="{{model.id}}" data-calendar-id="{{model.calendarId}}" class="{{CSS_PREFIX}}time-schedule {{#if model.isFocused}}{{CSS_PREFIX}}time-schedule-focused {{/if}}"
                style="
                {{#unless croppedEnd}}
                    border-bottom-left-radius: {{@root.styles.borderRadius}};
                    border-bottom-right-radius: {{@root.styles.borderRadius}};
                {{/unless}}
                {{#unless croppedStart}}
                    border-top-left-radius: {{@root.styles.borderRadius}};
                    border-top-right-radius: {{@root.styles.borderRadius}};
                {{/unless}}
                {{#if model.isFocused}}
                    color: #ffffff; background-color:{{model.color}}; border-color:{{model.color}};
                {{else}}
                    color:{{model.color}}; background-color:{{model.bgColor}}; border-color:{{model.borderColor}};
                {{/if}}
                 {{model.customStyle}}"
            >
            {{#if hasGoingDuration}}
                <div class="{{CSS_PREFIX}}time-schedule-content {{CSS_PREFIX}}time-schedule-content-travel-time" style="height: {{goingDurationHeight}}px;
                {{#if model.isFocused}}
                    border-color:{{model.color}};
                {{else}}
                    border-color:{{model.borderColor}};
                {{/if}}
                border-bottom: 1px dashed {{travelBorderColor}};">{{{goingDuration-tmpl model}}}</div>
            {{/if}}
                <div class="{{CSS_PREFIX}}time-schedule-content {{CSS_PREFIX}}time-schedule-content-time" style="height: {{modelDurationHeight}}px;
                {{#if model.isFocused}}
                    border-color:{{model.color}};
                {{else}}
                    border-color:{{model.borderColor}};
                {{/if}}
                {{#if hasComingDuration}}border-bottom: 1px dashed {{travelBorderColor}};{{/if}}">
                    {{{time-tmpl model}}}
                </div>
            {{#if hasComingDuration}}
                <div class="{{CSS_PREFIX}}time-schedule-content {{CSS_PREFIX}}time-schedule-content-travel-time" style="height: {{comingDurationHeight}}px;
                {{#if model.isFocused}}
                    border-color:{{model.color}};
                {{else}}
                    border-color:{{model.borderColor}};
                {{/if}};">{{{comingDuration-tmpl model}}}</div>
            {{/if}}
            </div>
            {{#unless (or croppedEnd model.isReadOnly)}}<div class="{{CSS_PREFIX}}time-resize-handle handle-x" style="margin-left: {{@root.styles.paddingLeft}};">&nbsp;</div>{{/unless}}
        </div>
        {{/if ~}}
        {{/each}}
    {{/each}}
{{/each}}
</div>