vertiCal.html

<template name="vertiCal">
  <div id="vertiCal">
    <div class="hidden-sm hidden-xs">
      {{> vertiCalDefaultHeader}}
      <div id="vertiCalScrollable" class="btn-group-vertical btn-block">
        {{> vertiCalDefaultUpArrow}}
        {{#each dates}}
          {{> vertiCalDefaultDateContent}}
        {{/each}}
        {{> vertiCalDefaultDownArrow}}
      </div>

      {{> vertiCalJumpToToday}}
    </div>
    {{> vertiCalJumpToDate}}
  </div>
</template>

<template name="vertiCalDefaultHeader">
  <div class="vertiCalHeader text-center">
    <h4>{{text}}</h4>
  </div>
</template>

<template name="vertiCalDefaultUpArrow">
  <div class="btn btn-default vertiCalControl">
    <i class="fa fa-sort-asc fa-fw"></i>
  </div>
</template>

<template name="vertiCalDefaultDateContent">
  <div class="btn btn-default {{active}} text-center">
    {{#if customBtnContents}}
      {{> customBtnContents}}
    {{else}}
      {{text}}
    {{/if}}
  </div>
</template>

<template name="vertiCalDefaultDownArrow">
  <div class="btn btn-default vertiCalControl">
    <i class="fa fa-sort-desc fa-fw"></i>
  </div>
</template>

<template name="vertiCalJumpToToday">
  <div id="vertiCalJumpToToday" class="btn btn-default btn-block">
    Jump to Today
  </div>
</template>

<template name="vertiCalJumpToDate">
  <div class="btn-block btn-group-vertical input-group-vertical">
    <input id="jumpToDateInput" class="form-control" value="{{value}}" type="date"/>
    <div class="visible-xs visible-sm">
      <button id="jumpToDateSubmit" class="btn btn-default btn-block">Jump to Date</button>
    </div>
    <div class="hidden-xs hidden-sm">
      <button id="jumpToDateSubmit" class="btn btn-default btn-block">Jump</button>
    </div>
  </div>
</template>