<div class="{{CSS_PREFIX}}timegrid-left" style="width: {{styles.leftWidth}}; font-size: {{styles.leftFontSize}};">
    {{#each timezones ~}}
        <div class="{{CSS_PREFIX}}timegrid-timezone" data-timezone-index="{{@index}}" style="position: absolute; top: 0; width: {{width}}%; left: {{left}}%; border-right: {{@root.styles.leftBorderRight}}; background-color: {{backgroundColor}};" >
        {{#if isPrimary}}
            {{#each timeSlots ~}}
                <div class="{{CSS_PREFIX}}timegrid-hour" style="height: {{@root.styles.oneHourHeight}}; color: {{color}}; font-weight: {{fontWeight}};">
                    <span style="{{#if hidden}}display:none{{/if}}">{{{timegridDisplayPrimayTime-tmpl this}}}</span>
                </div>
            {{/each ~}}
            {{#if @root.showHourMarker}}
                <div class="{{CSS_PREFIX}}timegrid-hourmarker" style="top:{{@root.hourmarkerTop}}%">
                    <div class="{{CSS_PREFIX}}timegrid-hourmarker-wrap">
                        <div class="{{CSS_PREFIX}}timegrid-hourmarker-time" style="color: {{@root.styles.currentTimeColor}}; font-size: {{@root.styles.currentTimeFontSize}}; font-weight: {{@root.styles.currentTimeFontWeight}}">{{hourmarkerText}}</div>
                    </div>
                </div>
            {{/if}}
        {{else}}
            {{#each timeSlots ~}}
                <div class="{{CSS_PREFIX}}timegrid-hour" style="height: {{@root.styles.oneHourHeight}}; color: {{color}}; font-weight: {{fontWeight}};">
                    <span style="{{#if hidden}}display:none{{/if}}">{{{timegridDisplayTime-tmpl this}}}</span>
                </div>
            {{/each ~}}
            {{#if @root.showHourMarker}}
                <div class="{{CSS_PREFIX}}timegrid-hourmarker" style="top:{{@root.hourmarkerTop}}%">
                    <div class="{{CSS_PREFIX}}timegrid-hourmarker-wrap">
                        <div class="{{CSS_PREFIX}}timegrid-hourmarker-time" style="color: {{@root.styles.currentTimeColor}}; font-size: {{@root.styles.currentTimeFontSize}};">{{hourmarkerText}}</div>
                    </div>
                </div>
            {{/if}}
        {{/if}}
        </div>
    {{/each ~}}
</div>
<div class="{{CSS_PREFIX}}timegrid-right" style="margin-left: {{@root.styles.leftWidth}};">
    <div class="{{CSS_PREFIX}}timegrid-h-grid">
        {{#each hoursLabels ~}}
        <div class="{{CSS_PREFIX}}timegrid-gridline" style="height: {{@root.styles.oneHourHeight}};
            {{#unless @last}}
            border-bottom: {{@root.styles.borderBottom}};
            {{/unless}}
        ">
            <div class="{{CSS_PREFIX}}timegrid-gridline-half" style="height: {{@root.styles.halfHourHeight}}; border-bottom: {{@root.styles.halfHourBorderBottom}};"></div>
        </div>
        {{/each ~}}
    </div>
    <div class="{{CSS_PREFIX}}timegrid-schedules">
        <div class="{{CSS_PREFIX}}timegrid-schedules-container"></div>
    </div>

    {{#if showHourMarker}}
    <div class="{{CSS_PREFIX}}timegrid-hourmarker" style="top:{{hourmarkerTop}}%">
        <div class="{{CSS_PREFIX}}timegrid-hourmarker-wrap">
            <div class="{{CSS_PREFIX}}timegrid-hourmarker-line-left" style="width:{{todaymarkerLeft}}%; border-top: {{styles.currentTimeLeftBorderTop}};"></div>
            <div class="{{CSS_PREFIX}}timegrid-todaymarker" style="left:{{todaymarkerLeft}}%; background-color: {{styles.currentTimeBulletBackgroundColor}}; ">today</div>
            <div class="{{CSS_PREFIX}}timegrid-hourmarker-line-today" style="left:{{todaymarkerLeft}}%; width: {{todaymarkerWidth}}%; border-top: {{styles.currentTimeTodayBorderTop}};"></div>
            <div class="{{CSS_PREFIX}}timegrid-hourmarker-line-right" style="left:{{todaymarkerRight}}%; border-top: {{styles.currentTimeRightBorderTop}};"></div>
        </div>
    </div>
    {{/if}}
</div>
