diff --git a/UI/WebServerResources/js/Common/cssescape.filter.js b/UI/WebServerResources/js/Common/cssescape.filter.js
new file mode 100644
index 000000000..388e61ffc
--- /dev/null
+++ b/UI/WebServerResources/js/Common/cssescape.filter.js
@@ -0,0 +1,19 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+/**
+ * @type {angular.Module}
+ */
+ (function () {
+  'use strict';
+
+  /**
+   * @ngInject
+   */
+  cssEscape.$inject = ['$window'];
+  function cssEscape($window) {
+    return $window.CSS.escape;
+  }
+
+  angular.module('SOGo.Common')
+    .filter('cssEscape', cssEscape);
+})();
diff --git a/UI/WebServerResources/js/Scheduler/sgCategoryStylesheet.directive.js b/UI/WebServerResources/js/Scheduler/sgCategoryStylesheet.directive.js
index 1e652dfb0..75dbcee95 100644
--- a/UI/WebServerResources/js/Scheduler/sgCategoryStylesheet.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCategoryStylesheet.directive.js
@@ -26,11 +26,11 @@
       template: [
         '<style type="text/css">',
         /* Background color */
-        '  .bg-category{{ ngModel.id }} {',
+        '  .bg-category{{ ngModel.id | cssEscape }} {',
         '    background-color: {{ ngModel.color }} !important;',
         '  }',
         /* Border color */
-        '  .bdr-category{{ ngModel.id }} {',
+        '  .bdr-category{{ ngModel.id | cssEscape }} {',
         '    border-color: {{ ngModel.color }} !important;',
         '  }',
         '</style>'