// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`VCalendar should go to correct day when using next/prev public functions 1`] = `
<div class="v-calendar v-calendar-daily theme--light"
     role="grid"
>
  <div class="v-calendar-daily__head"
       style="margin-right: 0px;"
  >
    <div class="v-calendar-daily__intervals-head"
         style="width: 60px;"
    >
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Fri
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            11
          </span>
        </button>
      </div>
    </div>
  </div>
  <div class="v-calendar-daily__body">
    <div class="v-calendar-daily__scroll-area">
      <div class="v-calendar-daily__pane"
           style="height: 1152px;"
      >
        <div class="v-calendar-daily__day-container">
          <div class="v-calendar-daily__intervals-body"
               style="width: 60px;"
          >
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                12 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 PM
              </div>
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`VCalendar should go to correct day when using next/prev public functions 2`] = `
<div class="v-calendar v-calendar-daily theme--light"
     role="grid"
>
  <div class="v-calendar-daily__head"
       style="margin-right: 0px;"
  >
    <div class="v-calendar-daily__intervals-head"
         style="width: 60px;"
    >
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Sat
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            12
          </span>
        </button>
      </div>
    </div>
  </div>
  <div class="v-calendar-daily__body">
    <div class="v-calendar-daily__scroll-area">
      <div class="v-calendar-daily__pane"
           style="height: 1152px;"
      >
        <div class="v-calendar-daily__day-container">
          <div class="v-calendar-daily__intervals-body"
               style="width: 60px;"
          >
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                12 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 PM
              </div>
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`VCalendar should go to correct day when using next/prev public functions 3`] = `
<div class="v-calendar v-calendar-daily theme--light"
     role="grid"
>
  <div class="v-calendar-daily__head"
       style="margin-right: 0px;"
  >
    <div class="v-calendar-daily__intervals-head"
         style="width: 60px;"
    >
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Fri
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            11
          </span>
        </button>
      </div>
    </div>
  </div>
  <div class="v-calendar-daily__body">
    <div class="v-calendar-daily__scroll-area">
      <div class="v-calendar-daily__pane"
           style="height: 1152px;"
      >
        <div class="v-calendar-daily__day-container">
          <div class="v-calendar-daily__intervals-body"
               style="width: 60px;"
          >
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                12 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 PM
              </div>
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`VCalendar should render 4-day view 1`] = `
<div class="v-calendar v-calendar-daily theme--light"
     role="grid"
>
  <div class="v-calendar-daily__head"
       style="margin-right: 0px;"
  >
    <div class="v-calendar-daily__intervals-head"
         style="width: 60px;"
    >
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Mon
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            29
          </span>
        </button>
      </div>
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Tue
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            30
          </span>
        </button>
      </div>
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Wed
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            31
          </span>
        </button>
      </div>
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Thu
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            1
          </span>
        </button>
      </div>
    </div>
  </div>
  <div class="v-calendar-daily__body">
    <div class="v-calendar-daily__scroll-area">
      <div class="v-calendar-daily__pane"
           style="height: 1152px;"
      >
        <div class="v-calendar-daily__day-container">
          <div class="v-calendar-daily__intervals-body"
               style="width: 60px;"
          >
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                12 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 PM
              </div>
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`VCalendar should render day view 1`] = `
<div class="v-calendar v-calendar-daily theme--light"
     role="grid"
>
  <div class="v-calendar-daily__head"
       style="margin-right: 0px;"
  >
    <div class="v-calendar-daily__intervals-head"
         style="width: 60px;"
    >
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Mon
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            29
          </span>
        </button>
      </div>
    </div>
  </div>
  <div class="v-calendar-daily__body">
    <div class="v-calendar-daily__scroll-area">
      <div class="v-calendar-daily__pane"
           style="height: 1152px;"
      >
        <div class="v-calendar-daily__day-container">
          <div class="v-calendar-daily__intervals-body"
               style="width: 60px;"
          >
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                12 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 PM
              </div>
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`VCalendar should render month view 1`] = `
<div class="v-calendar-monthly v-calendar-weekly v-calendar theme--light"
     role="grid"
>
  <div role="row"
       class="v-calendar-weekly__head"
  >
    <div role="columnheader"
         class="v-calendar-weekly__head-weekday v-present v-outside"
    >
      Sun
    </div>
    <div role="columnheader"
         class="v-calendar-weekly__head-weekday v-future"
    >
      Mon
    </div>
    <div role="columnheader"
         class="v-calendar-weekly__head-weekday v-future"
    >
      Tue
    </div>
    <div role="columnheader"
         class="v-calendar-weekly__head-weekday v-future"
    >
      Wed
    </div>
    <div role="columnheader"
         class="v-calendar-weekly__head-weekday v-future"
    >
      Thu
    </div>
    <div role="columnheader"
         class="v-calendar-weekly__head-weekday v-future"
    >
      Fri
    </div>
    <div role="columnheader"
         class="v-calendar-weekly__head-weekday v-future"
    >
      Sat
    </div>
  </div>
  <div role="row"
       class="v-calendar-weekly__week"
  >
    <div role="cell"
         class="v-calendar-weekly__day v-past v-outside"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            31
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            Jan 1
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            2
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            3
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            4
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            5
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            6
          </span>
        </button>
      </div>
    </div>
  </div>
  <div role="row"
       class="v-calendar-weekly__week"
  >
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            7
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            8
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            9
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            10
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            11
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            12
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            13
          </span>
        </button>
      </div>
    </div>
  </div>
  <div role="row"
       class="v-calendar-weekly__week"
  >
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            14
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            15
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            16
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            17
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            18
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            19
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            20
          </span>
        </button>
      </div>
    </div>
  </div>
  <div role="row"
       class="v-calendar-weekly__week"
  >
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            21
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            22
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            23
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            24
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            25
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            26
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            27
          </span>
        </button>
      </div>
    </div>
  </div>
  <div role="row"
       class="v-calendar-weekly__week"
  >
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            28
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            29
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            30
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            31
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past v-outside"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            Feb 1
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past v-outside"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            2
          </span>
        </button>
      </div>
    </div>
    <div role="cell"
         class="v-calendar-weekly__day v-past v-outside"
    >
      <div class="v-calendar-weekly__day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--small transparent"
        >
          <span class="v-btn__content">
            3
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`VCalendar should render week view 1`] = `
<div class="v-calendar v-calendar-daily theme--light"
     role="grid"
>
  <div class="v-calendar-daily__head"
       style="margin-right: 0px;"
  >
    <div class="v-calendar-daily__intervals-head"
         style="width: 60px;"
    >
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Sun
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            28
          </span>
        </button>
      </div>
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Mon
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            29
          </span>
        </button>
      </div>
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Tue
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            30
          </span>
        </button>
      </div>
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Wed
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            31
          </span>
        </button>
      </div>
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Thu
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            1
          </span>
        </button>
      </div>
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Fri
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            2
          </span>
        </button>
      </div>
    </div>
    <div class="v-calendar-daily_head-day v-past">
      <div class="v-calendar-daily_head-weekday">
        Sat
      </div>
      <div class="v-calendar-daily_head-day-label">
        <button type="button"
                class="v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light v-size--default transparent"
        >
          <span class="v-btn__content">
            3
          </span>
        </button>
      </div>
    </div>
  </div>
  <div class="v-calendar-daily__body">
    <div class="v-calendar-daily__scroll-area">
      <div class="v-calendar-daily__pane"
           style="height: 1152px;"
      >
        <div class="v-calendar-daily__day-container">
          <div class="v-calendar-daily__intervals-body"
               style="width: 60px;"
          >
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 AM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                12 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                1 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                2 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                3 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                4 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                5 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                6 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                7 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                8 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                9 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                10 PM
              </div>
            </div>
            <div class="v-calendar-daily__interval"
                 style="height: 48px;"
            >
              <div class="v-calendar-daily__interval-text">
                11 PM
              </div>
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
          <div class="v-calendar-daily__day v-past">
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
            <div class="v-calendar-daily__day-interval"
                 style="height: 48px;"
            >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;