diff --git a/assets/js/backend_calendar_default_view.js b/assets/js/backend_calendar_default_view.js
index adeb05ec..3401b12e 100755
--- a/assets/js/backend_calendar_default_view.js
+++ b/assets/js/backend_calendar_default_view.js
@@ -270,6 +270,21 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
         return (result > 500) ? result : 500; // Minimum height is 500px
     }
 
+    /**
+     * Get the event notes for the popup widget.
+     *
+     * @param {Event} event
+     */
+    function getEventNotes(event) {
+        if (!event.data || !event.data.notes) {
+            return '-';
+        }
+
+        var notes = event.data.notes;
+
+        return notes.length > 100 ? notes.substring(0, 100) + '...' : notes;
+    }
+
     /**
      * Calendar Event "Click" Callback
      *
@@ -296,11 +311,6 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                 && GlobalVariables.user.privileges.appointments.delete === true)
                 ? '' : 'hide'; // Same value at the time.
 
-            var notes = '';
-            if (event.data) { // Only custom unavailable periods have notes.
-                notes = '<strong>Notes</strong> ' + event.data.notes;
-            }
-
             $html = $('<div/>', {
                 'html': [
                     $('<strong/>', {
@@ -319,8 +329,11 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                     }),
                     $('<br/>'),
 
+                    $('<strong/>', {
+                        'text': EALang.notes
+                    }),
                     $('<span/>', {
-                        'text': notes
+                        'text': getEventNotes(event)
                     }),
                     $('<br/>'),
 
@@ -485,6 +498,14 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                     }),
                     $('<br/>'),
 
+                    $('<strong/>', {
+                        'text': EALang.notes
+                    }),
+                    $('<span/>', {
+                        'text': getEventNotes(event)
+                    }),
+                    $('<br/>'),
+
                     $('<hr/>'),
 
                     $('<div/>', {
diff --git a/assets/js/backend_calendar_table_view.js b/assets/js/backend_calendar_table_view.js
index b4cebac7..ac916746 100755
--- a/assets/js/backend_calendar_table_view.js
+++ b/assets/js/backend_calendar_table_view.js
@@ -997,6 +997,21 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
         }
     }
 
+    /**
+     * Get the event notes for the popup widget.
+     *
+     * @param {Event} event
+     */
+    function getEventNotes(event) {
+        if (!event.data || !event.data.notes) {
+            return '-';
+        }
+
+        var notes = event.data.notes;
+
+        return notes.length > 100 ? notes.substring(0, 100) + '...' : notes;
+    }
+
     /**
      * Calendar Event "Click" Callback
      *
@@ -1023,11 +1038,6 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                 && GlobalVariables.user.privileges.appointments.delete === true)
                 ? '' : 'hide'; // Same value at the time.
 
-            var notes = '';
-            if (event.data) { // Only custom unavailable periods have notes.
-                notes = '<strong>Notes</strong> ' + event.data.notes;
-            }
-
             $html = $('<div/>', {
                 'html': [
                     $('<strong/>', {
@@ -1046,8 +1056,11 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                     }),
                     $('<br/>'),
 
+                    $('<strong/>', {
+                        'text': EALang.notes
+                    }),
                     $('<span/>', {
-                        'text': notes
+                        'text': getEventNotes(event)
                     }),
                     $('<br/>'),
 
@@ -1212,6 +1225,14 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                     }),
                     $('<br/>'),
 
+                    $('<strong/>', {
+                        'text': EALang.notes
+                    }),
+                    $('<span/>', {
+                        'text': getEventNotes(event)
+                    }),
+                    $('<br/>'),
+
                     $('<hr/>'),
 
                     $('<div/>', {