sogo/UI/Templates/SchedulerUI/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:uix="OGo:uix"
  xmlns:rsrc="OGo:url"
  xmlns:label="OGo:label"
  className="UIxPageFrame"
  const:userDefaultsKeys="SOGoCalendarCategoriesColors,SOGoDefaultCalendar"
  const:userSettingsKeys="Calendar,ShowCompletedTasks"
  const:jsFiles="SchedulerUIDnD.js"
  title="title">
  <script type="text/javascript">
    var firstDayOfWeek = <var:string value="firstDayOfWeek"/>;
    var dayStartHour = <var:string value="dayStartHour"/>;
    var currentView = '<var:string value="currentView"/>';
  </script>
  <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>
  <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><!-- separator --></li>
      <li><var:string label:value="New Task..."/></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 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>

  <div id="leftPanel">
    <div id="dateSelectorView" class=""
         ><var:component className="UIxCalDateSelector"
         selectedDate="thisMonth"
         /></div>
    <div id="calendarSelectorView"
         ><var:component className="UIxCalendarSelector"
         var:calendarFolders="calendarFolders" /></div>
  </div>

  <div id="verticalDragHandle" class="dragHandle"><!-- space --></div>

  <div id="rightPanel">
    <div class="tabsContainer" id="schedulerTabs">
      <ul>
        <li target="eventsListView" var:class="eventsTabClass"
          ><span><var:string label:value="Events" /></span></li>
        <li target="tasksListView" var:class="tasksTabClass"
          ><span><var:string label:value="Tasks" /></span></li>
      </ul>
      <div class="tabs">
        <div id="eventsListView" class="tab">
          <var:component className="UIxCalFilterPanel" />
          <table id="eventsList" cellspacing="0">
            <thead>
              <tr>
                <td id="eventTitleHeader" class="headerCell headerTitle sortableTableHeader"><var:string label:value="Title"/></td>
                <td id="eventStartHeader" class="headerCell headerDateTime sortableTableHeader"><var:string label:value="Start"/></td>
                <td id="eventEndHeader" class="headerCell headerDateTime sortableTableHeader"><var:string label:value="End"/></td>
                <td id="eventLocationHeader" class="headerCell headerLocation sortableTableHeader"><var:string label:value="Location"/></td>
                <td id="calendarNameHeader" class="headerCell headerCalendarName sortableTableHeader"><var:string label:value="Calendar"/></td>
              </tr>
            </thead>
            <tbody><!-- events list --></tbody>
          </table>
        </div>
        <div id="tasksListView" class="tab">
          <label>
            <input id="showHideCompletedTasks" type="checkbox" class="checkBox"/><var:string label:value="Show completed tasks"/>
          </label>
          <table id="tasksList" cellspacing="0">
            <thead>
              <tr>
                <td id="taskCompletedHeader" class="headerCell"><entity name="nbsp"/></td>
                <td id="taskPriorityHeader" class="headerCell headerPriority sortableTableHeader"><var:string label:value="Priority"/></td>
                <td id="taskTitleHeader" class="headerCell headerTitle sortableTableHeader"><var:string label:value="Title"/></td>
                <td id="taskEndHeader" class="headerCell headerDateTime sortableTableHeader"><var:string label:value="Due Date"/></td>
                <td id="taskLocationHeader" class="headerCell headerLocation sortableTableHeader"><var:string label:value="Location"/></td>
                <td id="taskCategoryHeader" class="headerCell headerLocation sortableTableHeader"><var:string label:value="Category"/></td>
                <td id="taskCalendarNameHeader" class="headerCell headerCalendarName sortableTableHeader"><var:string label:value="Calendar"/></td>
              </tr>
            </thead>
            <tbody><!-- tasks list --></tbody>
          </table>
        </div>
      </div>
    </div>
    <div id="rightDragHandle" class="dragHandle"><!-- space --></div>
    <div id="calendarView"><!-- space --></div>
  </div>
</var:component>