UIxCalMainView.wox

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE var:component>
<var:component
    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"
    className="UIxPageFrame"
    title="title"
    const:jsFiles="Common.js, Preferences.services.js, Contacts.services.js, Mailer.services.js, Scheduler.js, Scheduler.services.js">
  <script type="text/javascript">
    var firstDayOfWeek = <var:string value="firstDayOfWeek"/>;
    var dayStartHour = <var:string value="dayStartHour"/>;
    var currentView = '<var:string value="currentView"/>';
    var localeCode = '<var:string value="localeCode" />';
  </script>
  <var:component className="UIxCalendarSelector" />
  <style type="text/css">
  <var:if condition="horizontalDragHandleStyle">
    DIV#verticalDragHandle, DIV#rightPanel
     { left: <var:string value="horizontalDragHandleStyle" />; }
    DIV#leftPanel
     { width: <var:string value="horizontalDragHandleStyle" />; }
  </var:if><var:if condition="verticalDragHandleStyle">
    DIV#rightDragHandle, DIV#calendarView
     { top: <var:string value="verticalDragHandleStyle" />; }
  </var:if><var:if condition="eventsListViewStyle">
    DIV#schedulerTabs
     { height: <var:string value="eventsListViewStyle" />; }
  </var:if>
  </style>

  <!--
  <div class="preload" style="visibility: hidden;">
    <img rsrc:src="event-gradient.png"/>
  </div>
  <img rsrc:src="event7.png" id="DnDLeftPanelImage" style="visibility: hidden;"/>
  <div class="menu" id="monthListMenu">
    <ul>
      <var:foreach list="monthMenuItems" item="monthMenuItem"
	><li var:month="monthMenuItem"
	  ><var:string value="monthMenuItemLabel" /></li>
      </var:foreach
	></ul>
  </div>
  
  <div class="menu" id="yearListMenu">
    <ul>
      <var:foreach list="yearMenuItems" item="yearMenuItem"
	><li><var:string value="yearMenuItem" /></li>
      </var:foreach
        ></ul>
  </div>

  <div class="menu" id="eventsListMenu">
    <ul>
      <li><var:string label:value="New Event..."/></li>
      <li><var:string label:value="New Task..."/></li>
      <li>!- separator -</li>
      <li><var:string label:value="Edit Selected Event..."/></li>
      <li><var:string label:value="Delete Selected Event"/></li>
      <li>!- separator -</li>
      <li><var:string label:value="Select All"/></li>
      <li>!- separator -</li>
      <li><var:string label:value="Workweek days only"/></li>
      <li><var:string label:value="Tasks in View"/></li>
    </ul>
  </div>

  <div class="menu" id="tasksListMenu">
    <ul>
      <li><var:string label:value="Open Task..."/></li>
      <li><var:string label:value="New Task..."/></li>
      <li>!- separator -</li>
      <li><var:string label:value="Mark Completed"/></li>
      <li><var:string label:value="Delete Task"/></li>
      <li>!- separator -</li>
      <li><var:string label:value="View Raw Source"/></li>
    </ul>
  </div>

  <div class="menu" id="calendarsMenu">
    <ul>
      <li><var:string label:value="Properties"/></li>
      <li>!- separator -</li>
      <li><var:string label:value="New Calendar..."/></li>
      <li id="deleteCalendarMenuItem"><var:string label:value="Delete Calendar"/></li>
      <li>!- separator -</li>
      <li><var:string label:value="Export Calendar..."/></li>
      <li><var:string label:value="Import Events..."/></li>
      <li><var:string label:value="Publish Calendar..."/></li>
      <li>!- separator -</li>
      <li><var:string label:value="Reload Remote Calendars"/></li>
      <li>!- separator -</li>
      <li><var:string label:value="Sharing..." /></li>
    </ul>
  </div>
  
  <div id="eventDialog" style="display: none;" class="dialog">
    <div>
      <h1>!- space -</h1>
      <p><span>!- space -</span></p>
      <p><span class="label"><var:string label:value="Calendar" /></span> <span>!- space -</span></p>
      <p><span class="label"><var:string label:value="Location" /></span> <span>!- space -</span></p>
      <p><span class="label"><var:string label:value="Created by" /></span> <span>!- space -</span></p>
      <p class="description">!- space -</p>
    </div>
  </div>

  <div id="uploadDialog" style="display: none" class="dialog left">
    <div>
      <h3><var:string label:value="Import Events"/></h3>
      <p class="prompt"><var:string label:value="Select an iCalendar file (.ics)."/></p>
      <form const:href="" name="uploadForm" id="uploadForm" method="post"
        enctype="multipart/form-data"
        onsubmit="return AIM.submit(this, {'onStart' : validateUploadForm, 
        'onComplete' : uploadCompleted})">
        <p class="prompt"><input type="file" name="calendarFile" class="textField" id="calendarFile" />
        <a href="#" class="button actionButton" id="uploadSubmit"
            onclick="if($('uploadForm').onsubmit()) $('uploadForm').submit()">
            <span><var:string label:value="Upload" /></span></a>
        <a href="#" class="button" const:id="uploadCancel">
            <span><var:string label:value="Cancel" /></span></a>
      </p></form>
      <hr/>
    </div>
  </div>

  <div id="uploadResults" style="display: none" class="dialog left">
    <div>
      <h3><var:string label:value="Import Events"/></h3>
      <p><span id="uploadResultsContent">!- empty -</span>
      <a href="#" class="button" const:id="uploadOK">
          <span><var:string label:value="Done" /></span></a></p>
      <hr/>
    </div>
    </div>
    -->

  <main class="view md-layout-fill" ui-view="calendars" layout="row" ng-controller="navController"><!-- calendars list --></main>

  <script type = "text/ng-template" id="UIxCalMainFrame">
    <!-- calendars colors -->
    <div sg-folder-stylesheet="true"
         ng-repeat="calendar in calendars.service.$calendars"
         ng-model="calendar"><!-- stylesheet --></div>
    <div sg-folder-stylesheet="true"
         ng-repeat="calendar in calendars.service.$subscriptions"
         ng-model="calendar"><!-- stylesheet --></div>
    <!-- Sidenav -->
    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
      <var:component className="UIxSidenavToolbarTemplate" />
      <md-content md-scroll-y="md-scroll-y" class="md-flex">
        <!-- User's calendars -->
        <section>
          <md-subheader class="sg-md-subheader">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="Calendars"/></span>
              <md-button class="sg-icon-button"
                         label:aria-label="New Calendar..."
                         ng-click="calendars.newCalendar()">
                <md-icon>add_circle_outline</md-icon>
              </md-button>
            </div>
          </md-subheader>
          <md-list>
            <md-list-item ng-repeat="calendar in calendars.service.$calendars">
              <md-checkbox ng-model="calendar.active"
                           ng-class="calendar.getClassName('checkbox')"
                           ng-true-value="1"
                           ng-false-value="0"
                           label:aria-label="Enable"><!-- enable --></md-checkbox>
              <p class="sg-item-name">{{calendar.name}}</p>
              <md-menu class="md-secondary" label:aria-label="Options">
                <md-icon label:aria-label="Options"
                         ng-click="$mdOpenMenu()"
                         md-menu-origin="md-menu-origin">more_vert</md-icon>
                <md-menu-content width="2">
                  <md-menu-item>
                    <md-button ng-click="calendars.confirmDelete(calendar)">
                      <var:string label:value="Delete"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button ng-click="calendars.exportCalendar()">
                      <var:string label:value="Export"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider><!-- divider --></md-menu-divider>
                  <md-menu-item>
                    <md-button ng-click="calendars.showLinks(calendar)">
                      <var:string label:value="Links to this Calendar"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button ng-click="calendars.share(calendar)">
                      <var:string label:value="Sharing..."/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider><!-- divider --></md-menu-divider>
                  <md-menu-item>
                    <md-button ng-click="calendars.showProperties(calendar)">
                      <var:string label:value="Properties"/>
                    </md-button>
                  </md-menu-item>
                </md-menu-content>
              </md-menu>
            </md-list-item>
          </md-list>
        </section>
        <!-- Subscriptions -->
        <section>
          <md-subheader class="sg-md-subheader">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="Subscriptions"/></span>
              <md-button class="sg-icon-button"
                         label:aria-label="Subscribe to a Calendar..."
                         sg-subscribe="calendar"
                         sg-subscribe-on-select="calendars.subscribeToFolder(folderData)">
                <md-icon>add_circle_outline</md-icon>
              </md-button>
            </div>
          </md-subheader>
          <md-list>
            <md-list-item ng-repeat="calendar in calendars.service.$subscriptions">
              <md-checkbox ng-model="calendar.active"
                           ng-class="calendar.getClassName('checkbox')"
                           ng-true-value="1"
                           ng-false-value="0"
                           label:aria-label="Enable"><!-- enable --></md-checkbox>
              <p class="sg-item-name">{{calendar.name}}</p>
              <md-menu class="md-secondary" label:aria-label="Options" ng-click="true">
                <md-icon label:aria-label="Options"
                         ng-click="$mdOpenMenu()"
                         md-menu-origin="md-menu-origin">more_vert</md-icon>
                <md-menu-content width="2">
                  <md-menu-item>
                    <md-button ng-click="calendars.confirmDelete(calendar)">
                      <var:string label:value="Unsubscribe Calendar"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider><!-- divider --></md-menu-divider>
                  <md-menu-item>
                    <md-button ng-click="calendars.showLinks(calendar)">
                      <var:string label:value="Links to this Calendar"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider><!-- divider --></md-menu-divider>
                  <md-menu-item>
                    <md-button ng-click="calendars.showProperties(calendar)">
                      <var:string label:value="Properties"/>
                    </md-button>
                  </md-menu-item>
                </md-menu-content>
              </md-menu>
            </md-list-item>
          </md-list>
        </section>
        <!-- Web Calendars -->
        <section>
          <md-subheader class="sg-md-subheader">
            <div layout="row" layout-align="space-between center">
              <span><var:string label:value="Web Calendars"/></span>
              <md-button class="sg-icon-button"
                         label:aria-label="Subscribe to a web calendar..."
                         ng-click="calendars.addWebCalendar()">
                <md-icon>add_circle_outline</md-icon>
              </md-button>
            </div>
          </md-subheader>
          <md-list>
            <md-list-item ng-repeat="calendar in calendars.service.$webcalendars">
              <md-checkbox ng-model="calendar.active"
                           ng-class="calendar.getClassName('checkbox')"
                           ng-true-value="1"
                           ng-false-value="0"
                           label:aria-label="Enable"><!-- enable --></md-checkbox>
              <p class="sg-item-name">{{calendar.name}}</p>
              <md-menu class="md-secondary" label:aria-label="Options" ng-click="true">
                <md-icon label:aria-label="Options"
                         ng-click="$mdOpenMenu()"
                         md-menu-origin="md-menu-origin">more_vert</md-icon>
                <md-menu-content width="2">
                  <md-menu-item>
                    <md-button ng-click="calendars.confirmDelete(calendar)">
                      <var:string label:value="Delete"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider><!-- divider --></md-menu-divider>
                  <md-menu-item>
                    <md-button ng-click="calendars.showLinks(calendar)">
                      <var:string label:value="Links to this Calendar"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider><!-- divider --></md-menu-divider>
                  <md-menu-item>
                    <md-button ng-click="calendars.showProperties(calendar)">
                      <var:string label:value="Properties"/>
                    </md-button>
                  </md-menu-item>
                </md-menu-content>
              </md-menu>
            </md-list-item>
          </md-list>
        </section>
      </md-content>
    </md-sidenav>

    <!-- Main section -->
    <section layout="column" class="sg-app-content md-layout-fill"
             ng-controller="CalendarListController as list">
      <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
        <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
          <var:component className="UIxTopnavToolbarTemplate" />
          <!-- <div class="sg-toolbar-group-2">
            <md-button class="sg-icon-button" label:aria-label="Search">
              <md-icon>search</md-icon>
            </md-button>
          </div> -->
        </div><!-- .md-toolbar-tools -->
        <div class="md-toolbar-tools" layout="row"
             layout-align="space-between center"
             ng-show="list.component.$selectedCount() == 0">
          <!-- sort/filter mode -->
          <div class="view-list" layout="row" layout-align="space-between center"
               ng-hide="list.mode.search">
            <div class="sg-toolbar-group">
              <md-button class="sg-icon-button" label:aria-label="Search"
                         ng-click="list.mode.search = true">
                <md-icon>search</md-icon>
              </md-button>
            </div>
            <div class="sg-toolbar-group-last">
              <md-menu>
                <md-button class="sg-icon-button" label:aria-label="Filter"
                           ng-click="$mdOpenMenu()">
                  <md-icon>filter_list</md-icon>
                </md-button>
                <md-menu-content>
                  <md-menu-item>
                    <md-button ng-click="list.filter('view_all')">
                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_all') }">
                        <!-- selected --></md-icon> <var:string label:value="view_all"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button ng-click="list.filter('view_today')">
                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_today') }">
                        <!-- selected --></md-icon> <var:string label:value="view_today"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button ng-click="list.filter('view_next7')">
                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next7') }">
                        <!-- selected --></md-icon> <var:string label:value="view_next7"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button ng-click="list.filter('view_next14')">
                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next14') }">
                        <!-- selected --></md-icon> <var:string label:value="view_next14"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button ng-click="list.filter('view_next31')">
                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_next31') }">
                        <!-- selected --></md-icon><var:string label:value="view_next31"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button ng-click="list.filter('view_thismonth')">
                      <md-icon ng-class="{ 'icon-check': list.filteredBy('view_thismonth') }">
                        <!-- selected --></md-icon><var:string label:value="view_thismonth"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'events'">
                    <md-button ng-click="list.filter('view_future')">
                      <md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_future' }">
                        <!-- selected --></md-icon> <var:string label:value="view_future"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'events'">
                    <md-button ng-click="list.filter('view_selectedday')">
                      <md-icon ng-class="{ 'icon-check': list.component.$queryEvents.filterpopup == 'view_selectedday' }">
                        <!-- selected --></md-icon> <var:string label:value="view_selectedday"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'tasks'">
                    <md-button ng-click="list.filter('view_not_started')">
                      <md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_not_started' }">
                        <!-- selected --></md-icon> <var:string label:value="view_not_started"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'tasks'">
                    <md-button ng-click="list.filter('view_overdue')">
                      <md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_overdue' }">
                        <!-- selected --></md-icon> <var:string label:value="view_overdue"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'tasks'">
                    <md-button ng-click="list.filter('view_incomplete')">
                      <md-icon ng-class="{ 'icon-check': list.component.$queryTasks.filterpopup == 'view_incomplete' }">
                        <!-- selected --></md-icon> <var:string label:value="view_incomplete"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider ng-if="list.componentType == 'tasks'"><!-- divider --></md-menu-divider>
                  <md-menu-item ng-if="list.componentType == 'tasks'">
                    <md-button ng-click="list.component.$filter(list.componentType)">
                      <md-checkbox
                          ng-model="list.component.$queryTasks.show_completed"
                          ng-true-value="1"
                          ng-false-value="0"> <var:string label:value="Show completed tasks"/></md-checkbox>
                    </md-button>
                  </md-menu-item>
                </md-menu-content>
              </md-menu>
              <md-menu>
                <md-button class="sg-icon-button" label:aria-label="Sort"
                           ng-click="$mdOpenMenu()">
                  <md-icon>sort</md-icon>
                </md-button>
                <md-menu-content>
                  <md-menu-item>
                    <md-button ng-click="list.sort('title')">
                      <md-icon ng-class="{ 'icon-check': list.sortedBy('title') }">
                        <!-- selected --></md-icon> <var:string label:value="Title"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button ng-click="list.sort('location')">
                      <md-icon ng-class="{ 'icon-check': list.sortedBy('location') }">
                        <!-- selected --></md-icon> <var:string label:value="Location"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item>
                    <md-button ng-click="list.sort('calendarName')">
                      <md-icon ng-class="{ 'icon-check': list.sortedBy('calendarName') }">
                        <!-- selected --></md-icon> <var:string label:value="Calendar"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'events'">
                    <md-button ng-click="list.sort('start')">
                      <md-icon ng-class="{ 'icon-check': list.sortedBy('start') }">
                        <!-- selected --></md-icon> <var:string label:value="Start"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'events'">
                    <md-button ng-click="list.sort('end')">
                      <md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
                        <!-- selected --></md-icon> <var:string label:value="End"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'tasks'">
                    <md-button ng-click="list.sort('end')">
                      <md-icon ng-class="{ 'icon-check': list.sortedBy('end') }">
                        <!-- selected --></md-icon> <var:string label:value="Due Date"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'tasks'">
                    <md-button ng-click="list.sort('priority')">
                      <md-icon ng-class="{ 'icon-check': list.sortedBy('priority') }">
                        <!-- selected --></md-icon> <var:string label:value="Priority"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'tasks'">
                    <md-button ng-click="list.sort('category')">
                      <md-icon ng-class="{ 'icon-check': list.sortedBy('category') }">
                        <!-- selected --></md-icon> <var:string label:value="Category"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'tasks'">
                    <md-button ng-click="list.sort('status')">
                      <md-icon ng-class="{ 'icon-check': list.sortedBy('status') }">
                        <!-- selected --></md-icon> <var:string label:value="Status"/>
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider><!-- divider --></md-menu-divider>
                  <md-menu-item ng-if="list.componentType == 'events'">
                    <md-button ng-click="list.component.$filter(list.componentType)">
                      <md-checkbox
                          ng-model="list.component.$queryEvents.asc"
                          ng-true-value="0"
                          ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
                    </md-button>
                  </md-menu-item>
                  <md-menu-item ng-if="list.componentType == 'tasks'">
                    <md-button ng-click="list.component.$filter(list.componentType)">
                      <md-checkbox
                          ng-model="list.component.$queryTasks.asc"
                          ng-true-value="0"
                          ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
                    </md-button>
                  </md-menu-item>
                </md-menu-content>
              </md-menu>
              <md-button class="sg-icon-button" ng-click="list.component.$filter(list.componentType)">
                <md-icon>refresh</md-icon>
              </md-button>
            </div>
          </div>
          <!-- search mode -->
          <div class="view-list sg-padded--right sg-toolbar-search" layout="row" layout-align="space-between center"
               ng-show="list.mode.search"
               sg-search="list.component.$filter(list.componentType, { value: searchText, search: searchField })">
            <md-button class="sg-icon-button"
                       sg-search-cancel="list.cancelSearch()"
                       label:aria-label="Back">
              <md-icon>arrow_back</md-icon>
            </md-button>
            <md-input-container>
              <input name="folderSearch" type="search" />
            </md-input-container>
            <md-input-container>
              <md-select>
                <md-option value="title_Category_Location" selected="selected"><var:string label:value="Title, category or location"/></md-option>
                <md-option value="entireContent"><var:string label:value="Entire content"/></md-option>
              </md-select>
            </md-input-container>
          </div>
          <!-- day/week/month views -->
          <div class="sg-padded">
            <a class="sg-icon-button md-button"
               label:aria-label="Day"
               href="#/calendar/day"><md-icon>view_day</md-icon></a>
            <a class="sg-icon-button md-button"
               label:aria-label="Week"
               href="#/calendar/week"><md-icon>view_week</md-icon></a>
            <a class="sg-icon-button md-button"
               label:aria-label="Month"
               href="#/calendar/month"><md-icon>view_module</md-icon></a>
          </div>
        </div>
        <div layout="row" layout-align="start center" ng-show="list.component.$selectedCount() > 0">
          <md-button class="sg-icon-button" ng-click="list.unselectComponents()">
            <md-icon>arrow_back</md-icon>
          </md-button>
          <label>{{list.component.$selectedCount()}} selected</label>
          <md-button class="sg-icon-button" ng-click="list.selectAll()">
            <md-tooltip md-direction="left"><var:string label:value="Select All"/></md-tooltip>
            <md-icon>select_all</md-icon>
          </md-button>
          <md-button class="sg-icon-button" ng-click="list.confirmDeleteSelectedComponents()">
            <md-icon>delete</md-icon>
          </md-button>
        </div>
      </md-toolbar>
      <md-content layout="row" class="md-flex">
        <md-content class="view-list md-flex" layout="column">
          <md-tabs md-dynamic-height="true"
                   md-selected="list.selectedList">
            <!-- Events list -->
            <md-tab label:label="Events"
                    md-on-select="list.selectComponentType('events')">
              <md-list class="sg-section-list">
                <md-list-item class="md-2-line"
                              ng-repeat="event in list.component.$events"
                              ng-click="list.openEvent($event, event)">
                  <div class="sg-selected-avatar" ng-show="event.selected"
                       ng-click="event.selected = !event.selected">
                    <!-- selected avatar -->
                  </div>
                  <i class="md-tile-left" ng-class="event.getClassName('bg')" ng-show="!event.selected" ng-click="event.selected = !event.selected"><!-- calendar color --></i>
                  <div class="md-list-item-text">
                    <h3>{{event.c_title}}</h3>
                    <p>{{event.c_location}}</p>
                    <p class="md-secondary" layout="row">
                      {{event.formatted_startdate}}
                      <i class="sg-tile-icons">
                        <md-icon ng-show="event.c_iscycle">repeat</md-icon>
                        <md-icon ng-show="event.c_nextalarm">alarm</md-icon>
                      </i>
                    </p>
                  </div>
                </md-list-item>
                <md-list-item disabled="disabled" ng-if="list.component.$events.length == 0">
                  <p class="sg-md-caption"><var:string label:value="No events for selected criteria"/></p>
                </md-list-item>
              </md-list>
            </md-tab>
            <!-- Tasks list -->
            <md-tab label:label="Tasks"
                    md-on-select="list.selectComponentType('tasks')">
              <md-list class="sg-section-list">
                <md-list-item class="md-2-line"
                              ng-repeat="task in list.component.$tasks"
                              ng-click="list.openTask($event, task)">
                  <div class="sg-selected-avatar" ng-show="task.selected"
                       ng-click="task.selected = !task.selected">
                    <!-- selected avatar -->
                  </div>
                  <i class="md-tile-left" ng-class="task.getClassName('bg')" ng-show="!task.selected" ng-click="task.selected = !task.selected"><!-- calendar color --></i>
                  <div class="md-list-item-text">
                    <h3>{{task.c_title}}</h3>
                    <p class="md-secondary" layout="row">
                      {{task.formatted_enddate}}
                      <span class="sg-tile-icons">
                        <md-icon ng-show="task.c_iscycle">repeat</md-icon>
                        <md-icon ng-show="event.c_nextalarm">alarm</md-icon>
                      </span>
                    </p>
                  </div>
                </md-list-item>
                <md-list-item disabled="disabled" ng-if="list.component.$tasks.length == 0">
                  <p class="sg-md-caption"><var:string label:value="No tasks for selected criteria"/></p>
                </md-list-item>
              </md-list>
            </md-tab>
          </md-tabs>
          <md-button class="md-fab md-fab-bottom-right"
                     label:aria-label="New Appointment"
                     ng-click="list.newComponent($event)">
            <md-icon>add</md-icon>
          </md-button>
        </md-content>
        <div id="detailView" hide-sm="hide-sm" class="view-detail" layout="column" ui-view="calendarView"><!-- calendar view --></div>
      </md-content>
    </section>
  </script>

  <script type="text/ng-template" id="UIxUserRightsEditor">
    <var:component className="UIxCalUserRightsEditor" />
  </script>
</var:component>