<?xml version="1.0" standalone="yes"?>
  <container
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:var="http://www.skyrix.com/od/binding"
    xmlns:const="http://www.skyrix.com/od/constant"
    xmlns:rsrc="OGo:url"
    xmlns:label="OGo:label">
    <a href="#"
      class="leftNavigationArrow"
      var:date="prevDayQueryParameters.day"
      onclick="return onCalendarGotoDay(this);"
      ><img rsrc:src="arrow-left.png"/></a>
    <span class="daysHeader">
      <span class="day2"><a href="#"
          var:date="dayBeforePrevDayQueryParameters.day"
          onclick="return onCalendarGotoDay(this);"
          ><var:string value="dayBeforeYesterdayName"
            /></a></span
        ><span class="day1"><a href="#"
          var:date="prevDayQueryParameters.day"
          onclick="return onCalendarGotoDay(this);"
          ><var:string value="yesterdayName"
            /></a></span
        ><span class="day0"><var:string value="currentDayName" /></span
        ><span class="day1"><a href="#"
          var:date="nextDayQueryParameters.day"
          onclick="return onCalendarGotoDay(this);"
          ><var:string value="tomorrowName"
            /></a></span
        ><span class="day2"><a href="#"
          var:date="dayAfterNextDayQueryParameters.day"
          onclick="return onCalendarGotoDay(this);"
          ><var:string value="dayAfterTomorrowName"
            /></a></span
        ></span>
    <a href="#"
      class="rightNavigationArrow"
      var:date="nextDayQueryParameters.day"
      onclick="return onCalendarGotoDay(this);"
      ><img rsrc:src="arrow-right.png"/></a>

    <style type="text/css">
      DIV.day
      {
        width: <var:string value="dayWidthPercentage" />% !important;
      }
      <var:foreach list="subscriptionUsers" item="currentTableUser">
      DIV[class~='day'].appointmentsOf<var:string value="currentTableUser" />
      {
        left: <var:string value="currentTableUserDayLeftPercentage" />% !important;
      }
      </var:foreach>
    </style>

    <div id="calendarContent">
      <div id="daysView" class="daysView multicolumnDayView">
        <div class="hours">
          <var:foreach list="hoursToDisplay" item="currentTableHour"
            ><div class="hour"><var:string value="currentTableHour" />:00</div
              ></var:foreach>
        </div>
        <div class="hourLines">
          <div class="hourLine hourLine0"><!-- space --></div
            ><div class="hourLine hourLine1"><!-- space --></div
            ><div class="hourLine hourLine2"><!-- space --></div
            ><div class="hourLine hourLine3"><!-- space --></div
            ><div class="hourLine hourLine4"><!-- space --></div
            ><div class="hourLine hourLine5"><!-- space --></div
            ><div class="hourLine hourLine6"><!-- space --></div
            ><div class="hourLine hourLine7"><!-- space --></div
            ><div class="hourLine hourLine8"><!-- space --></div
            ><div class="hourLine hourLine9"><!-- space --></div
            ><div class="hourLine hourLine10"><!-- space --></div
            ><div class="hourLine hourLine11"><!-- space --></div
            ><div class="hourLine hourLine12"><!-- space --></div
            ><div class="hourLine hourLine13"><!-- space --></div
            ><div class="hourLine hourLine14"><!-- space --></div
            ><div class="hourLine hourLine15"><!-- space --></div
            ><div class="hourLine hourLine16"><!-- space --></div
            ><div class="hourLine hourLine17"><!-- space --></div
            ><div class="hourLine hourLine18"><!-- space --></div
            ><div class="hourLine hourLine19"><!-- space --></div
            ><div class="hourLine hourLine20"><!-- space --></div
            ><div class="hourLine hourLine21"><!-- space --></div
            ><div class="hourLine hourLine22"><!-- space --></div
            ><div class="hourLine hourLine23"><!-- space --></div>
        </div>

        <div class="days" var:day="selectedDate.shortDateString">
          <var:foreach list="subscriptionUsers" item="currentTableUser"
            ><div var:class="currentUserClasses"
              var:user="currentTableUser"
              ><div class="header"><var:string value="currentTableUser" /></div>
              <div class="appointments">
                <var:foreach list="hoursToDisplay" item="currentTableHour"
                  ><div var:class="clickableHourCellClass"
                    var:hour="currentAppointmentHour">
                  </div></var:foreach>
                <var:foreach list="appointmentsForCurrentUser" item="currentAppointment"
                  ><var:component className="UIxCalInlineAptView"
                    dayStartHour="dayStartHour"
                    dayEndHour="dayEndHour"
                    appointment="currentAppointment"
                    formatter="aptFormatter"
                    tooltipFormatter="aptTooltipFormatter"
                    url="appointmentViewURL"
                    const:style="dayoverview"
                    queryDictionary="currentDateQueryParameters"
                    referenceDate="selectedDate"
                    canAccess="canAccessApt"
                    /></var:foreach
                  >
              </div>
            </div>
          </var:foreach>
        </div>
      </div>
    </div>
  </container>
