diff --git a/UI/Templates/SchedulerUI/UIxCalendarProperties.wox b/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
index fc406f467..cac18cb0b 100644
--- a/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
+++ b/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
@@ -8,10 +8,10 @@
     >
   <md-dialog flex-sm="100">
 
-    <md-toolbar ng-style="{ 'background-color': properties.calendar.color }">
+    <md-toolbar ng-class="properties.calendar.getClassName('bg')">
       <div class="md-toolbar-tools">
         <!-- color -->
-        <sg-color-picker sg-on-select="properties.calendar.color = color"><!-- color picker --></sg-color-picker>
+        <sg-color-picker sg-on-select="properties.setColor(color)"><!-- color picker --></sg-color-picker>
         <!-- name -->
         <md-input-container>
           <label><var:string label:value="Name"/></label>
diff --git a/UI/WebServerResources/js/Scheduler/CalendarsController.js b/UI/WebServerResources/js/Scheduler/CalendarsController.js
index 257e47ac0..035632ee2 100644
--- a/UI/WebServerResources/js/Scheduler/CalendarsController.js
+++ b/UI/WebServerResources/js/Scheduler/CalendarsController.js
@@ -126,6 +126,7 @@
     }
 
     function showProperties(calendar) {
+      var color = calendar.color;
       $mdDialog.show({
         templateUrl: calendar.id + '/properties',
         controller: PropertiesDialogController,
@@ -133,30 +134,39 @@
         clickOutsideToClose: true,
         escapeToClose: true,
         locals: {
-          calendar: calendar
+          srcCalendar: calendar
         }
+      }).catch(function() {
+        // Restore original color when cancelling or closing the dialog
+        calendar.color = color;
       });
       
       /**
        * @ngInject
        */
-      PropertiesDialogController.$inject = ['$mdDialog', 'calendar'];
-      function PropertiesDialogController($mdDialog, calendar) {
+      PropertiesDialogController.$inject = ['$timeout', '$mdDialog', 'srcCalendar'];
+      function PropertiesDialogController($timeout, $mdDialog, srcCalendar) {
         var vm = this;
 
-        vm.calendar = new Calendar(calendar.$omit());
+        vm.calendar = new Calendar(srcCalendar.$omit());
+        vm.setColor = setColor;
         vm.saveProperties = saveProperties;
         vm.close = close;
 
+        function setColor(color) {
+          vm.calendar.color = color;
+          srcCalendar.color = color;
+        }
+
         function saveProperties() {
           vm.calendar.$save();
           // Refresh list instance
-          calendar.init(vm.calendar.$omit());
+          srcCalendar.init(vm.calendar.$omit());
           $mdDialog.hide();
         }
 
         function close() {
-          $mdDialog.hide();
+          $mdDialog.cancel();
         }
       }
     }