diff --git a/UI/Scheduler/UIxTaskEditor.m b/UI/Scheduler/UIxTaskEditor.m
index bc05c0b21..1f03039d3 100644
--- a/UI/Scheduler/UIxTaskEditor.m
+++ b/UI/Scheduler/UIxTaskEditor.m
@@ -530,6 +530,7 @@
                        [thisFolder nameInContainer], @"pid",
                        [thisFolder displayName], @"calendar",
                        [NSNumber numberWithBool: [self isReadOnly]], @"isReadOnly",
+                       [self loadAlarm], @"alarm",
 		       nil];
 
   if (startDate)
diff --git a/UI/Scheduler/product.plist b/UI/Scheduler/product.plist
index 443f234cc..173913971 100644
--- a/UI/Scheduler/product.plist
+++ b/UI/Scheduler/product.plist
@@ -134,6 +134,10 @@
           protectedBy = "View";
           pageName    = "UIxAppointmentEditorTemplate";
         };
+        UIxTaskEditorTemplate = {
+          protectedBy = "View";
+          pageName    = "UIxTaskEditorTemplate";
+        };
         editAttendees = {
           protectedBy = "View";
           pageName    = "UIxAttendeesEditor";
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index 954b5b81e..62d420778 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -6,31 +6,31 @@
     xmlns:label="OGo:label"
     >
   <form name="eventForm" ng-submit="editor.save(eventForm)">
-    <md-toolbar class="md-padding" ng-class="editor.event.getClassName('bg')">
+    <md-toolbar class="md-padding" ng-class="editor.component.getClassName('bg')">
       <!-- summary -->
       <md-input-container md-no-float="true">
         <input type="text"
                class="md-display-1"
                label:placeholder="Title"
-               ng-model="editor.event.summary"/>
+               ng-model="editor.component.summary"/>
       </md-input-container>
       <!--<md-chips>
-          <md-chip ng-repeat="category in editor.event.categories">{{category}}</md-chip>
+          <md-chip ng-repeat="category in editor.component.categories">{{category}}</md-chip>
         </md-chips>-->
     </md-toolbar>
     <md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1">
       <!-- location -->
       <md-input-container>
         <label><var:string label:value="Location"/></label>
-        <input type="text" ng-model="editor.event.location"/>
+        <input type="text" ng-model="editor.component.location"/>
       </md-input-container>
       <!-- categories -->
       <div class="pseudo-input-container">
-        <md-chips ng-model="editor.event.categories">
+        <md-chips ng-model="editor.component.categories">
           <md-autocomplete
               md-selected-item="editor.categories.selected"
               md-search-text="editor.categories.searchText"
-              md-items="category in editor.event.constructor.filterCategories(editor.categories.searchText)"
+              md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
               label:placeholder="Add a category">
             <span md-highlight-text="editor.categories.searchText">{{category}}</span>
           </md-autocomplete>
@@ -39,7 +39,7 @@
       <!-- calendar -->
       <div class="pseudo-input-container">
         <label class="pseudo-input-label"><var:string label:value="Calendar"/></label>
-        <md-select ng-model="editor.event.destinationCalendar" class="pseudo-input-field"
+        <md-select ng-model="editor.component.destinationCalendar" class="pseudo-input-field"
                    label:placeholder="Calendar">
           <md-option ng-repeat="calendar in ::editor.calendars"
                      ng-value="calendar.id">{{calendar.name}}</md-option>
@@ -47,7 +47,7 @@
       </div>
       <!-- classification -->
       <md-radio-group layout="row" layout-align="space-around center"
-                      ng-model="editor.event.classification">
+                      ng-model="editor.component.classification">
         <md-radio-button value="public">
           <var:string label:value="label_Public"/>
         </md-radio-button>
@@ -63,7 +63,7 @@
         <div flex="20"><var:string label:value="Priority"/></div>
         <md-slider class="md-flex"
                    md-discrete="true"
-                   ng-model="rating1"
+                   ng-model="editor.component.priority"
                    step="1"
                    min="0"
                    max="9"
@@ -71,7 +71,7 @@
       </div>
       <!-- is all day -->
       <md-checkbox
-          ng-model="editor.event.isAllDay"
+          ng-model="editor.component.isAllDay"
           ng-true-value="1"
           ng-false-value="0"
           label:aria-label="All day Event">
@@ -79,7 +79,7 @@
       </md-checkbox>
       <!-- is transparent -->
       <md-checkbox
-          ng-model="editor.event.isTransparent"
+          ng-model="editor.component.isTransparent"
           ng-true-value="1"
           ng-false-value="0"
           label:aria-label="Show Time as Free">
@@ -87,7 +87,7 @@
       </md-checkbox>
       <!-- send appointment notifications -->
       <md-checkbox
-          ng-model="editor.event.sendAppointmentNotifications"
+          ng-model="editor.component.sendAppointmentNotifications"
           ng-true-value="1"
           ng-false-value="0"
           label:aria-label="Send Appointment Notifications">
@@ -97,23 +97,23 @@
       <div layout="row">
         <md-input-container>
           <label><var:string label:value="From"/></label>
-          <input type="text" ng-model="editor.event.startDate"/>
+          <input type="text" ng-model="editor.component.startDate"/>
         </md-input-container>
         <md-input-container>
           <label><var:string label:value="To"/></label>
-          <input type="text" ng-model="editor.event.endDate"/>
+          <input type="text" ng-model="editor.component.endDate"/>
         </md-input-container>
       </div>
       <!-- comment -->
       <md-input-container>
         <label><var:string label:value="Description"/></label>
-        <textarea ng-model="editor.event.comment"><!-- comment --></textarea>
+        <textarea ng-model="editor.component.comment"><!-- comment --></textarea>
       </md-input-container>
       <!-- repeat -->
       <div layout="row" layout-align="start end">
         <div class="pseudo-input-container md-flex">
           <label class="pseudo-input-label"><var:string label:value="Repeat"/></label>
-          <md-select class="pseudo-input-field" ng-model="editor.event.repeat.frequency"
+          <md-select class="pseudo-input-field" ng-model="editor.component.repeat.frequency"
                      label:placeholder="Repeat">
             <var:foreach list="repeatList" item="item">
               <md-option var:value="item"><var:string var:value="itemRepeatText"/></md-option>
@@ -122,7 +122,7 @@
         </div>
         <md-button type="button" class="iconButton"
                    label:aria-label="repeat_CUSTOM"
-                   ng-show="editor.event.repeat.frequency != 'never'"
+                   ng-show="editor.component.repeat.frequency != 'never'"
                    ng-click="editor.toggleRecurrenceEditor()">
           <i ng-class="{'md-icon-more-horiz': !editor.showRecurrenceEditor,
                        'md-icon-clear': editor.showRecurrenceEditor}"><!-- toggle custom rule --></i>
@@ -135,20 +135,20 @@
       <div layout="row" layout-align="start end">
         <div class="pseudo-input-container">
           <label class="pseudo-input-label"><var:string label:value="End Repeat"/></label>
-          <md-select class="pseudo-input-field" ng-model="editor.event.repeat.end">
+          <md-select class="pseudo-input-field" ng-model="editor.component.repeat.end">
             <md-option value="never"><var:string label:value="Never"/></md-option>
             <md-option value="count"><var:string label:value="After"/></md-option>
             <md-option value="until"><var:string label:value="On Date"/></md-option>
           </md-select>
         </div>
-        <div layout="row" layout-align="start center" ng-show="editor.event.repeat.end == 'count'">
+        <div layout="row" layout-align="start center" ng-show="editor.component.repeat.end == 'count'">
           <md-input-container class="md-input-number">
-            <input type="number" label:aria-label="times" ng-model="editor.event.repeat.count"/>
+            <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
           </md-input-container>
           <var:string label:value="times"/>
         </div>
-        <md-input-container ng-show="editor.event.repeat.end == 'until'">
-          <input type="date" label:aria-label="Repeat until" ng-model="editor.event.repeat.until"/>
+        <md-input-container ng-show="editor.component.repeat.end == 'until'">
+          <input type="date" label:aria-label="Repeat until" ng-model="editor.component.repeat.until"/>
         </md-input-container>
       </div>
       <!-- attendees -->
@@ -156,7 +156,7 @@
         <div class="pseudo-input-container">
           <label class="pseudo-input-label"><var:string label:value="Attendees:"/></label>
           <div class="sg-avatars" ng-hide="editor.showAttendeesEditor">
-            <sg-gravatar-image ng-repeat="currentAttendee in editor.event.attendees track by currentAttendee.email"
+            <sg-gravatar-image ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email"
                                email="{{currentAttendee.email}}"
                                size="32">
               <!-- gravatar -->
@@ -191,12 +191,12 @@
         </span>
       </md-autocomplete>
       <!-- reminder -->
-      <md-checkbox ng-model="editor.event.$hasAlarm"
+      <md-checkbox ng-model="editor.component.$hasAlarm"
                    label:aria-label="Reminder:">
         <var:string label:value="Reminder:"/>
       </md-checkbox>
       <div class="sg-subcontent"
-           ng-show="editor.event.$hasAlarm">
+           ng-show="editor.component.$hasAlarm">
         <var:component className="UIxReminderEditor" />
       </div>
       <!-- cancel/reset/save -->
@@ -204,7 +204,7 @@
         <md-button type="button" ng-click="editor.cancel()">
           <var:string label:value="Cancel"/>
         </md-button>
-        <md-button type="button" ng-click="editor.event.$reset()">
+        <md-button type="button" ng-click="editor.component.$reset()">
           <var:string label:value="Reset"/>
         </md-button>
         <md-button class="md-primary md-hue-3" type="submit">
diff --git a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
index 0bea9f2ac..23984836a 100644
--- a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
+++ b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
@@ -16,7 +16,7 @@
       <md-list-item>
         <div><!-- empty --></div>
       </md-list-item>
-      <md-list-item ng-repeat="currentAttendee in editor.event.attendees track by currentAttendee.email">
+      <md-list-item ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email">
         <sg-gravatar-image email="{{currentAttendee.email}}"
                            size="32">
           <!-- gravatar -->
@@ -36,18 +36,18 @@
           <div class="hour" ng-repeat="hour in ::editor.attendeesEditor.hours">{{hour}}</div>
         </div>
       </md-list-item>
-      <md-list-item ng-repeat="currentAttendee in editor.event.attendees track by currentAttendee.email">
+      <md-list-item ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email">
         <div class="hour" ng-repeat="hour in ::editor.attendeesEditor.hours">
-          <div class="quarter" ng-class="{event: editor.event.coversFreeBusy(day.getDayString, hour, 0)}">
+          <div class="quarter" ng-class="{event: editor.component.coversFreeBusy(day.getDayString, hour, 0)}">
             <div class="busy" ng-show="currentAttendee.freebusy[day.getDayString][hour][0]"><!-- 15 minutes --></div>
           </div>
-          <div class="quarter" ng-class="{event: editor.event.coversFreeBusy(day.getDayString, hour, 1)}">
+          <div class="quarter" ng-class="{event: editor.component.coversFreeBusy(day.getDayString, hour, 1)}">
             <div class="busy" ng-show="currentAttendee.freebusy[day.getDayString][hour][1]"><!-- 15 minutes --></div>
           </div>
-          <div class="quarter" ng-class="{event: editor.event.coversFreeBusy(day.getDayString, hour, 2)}">
+          <div class="quarter" ng-class="{event: editor.component.coversFreeBusy(day.getDayString, hour, 2)}">
             <div class="busy" ng-show="currentAttendee.freebusy[day.getDayString][hour][2]"><!-- 15 minutes --></div>
           </div>
-          <div class="quarter" ng-class="{event: editor.event.coversFreeBusy(day.getDayString, hour, 3)}">
+          <div class="quarter" ng-class="{event: editor.component.coversFreeBusy(day.getDayString, hour, 3)}">
             <div class="busy" ng-show="currentAttendee.freebusy[day.getDayString][hour][3]"><!-- 15 minutes --></div>
           </div>
         </div>
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 2546b7f47..4d0772604 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -175,7 +175,7 @@
                            label:aria-label="Enable"><!-- enable --></md-checkbox>
               <p class="sg-item-name">{{calendar.name}}</p>
   
-              <md-menu class="md-secondary" ng-click="true">
+              <md-menu class="md-secondary" label:aria-label="Options" ng-click="true">
                 <md-button class="iconButton"
                            label:aria-label="Options"
                            ng-click="$mdOpenMenu()">
@@ -239,7 +239,7 @@
                            label:aria-label="Enable"><!-- enable --></md-checkbox>
               <p class="sg-item-name">{{calendar.name}}</p>
               
-              <md-menu class="md-secondary" ng-click="true">
+              <md-menu class="md-secondary" label:aria-label="Options" ng-click="true">
                 <md-button class="iconButton"
                            label:aria-label="Options"
                            ng-click="$mdOpenMenu()">
@@ -291,7 +291,7 @@
                            label:aria-label="Enable"><!-- enable --></md-checkbox>
               <p class="sg-item-name">{{calendar.name}}</p>
 
-              <md-menu class="md-secondary" ng-click="true">
+              <md-menu class="md-secondary" label:aria-label="Options" ng-click="true">
                 <md-button class="iconButton"
                            label:aria-label="Options"
                            ng-click="$mdOpenMenu()">
@@ -365,19 +365,20 @@
         </div>
       </md-toolbar>
       <md-content layout="row">
-        <div class="view-list" layout="column" flex="true" style="position: relative;">
+        <div class="view-list md-flex" layout="column" style="position: relative;">
           <md-content id="componentsList">
             <md-tabs md-dynamic-height="true"
                      md-selected="list.selectedList">
               <md-tab label:label="Events"
                       md-on-select="list.selectComponentType('events')">
                 <md-list>
-                  <md-list-item
-                      class="md-clickable md-2-line"
-                      ng-repeat="event in list.component.$events">
+                  <md-list-item class="md-clickable md-2-line"
+                                ng-repeat="event in list.component.$events">
                     <i class="md-avatar" ng-class="event.getClassName('bg')" ><!-- calendar color --></i>
                     <div class="md-list-item-text"
-                         ui-sref="calendars.component({calendarId: event.c_folder, componentId: event.c_name})">
+                         ui-sref="calendars.component({calendarId: event.c_folder,
+                                  componentType: 'appointment',
+                                  componentId: event.c_name})">
                       <h3>{{event.c_title}}</h3>
                       <p>{{event.c_location}}</p>
                       <p class="md-secondary">
@@ -392,12 +393,20 @@
               <md-tab label:label="Tasks"
                       md-on-select="list.selectComponentType('tasks')">
                 <md-list>
-                  <md-list-item
-                      class="md-clickable"
-                      ng-repeat="task in list.component.$tasks">
-                    <i class="md-avatar" ng-class="task.getClassName()" ><!-- calendar color --></i>
-                    <p>{{task.c_title}}</p>
-                    <p class="md-secondary">{{task.formatted_enddate}}</p>
+                  <md-list-item class="md-clickable md-2-line"
+                                ng-repeat="task in list.component.$tasks">
+                    <i class="md-avatar" ng-class="task.getClassName('bg')" ><!-- calendar color --></i>
+                    <div class="md-list-item-text"
+                         ui-sref="calendars.component({calendarId: task.c_folder,
+                                  componentType: 'task',
+                                  componentId: task.c_name})">
+                      <h3>{{task.c_title}}</h3>
+                      <p class="md-secondary">
+                        {{task.formatted_enddate}}
+                        <i class="md-icon-repeat" ng-show="task.c_iscycle"><!-- recurrent --></i>
+                        <i class="md-icon-alarm" ng-show="task.c_nextalarm"><!-- alarm --></i>
+                      </p>
+                    </div>
                   </md-list-item>
                 </md-list>
               </md-tab>
diff --git a/UI/Templates/SchedulerUI/UIxReminderEditor.wox b/UI/Templates/SchedulerUI/UIxReminderEditor.wox
index d8cb9312a..518cf90ca 100644
--- a/UI/Templates/SchedulerUI/UIxReminderEditor.wox
+++ b/UI/Templates/SchedulerUI/UIxReminderEditor.wox
@@ -7,19 +7,19 @@
     >
   <div layout="row" layout-align="start center">
     <md-input-container class="md-input-number">
-      <input type="number" label:aria-label="quantity" ng-model="editor.event.alarm.quantity"/>
+      <input type="number" label:aria-label="quantity" ng-model="editor.component.alarm.quantity"/>
     </md-input-container>
-    <md-select ng-model="editor.event.alarm.unit">
+    <md-select ng-model="editor.component.alarm.unit">
       <var:foreach list="unitsList" item="item">
         <md-option var:value="item"><var:string value="itemText"/></md-option>
       </var:foreach>
     </md-select>
-    <md-select ng-model="editor.event.alarm.reference">
+    <md-select ng-model="editor.component.alarm.reference">
       <var:foreach list="referencesList" item="item">
         <md-option var:value="item"><var:string value="itemText"/></md-option>
       </var:foreach>
     </md-select>
-    <md-select ng-model="editor.event.alarm.relation">
+    <md-select ng-model="editor.component.alarm.relation">
       <var:foreach list="relationsList" item="item">
         <md-option var:value="item"><var:string value="itemText"/></md-option>
       </var:foreach>
@@ -29,7 +29,7 @@
   <var:if condition="emailAlarmsEnabled">
     <div layout="row" layout-align="space-around center">
       <md-radio-group layout="row" layout-align="space-around center"
-                      ng-model="editor.event.alarm.action">
+                      ng-model="editor.component.alarm.action">
         <md-radio-button value="display">
           <var:string label:value="Show an Alert"/>
         </md-radio-button>
@@ -39,14 +39,14 @@
       </md-radio-group>
     </div>
     <div layout="row" layout-align="space-around center"
-         ng-show="editor.event.canRemindAttendeesByEmail()">
-      <md-checkbox ng-model="editor.event.alarm.organizer"
+         ng-show="editor.component.canRemindAttendeesByEmail()">
+      <md-checkbox ng-model="editor.component.alarm.organizer"
                    ng-true-value="1"
                    ng-false-value="0"
                    label:aria-label="Email Organizer">
         <var:string label:value="Email Organizer"/>
       </md-checkbox>
-      <md-checkbox ng-model="editor.event.alarm.attendees"
+      <md-checkbox ng-model="editor.component.alarm.attendees"
                    ng-true-value="1"
                    ng-false-value="0"
                    label:aria-label="Email Attendees">
diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
new file mode 100644
index 000000000..1665f3e27
--- /dev/null
+++ b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -0,0 +1,184 @@
+<?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"
+    >
+  <form name="eventForm" ng-submit="editor.save(eventForm)">
+    <md-toolbar class="md-padding" ng-class="editor.component.getClassName('bg')">
+      <!-- summary -->
+      <md-input-container md-no-float="true">
+        <input type="text"
+               class="md-display-1"
+               label:placeholder="Title"
+               ng-model="editor.component.summary"/>
+      </md-input-container>
+    </md-toolbar>
+    <md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1">
+      <!-- location -->
+      <md-input-container>
+        <label><var:string label:value="Location"/></label>
+        <input type="text" ng-model="editor.component.location"/>
+      </md-input-container>
+      <!-- categories -->
+      <div class="pseudo-input-container">
+        <md-chips ng-model="editor.component.categories">
+          <md-autocomplete
+              md-selected-item="editor.categories.selected"
+              md-search-text="editor.categories.searchText"
+              md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
+              label:placeholder="Add a category">
+            <span md-highlight-text="editor.categories.searchText">{{category}}</span>
+          </md-autocomplete>
+        </md-chips>
+      </div>
+      <!-- calendar -->
+      <div class="pseudo-input-container">
+        <label class="pseudo-input-label"><var:string label:value="Calendar"/></label>
+        <md-select ng-model="editor.component.destinationCalendar" class="pseudo-input-field"
+                   label:placeholder="Calendar">
+          <md-option ng-repeat="calendar in ::editor.calendars"
+                     ng-value="calendar.id">{{calendar.name}}</md-option>
+        </md-select>
+      </div>
+      <!-- classification -->
+      <md-radio-group layout="row" layout-align="space-around center"
+                      ng-model="editor.component.classification">
+        <md-radio-button value="public">
+          <var:string label:value="label_Public"/>
+        </md-radio-button>
+        <md-radio-button value="confidential">
+          <var:string label:value="label_Confidential"/>
+        </md-radio-button>
+        <md-radio-button value="private">
+          <var:string label:value="label_Private"/>
+        </md-radio-button>
+      </md-radio-group>
+      <!-- priority -->
+      <div layout="row" layout-align="center center">
+        <div flex="20"><var:string label:value="Priority"/></div>
+        <md-slider class="md-flex"
+                   md-discrete="true"
+                   ng-model="editor.component.priority"
+                   step="1"
+                   min="0"
+                   max="9"
+                   label:aria-label="Priority"><!-- slider --></md-slider>
+      </div>
+      <!-- is all day -->
+      <md-checkbox
+          ng-model="editor.component.isAllDay"
+          ng-true-value="1"
+          ng-false-value="0"
+          label:aria-label="All day Event">
+        <var:string label:value="All day Event"/>
+      </md-checkbox>
+      <!-- start + end -->
+      <div layout="row">
+        <md-input-container>
+          <label><var:string label:value="Start"/></label>
+          <input type="text" ng-model="editor.component.startDate"/>
+        </md-input-container>
+        <md-input-container>
+          <label><var:string label:value="Due"/></label>
+          <input type="text" ng-model="editor.component.dueDate"/>
+        </md-input-container>
+      </div>
+      <!-- status -->
+      <div layout="row">
+        <div class="pseudo-input-container" flex="50">
+          <label class="pseudo-input-label"><var:string label:value="Status"/></label>
+          <md-select ng-model="editor.component.status">
+            <var:foreach list="statusList" item="item">
+              <md-option var:value="item"><var:string value="itemStatusText"/></md-option>
+            </var:foreach>
+          </md-select>
+        </div>
+        <md-input-container ng-show="editor.component.status == 'completed'">
+          <label><var:string label:value="status_COMPLETED"/></label>
+          <input type="text" ng-model="editor.component.completedDate"/>
+        </md-input-container>
+      </div>
+      <div layout="row" layout-align="center center"
+           ng-show="editor.component.enablePercentComplete()">
+        <md-slider class="md-flex"
+                   md-discrete="true"
+                   ng-model="editor.component.percentComplete"
+                   step="5"
+                   min="0"
+                   max="100"
+                   label:aria-label="% complete"><!-- slider --></md-slider>
+        <div flex="30"><var:string label:value="% complete"/></div>
+      </div>
+      <!-- comment -->
+      <md-input-container>
+        <label><var:string label:value="Description"/></label>
+        <textarea ng-model="editor.component.comment"><!-- comment --></textarea>
+      </md-input-container>
+      <!-- repeat -->
+      <div layout="row" layout-align="start end">
+        <div class="pseudo-input-container md-flex">
+          <label class="pseudo-input-label"><var:string label:value="Repeat"/></label>
+          <md-select class="pseudo-input-field" ng-model="editor.component.repeat.frequency"
+                     label:placeholder="Repeat">
+            <var:foreach list="repeatList" item="item">
+              <md-option var:value="item"><var:string var:value="itemRepeatText"/></md-option>
+            </var:foreach>
+          </md-select>
+        </div>
+        <md-button type="button" class="iconButton"
+                   label:aria-label="repeat_CUSTOM"
+                   ng-show="editor.component.repeat.frequency != 'never'"
+                   ng-click="editor.toggleRecurrenceEditor()">
+          <i ng-class="{'md-icon-more-horiz': !editor.showRecurrenceEditor,
+                       'md-icon-clear': editor.showRecurrenceEditor}"><!-- toggle custom rule --></i>
+        </md-button>
+      </div>
+      <div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
+        <var:component className="UIxRecurrenceEditor" />
+      </div>
+      <!-- end repeat -->
+      <div layout="row" layout-align="start end">
+        <div class="pseudo-input-container">
+          <label class="pseudo-input-label"><var:string label:value="End Repeat"/></label>
+          <md-select class="pseudo-input-field" ng-model="editor.component.repeat.end">
+            <md-option value="never"><var:string label:value="Never"/></md-option>
+            <md-option value="count"><var:string label:value="After"/></md-option>
+            <md-option value="until"><var:string label:value="On Date"/></md-option>
+          </md-select>
+        </div>
+        <div layout="row" layout-align="start center" ng-show="editor.component.repeat.end == 'count'">
+          <md-input-container class="md-input-number">
+            <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
+          </md-input-container>
+          <var:string label:value="times"/>
+        </div>
+        <md-input-container ng-show="editor.component.repeat.end == 'until'">
+          <input type="date" label:aria-label="Repeat until" ng-model="editor.component.repeat.until"/>
+        </md-input-container>
+      </div>
+      <!-- reminder -->
+      <md-checkbox ng-model="editor.component.$hasAlarm"
+                   label:aria-label="Reminder:">
+        <var:string label:value="Reminder:"/>
+      </md-checkbox>
+      <div class="sg-subcontent"
+           ng-show="editor.component.$hasAlarm">
+        <var:component className="UIxReminderEditor" />
+      </div>
+      <!-- cancel/reset/save -->
+      <div class="fieldset md-layout-margin" layout="row" layout-align="end center">
+        <md-button type="button" ng-click="editor.cancel()">
+          <var:string label:value="Cancel"/>
+        </md-button>
+        <md-button type="button" ng-click="editor.component.$reset()">
+          <var:string label:value="Reset"/>
+        </md-button>
+        <md-button class="md-primary md-hue-3" type="submit">
+          <var:string label:value="Save"/>
+        </md-button>
+      </div>
+    </md-content>
+  </form>
+</container>
diff --git a/UI/WebServerResources/js/Scheduler.app.js b/UI/WebServerResources/js/Scheduler.app.js
index 0a03d2f68..e33eaaaf7 100644
--- a/UI/WebServerResources/js/Scheduler.app.js
+++ b/UI/WebServerResources/js/Scheduler.app.js
@@ -64,7 +64,11 @@
         url: '/:calendarId/{componentType:(?:appointment|task)}/new',
         views: {
           componentEditor: {
-            templateUrl: 'UIxAppointmentEditorTemplate',
+            templateUrl: function($stateParams) {
+              // UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox or
+              // UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+              return 'UIx' + $stateParams.componentType.capitalize() + 'EditorTemplate';
+            },
             controller: 'ComponentController',
             controllerAs: 'editor'
           }
@@ -74,10 +78,14 @@
         }
       })
       .state('calendars.component', {
-        url: '/:calendarId/event/:componentId',
+        url: '/:calendarId/{componentType:(?:appointment|task)}/:componentId',
         views: {
           componentEditor: {
-            templateUrl: 'UIxAppointmentEditorTemplate',
+            templateUrl: function($stateParams) {
+              // UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox or
+              // UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+              return 'UIx' + $stateParams.componentType.capitalize() + 'EditorTemplate';
+            },
             controller: 'ComponentController',
             controllerAs: 'editor'
           }
diff --git a/UI/WebServerResources/js/Scheduler/Component.service.js b/UI/WebServerResources/js/Scheduler/Component.service.js
index 15eb38d62..ac8eb84ed 100644
--- a/UI/WebServerResources/js/Scheduler/Component.service.js
+++ b/UI/WebServerResources/js/Scheduler/Component.service.js
@@ -246,12 +246,15 @@
     this.categories = [];
     this.repeat = {};
     this.alarm = { action: 'display', quantity: 5, unit: 'MINUTES', reference: 'BEFORE', relation: 'START' };
+    this.status = 'not-specified';
     angular.extend(this, data);
 
     if (this.startDate)
       this.start = new Date(this.startDate.substring(0,10) + ' ' + this.startDate.substring(11,16));
     if (this.endDate)
       this.end = new Date(this.endDate.substring(0,10) + ' ' + this.endDate.substring(11,16));
+    if (this.dueDate)
+      this.due = new Date(this.dueDate.substring(0,10) + ' ' + this.dueDate.substring(11,16));
 
     // Parse recurrence rule definition and initialize default values
     if (this.repeat.days) {
@@ -294,7 +297,7 @@
 
     this.$hasAlarm = angular.isDefined(data.alarm);
 
-    // Allow the event to be moved to a different calendar
+    // Allow the component to be moved to a different calendar
     this.destinationCalendar = this.pid;
 
     // Load freebusy of attendees
@@ -311,7 +314,7 @@
    * @function hasCustomRepeat
    * @memberof Component.prototype
    * @desc Check if the component has a custom recurrence rule.
-   * @returns true if the the recurrence rule requires the full recurrence editor
+   * @returns true if the recurrence rule requires the full recurrence editor
    */
   Component.prototype.hasCustomRepeat = function() {
     var b = angular.isDefined(this.repeat) &&
@@ -322,6 +325,19 @@
     return b;
   };
 
+  /**
+   * @function enablePercentComplete
+   * @memberof Component.prototype
+   * @desc Check if the percent completion should be enabled with respect to the
+   *       component's type and status.
+   * @returns true if the percent completion should be displayed
+   */
+  Component.prototype.enablePercentComplete = function() {
+    return (this.component = 'vtodo' &&
+            this.status != 'not-specified' &&
+            this.status != 'cancelled');
+  };
+
   /**
    * @function coversFreeBusy
    * @memberof Component.prototype
diff --git a/UI/WebServerResources/js/Scheduler/ComponentController.js b/UI/WebServerResources/js/Scheduler/ComponentController.js
index 2505ce9d2..170f7286a 100644
--- a/UI/WebServerResources/js/Scheduler/ComponentController.js
+++ b/UI/WebServerResources/js/Scheduler/ComponentController.js
@@ -11,11 +11,11 @@
     var vm = this;
 
     vm.calendars = stateCalendars;
-    vm.event = stateComponent;
+    vm.component = stateComponent;
     vm.categories = {};
-    vm.showRecurrenceEditor = vm.event.$hasCustomRepeat;
+    vm.showRecurrenceEditor = vm.component.$hasCustomRepeat;
     vm.toggleRecurrenceEditor = toggleRecurrenceEditor;
-    vm.showAttendeesEditor = angular.isDefined(vm.event.attendees);
+    vm.showAttendeesEditor = angular.isDefined(vm.component.attendees);
     vm.toggleAttendeesEditor = toggleAttendeesEditor;
     vm.cardFilter = cardFilter;
     vm.cardResults = [];
@@ -23,8 +23,8 @@
     vm.cancel = cancel;
     vm.save = save;
     vm.attendeesEditor = {
-      startDate: vm.event.startDate,
-      endDate: vm.event.endDate,
+      startDate: vm.component.startDate,
+      endDate: vm.component.endDate,
       days: getDays(),
       hours: getHours()
     };
@@ -47,21 +47,21 @@
       }, 100); // don't ask why
     });
 
-    $scope.$watch('editor.event.startDate', function(newStartDate, oldStartDate) {
+    $scope.$watch('editor.component.startDate', function(newStartDate, oldStartDate) {
       if (newStartDate) {
         $timeout(function() {
-          vm.event.start = new Date(newStartDate.substring(0,10) + ' ' + newStartDate.substring(11,16));
-          vm.event.freebusy = vm.event.updateFreeBusyCoverage();
+          vm.component.start = new Date(newStartDate.substring(0,10) + ' ' + newStartDate.substring(11,16));
+          vm.component.freebusy = vm.component.updateFreeBusyCoverage();
           vm.attendeesEditor.days = getDays();
         });
       }
     });
 
-    $scope.$watch('editor.event.endDate', function(newEndDate, oldEndDate) {
+    $scope.$watch('editor.component.endDate', function(newEndDate, oldEndDate) {
       if (newEndDate) {
         $timeout(function() {
-          vm.event.end = new Date(newEndDate.substring(0,10) + ' ' + newEndDate.substring(11,16));
-          vm.event.freebusy = vm.event.updateFreeBusyCoverage();
+          vm.component.end = new Date(newEndDate.substring(0,10) + ' ' + newEndDate.substring(11,16));
+          vm.component.freebusy = vm.component.updateFreeBusyCoverage();
           vm.attendeesEditor.days = getDays();
         });
       }
@@ -69,7 +69,7 @@
 
     function toggleRecurrenceEditor() {
       vm.showRecurrenceEditor = !vm.showRecurrenceEditor;
-      vm.event.$hasCustomRepeat = vm.showRecurrenceEditor;
+      vm.component.$hasCustomRepeat = vm.showRecurrenceEditor;
     }
 
     function toggleAttendeesEditor() {
@@ -98,7 +98,7 @@
           }
           _.each(results, function(card) {
             // Add cards matching the search query but not already in the list of attendees
-            if (!vm.event.hasAttendee(card))
+            if (!vm.component.hasAttendee(card))
               vm.cardResults.push(card);
           });
         });
@@ -110,18 +110,18 @@
       if (angular.isString(card)) {
         // User pressed "Enter" in search field, adding a non-matching card
         if (card.isValidEmail()) {
-          vm.event.addAttendee(new Card({ emails: [{ value: card }] }));
+          vm.component.addAttendee(new Card({ emails: [{ value: card }] }));
           vm.searchText = '';
         }
       }
       else {
-        vm.event.addAttendee(card);
+        vm.component.addAttendee(card);
       }
     }
 
     function save(form) {
       if (form.$valid) {
-        vm.event.$save()
+        vm.component.$save()
           .then(function(data) {
             $scope.$emit('calendars:list');
             $mdSidenav('right').close();
@@ -132,10 +132,10 @@
     }
 
     function cancel() {
-      vm.event.$reset();
-      if (vm.event.isNew) {
+      vm.component.$reset();
+      if (vm.component.isNew) {
         // Cancelling the creation of a component
-        vm.event = null;
+        vm.component = null;
       }
       $mdSidenav('right').close();
     }
@@ -143,8 +143,8 @@
     function getDays() {
       var days = [];
 
-      if (vm.event.start && vm.event.end)
-        days = vm.event.start.daysUpTo(vm.event.end);
+      if (vm.component.start && vm.component.end)
+        days = vm.component.start.daysUpTo(vm.component.end);
 
       return _.map(days, function(date) {
         return { stringWithSeparator: date.stringWithSeparator(),