diff --git a/js/calendar/mods-for-hesk-calendar-admin-readonly.js b/js/calendar/mods-for-hesk-calendar-admin-readonly.js
index 94289cb1..ce87b063 100644
--- a/js/calendar/mods-for-hesk-calendar-admin-readonly.js
+++ b/js/calendar/mods-for-hesk-calendar-admin-readonly.js
@@ -85,7 +85,15 @@ $(document).ready(function() {
                 animation: true,
                 container: 'body',
                 placement: 'auto'
-            }).popover('show');
+            }).data('bs.popover')
+                .tip()
+                .css('padding', '0')
+                .find('.popover-title')
+                .css('background-color', event.color === '#fff' ? '#f7f7f7' : event.color)
+                .addClass('background-volatile');
+
+            $eventMarkup.popover('show');
+            refreshBackgroundVolatileItems();
         },
         eventMouseout: function() {
             $(this).popover('destroy');
diff --git a/js/calendar/mods-for-hesk-calendar-readonly.js b/js/calendar/mods-for-hesk-calendar-readonly.js
index ea5ba6c4..ff0d8b7c 100644
--- a/js/calendar/mods-for-hesk-calendar-readonly.js
+++ b/js/calendar/mods-for-hesk-calendar-readonly.js
@@ -74,7 +74,15 @@ $(document).ready(function() {
                 animation: true,
                 container: 'body',
                 placement: 'auto'
-            }).popover('show');
+            }).data('bs.popover')
+                .tip()
+                .css('padding', '0')
+                .find('.popover-title')
+                .css('background-color', event.color === '#fff' ? '#f7f7f7' : event.color)
+                .addClass('background-volatile');
+
+            $eventMarkup.popover('show');
+            refreshBackgroundVolatileItems();
         },
         eventMouseout: function(event) {
             if (event.type === 'TICKET') {
diff --git a/js/calendar/mods-for-hesk-calendar.js b/js/calendar/mods-for-hesk-calendar.js
index f708d5b8..48b3a083 100644
--- a/js/calendar/mods-for-hesk-calendar.js
+++ b/js/calendar/mods-for-hesk-calendar.js
@@ -98,7 +98,15 @@ $(document).ready(function() {
                 animation: true,
                 container: 'body',
                 placement: 'auto'
-            }).popover('show');
+            }).data('bs.popover')
+                .tip()
+                .css('padding', '0')
+                .find('.popover-title')
+                .css('background-color', event.color === '#fff' ? '#f7f7f7' : event.color)
+                .addClass('background-volatile');
+
+            $eventMarkup.popover('show');
+            refreshBackgroundVolatileItems();
         },
         eventMouseout: function() {
             $(this).popover('destroy');
diff --git a/js/modsForHesk-javascript.js b/js/modsForHesk-javascript.js
index 46395c44..9e9e3e26 100644
--- a/js/modsForHesk-javascript.js
+++ b/js/modsForHesk-javascript.js
@@ -50,21 +50,7 @@ var loadJquery = function()
     $('.clockpicker').clockpicker();
 
     // Set the proper text color for background-volatile elements
-    $('.background-volatile').each(function() {
-        $this = $(this);
-        var background = $this.css('background-color');
-
-        if (background !== 'rgba(0, 0, 0, 0)'
-            && background !== 'transparent') {
-            var grayCount = calculateGrayCount(background);
-
-            if (grayCount > 186) {
-                $this.css('color', '#000');
-            } else {
-                $this.css('color', '#fff');
-            }
-        }
-    });
+    refreshBackgroundVolatileItems();
 
     // Initialize colorpicker
     $('.colorpicker-trigger').colorpicker({
@@ -101,6 +87,24 @@ var loadJquery = function()
     })
 };
 
+function refreshBackgroundVolatileItems() {
+    $('.background-volatile').each(function() {
+        $this = $(this);
+        var background = $this.css('background-color');
+
+        if (background !== 'rgba(0, 0, 0, 0)'
+            && background !== 'transparent') {
+            var grayCount = calculateGrayCount(background);
+
+            if (grayCount > 186) {
+                $this.css('color', '#000');
+            } else {
+                $this.css('color', '#fff');
+            }
+        }
+    });
+}
+
 function calculateGrayCount(background) {
     var parts = background.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
     var red = parts[1];