diff --git a/NEWS b/NEWS
index eea797913..e1c14cc53 100644
--- a/NEWS
+++ b/NEWS
@@ -3,6 +3,7 @@
 
 Enhancements
  - [web] prohibit subscribing a user with no rights
+ - [web] new button to mark a task as completed (#4531)
 
 Bug fixes
  - [web] include mail account name in form validation (#4532)
diff --git a/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
index 575292e13..975bd7202 100644
--- a/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
@@ -30,6 +30,11 @@
             </md-menu-item>
           </md-menu-content>
         </md-menu>
+        <md-button class="sg-icon-button"
+                   ng-show="editor.component.status != 'completed'"
+                   ng-click="editor.component.markAsCompleted()">
+          <md-icon label:aria-label="Mark Completed">check</md-icon>
+        </md-button>
         <md-button class="sg-icon-button" ng-click="editor.close()">
           <md-icon label:aria-label="Close">close</md-icon>
         </md-button>
@@ -74,19 +79,19 @@
           </div>
         </md-list-item>
         <!-- status -->
-        <md-list-item ng-show="::(editor.component.status == 'completed')">
+        <md-list-item ng-show="editor.component.status == 'completed'">
           <md-icon>check</md-icon>
-          <p>{{::editor.component.localizedCompletedDate}} {{::editor.component.localizedCompletedTime}}</p>
+          <p>{{editor.component.localizedCompletedDate}} {{editor.component.localizedCompletedTime}}</p>
         </md-list-item>
-        <md-list-item ng-show="::editor.component.showPercentComplete()">
+        <md-list-item ng-show="editor.component.showPercentComplete()">
           <md-icon>timelapse</md-icon>
-          <p>{{::editor.component.percentComplete}} %</p>
+          <p>{{editor.component.percentComplete}} %</p>
         </md-list-item>
-        <md-list-item ng-show="::(editor.component.status == 'cancelled')">
+        <md-list-item ng-show="editor.component.status == 'cancelled'">
           <md-icon>close</md-icon>
           <p><var:string label:value="status_CANCELLED"/></p>
         </md-list-item>
-        <md-list-item ng-show="::(editor.component.status == 'needs-action')">
+        <md-list-item ng-show="editor.component.status == 'needs-action'">
           <md-icon>error_outline</md-icon>
           <p><var:string label:value="status_NEEDS-ACTION"/></p>
         </md-list-item>
diff --git a/UI/WebServerResources/js/Scheduler/Component.service.js b/UI/WebServerResources/js/Scheduler/Component.service.js
index eef155864..1971527c4 100644
--- a/UI/WebServerResources/js/Scheduler/Component.service.js
+++ b/UI/WebServerResources/js/Scheduler/Component.service.js
@@ -758,6 +758,31 @@
             this.status != 'cancelled');
   };
 
+  /**
+   * @function markAsCompleted
+   * @memberof Component.prototype
+   * @desc Mark the task as completed.
+   * @returns a promise of the HTTP operation
+   */
+  Component.prototype.markAsCompleted = function() {
+    var _this = this, dlp;
+    if (this.type == 'task') {
+      dlp = Component.$Preferences.$mdDateLocaleProvider;
+      this.percentComplete = 100;
+      this.completed = new Date();
+      this.completed.$dateFormat = Component.$Preferences.defaults.SOGoLongDateFormat;
+      this.status = 'completed';
+      this.localizedCompletedDate = dlp.formatDate(this.completed);
+      this.localizedCompletedTime = dlp.formatTime(this.completed);
+      return this.$save().catch(function() {
+        _this.$reset();
+      });
+    }
+    else {
+      return Component.$q.reject('Only tasks can be mark as completed');
+    }
+  };
+
   /**
    * @function coversFreeBusy
    * @memberof Component.prototype