sogo/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox

<?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:label="OGo:label">
  <md-dialog flex="40">
    <form name="eventForm" ng-submit="viewer.save(eventForm)">
      <md-toolbar class="md-padding" ng-class="viewer.component.getClassName('bg')">
        <div class="md-toolbar-tools">
          <md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
          <h2 class="md-flex">
            <!-- classification -->
            <md-icon ng-if="viewer.component.classification == 'confidential'">visibility_off</md-icon>
            <md-icon ng-if="viewer.component.classification == 'private'">vpn_key</md-icon>
            <!-- summary -->
            {{viewer.component.summary}}
            <!-- priority -->
            <md-icon ng-repeat="i in viewer.component.priority | range">star</md-icon>
          </h2>
          <md-button class="md-icon-button" ng-click="viewer.close()">
            <md-icon aria-label="Close dialog">close</md-icon>
          </md-button>
        </div>
      </md-toolbar>
      <md-dialog-content>
      <md-list>
        <!-- categories -->
        <md-list-item ng-show="viewer.component.categories.length > 0">
          <md-chips class="sg-readonly" ng-model="viewer.component.categories" readonly="true">
            <md-chip-template>
              <span>{{$chip}}</span>
            </md-chip-template>
          </md-chips>
        </md-list-item>
        <!-- location -->
        <md-list-item ng-show="viewer.component.location">
          <md-icon>place</md-icon>
          <p>{{viewer.component.location}}</p>
        </md-list-item>
        <!-- calendar -->
        <md-list-item>
          <md-icon>event</md-icon>
          <p>{{viewer.component.calendar}}</p>
        </md-list-item>
        <!-- start/end dates -->
        <md-list-item class="md-2-line">
          <md-icon>access_time</md-icon>
          <div layout="row" class="md-flex">
            <div class="md-list-item-text" ng-show="viewer.component.startDate">
              <p><var:string label:value="Start"/></p>
              <h3>
                {{viewer.component.localizedStartDate}}
                <span ng-hide="viewer.component.isAllDay"> {{viewer.component.localizedStartTime}}</span>
              </h3>
            </div>
            <div class="md-list-item-text" ng-show="viewer.component.endDate">
              <p><var:string label:value="End"/></p>
              <h3>
                {{viewer.component.localizedEndDate}}
                <span ng-hide="viewer.component.isAllDay">{{viewer.component.localizedEndTime}}</span>
              </h3>
            </div>
          </div>
        </md-list-item>
        <!-- is transparent -->
        <md-list-item ng-show="viewer.component.isTransparent">
          <md-icon>event_available</md-icon>
          <p><var:string label:value="Show Time as Free"/></p>
        </md-list-item>
        <!-- send appointment notifications -->
        <md-list-item ng-show="viewer.component.sendAppointmentNotifications">
          <md-icon>send</md-icon>
          <p><var:string label:value="Send Appointment Notifications"/></p>
        </md-list-item>
        <!-- attach urls -->
        <md-list-item ng-show="viewer.component.attachUrls.length > 0">
          <md-icon>link</md-icon>
          <p ng-repeat="url in viewer.component.attachUrls"><a ng-href="{{url.value}}">{{url.value}}</a></p>
        </md-list-item>
        <!-- comment -->
        <md-list-item ng-show="viewer.component.comment">
          <md-icon>mode_comment</md-icon>
          <p>{{viewer.component.comment}}</p>
        </md-list-item>
        <!-- repeat -->
        <md-list-item ng-show="viewer.component.repeat">
          <md-icon>repeat</md-icon>
          <p><!-- viewer.component.repeat.toString() --></p>
        </md-list-item>
        <!-- reminder -->
        <md-list-item ng-show="viewer.component.$hasAlarm">
          <md-icon>alarm</md-icon>
          <p><!-- viewer.component.alarm.toString() --></p>
        </md-list-item>
        <!-- attendees -->
        <md-list-item ng-show="viewer.component.attendees.length > 0">
          <div class="pseudo-input-container">
            <label class="pseudo-input-label"><var:string label:value="Attendees"/></label>
            <!-- md-contact-chips don't support "readonly", so we build them using md-chips
                 in readonly mode and a template similar to the one of md-contact-chips -->
            <md-chips class="md-contact-chips"
                      ng-model="viewer.component.attendees"
                      readonly="true">
              <md-chip-template>
                <div class="md-contact-avatar"><img src="#" ng-src="{{$chip.image}}" alt="{{$chip.name}}"/></div>
                <div class="md-contact-name">{{$chip.name}}</div>
                <md-icon ng-class="'icon-' + $chip.status"><!-- partstat --></md-icon>
              </md-chip-template>
            </md-chips>
          </div>
        </md-list-item>
      </md-list>
    </md-dialog-content>
    <!-- actions -->
    <div class="md-actions">
      <md-button type="button" ng-click="viewer.edit()" ng-hide="viewer.component.occurrenceId">
        <var:string label:value="Edit"/>
      </md-button>
      <md-button type="button" ng-click="viewer.editAllOccurrences()" ng-show="viewer.component.occurrenceId">
        <var:string label:value="Edit All Occurrences"/>
      </md-button>
      <md-button type="button" ng-click="viewer.edit()" ng-show="viewer.component.occurrenceId">
        <var:string label:value="Edit This Occurrence"/>
      </md-button>
    </div>
  </form>
</md-dialog>
</container>