diff --git a/NEWS b/NEWS
index 1fea92406..8c79f8985 100644
--- a/NEWS
+++ b/NEWS
@@ -4,6 +4,7 @@
 Enhancements
  - [web] always display name of month in week view (#3724)
  - [web] use a speed dial (instead of a dialog) for card/list creation
+ - [web] use a speed dial for event/task creation
 
 Bug fixes
  - [web] fixed generic avatar in lists (#3719)
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index c2413ff19..3a0b866a3 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -641,18 +641,28 @@
             </md-tab>
           </md-tabs>
         </md-content>
-        <md-button class="md-fab md-fab-bottom-right"
-                   label:aria-label="Create a new event"
-                   ng-click="list.newComponent($event)"
-                   ng-if="list.componentType == 'events'">
-          <md-icon >event</md-icon>
-        </md-button>
-        <md-button class="md-fab md-fab-bottom-right"
-                   label:aria-label="Create a new task"
-                   ng-click="list.newComponent($event)"
-                   ng-if="list.componentType == 'tasks'">
-          <md-icon>assignment_turned_in</md-icon>
-        </md-button>
+        <md-fab-speed-dial
+             class="md-fling md-fab-bottom-right"
+             md-direction="up" md-open="false"
+             ng-cloak="ng-cloak">
+            <md-fab-trigger>
+              <md-button class="md-fab md-accent" label:aria-label="New Event">
+                <md-icon>add</md-icon>
+              </md-button>
+            </md-fab-trigger>
+            <md-fab-actions>
+              <md-button var:aria-label="Create a new event" class="md-fab md-raised md-mini"
+                         ng-click="list.newComponent($event, 'appointment')">
+                <md-tooltip md-direction="left"><var:string label:value="Create a new event"/></md-tooltip>
+                <md-icon>event</md-icon>
+              </md-button>
+              <md-button var:aria-label="Create a new task" class="md-fab md-raised md-mini"
+                         ng-click="list.newComponent($event, 'task')">
+                <md-tooltip md-direction="left"><var:string label:value="Create a new task"/></md-tooltip>
+                <md-icon>assignment_turned_in</md-icon>
+              </md-button>
+            </md-fab-actions>
+          </md-fab-speed-dial>
         </div>
         <div id="detailView" class="view-detail hide show-gt-md md-default-theme md-background md-bg md-hue-2"
              layout="column" ui-view="calendarView">
diff --git a/UI/WebServerResources/js/Scheduler/CalendarListController.js b/UI/WebServerResources/js/Scheduler/CalendarListController.js
index 538b89617..dc8d58067 100644
--- a/UI/WebServerResources/js/Scheduler/CalendarListController.js
+++ b/UI/WebServerResources/js/Scheduler/CalendarListController.js
@@ -123,16 +123,13 @@
       }
     }
 
-    function newComponent($event, baseComponent) {
-      var type = 'appointment', component;
+    function newComponent($event, type, baseComponent) {
+      var component;
 
       if (baseComponent) {
         component = baseComponent;
-        type = baseComponent.type;
       }
       else {
-        if (vm.componentType == 'tasks')
-          type = 'task';
         component = new Component({ pid: Calendar.$defaultCalendar(), type: type });
       }
 
@@ -166,7 +163,7 @@
         if (component.isAllDay)
           coordinates.duration -= 96;
         component.setDelta(coordinates.duration * 15);
-        newComponent(null, component).finally(function() {
+        newComponent(null, 'appointment', component).finally(function() {
           $timeout(function() {
             Component.$resetGhost();
           });