fix(calendar(js)): escape CSS selector names

SOGo uses the name of calendar categories verbatim to construct a CSS
selector without escaping characters such as "/". This patch ensures
those selector names are properly escaped so calendar categories
applied to a calendar event match the according selector and appear
in the correct color.

This patch makes use of the CSS escape API which is supported by all
major browsers. See https://caniuse.com/mdn-api_css_escape.

Also see https://mathiasbynens.be/notes/css-escapes.

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);
+})();

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>'