diff --git a/ietf/static/js/upcoming.js b/ietf/static/js/upcoming.js
index 1eb2a46352..8711ce0d3a 100644
--- a/ietf/static/js/upcoming.js
+++ b/ietf/static/js/upcoming.js
@@ -3,6 +3,12 @@ var display_events = []; // filtered events, processed for calendar display
 var event_calendar; // handle on the calendar object
 var current_tz = 'UTC';
 
+const primary = getComputedStyle(document.body)
+    .getPropertyValue('--bs-primary');
+const secondary = getComputedStyle(document.body)
+    .getPropertyValue('--bs-secondary');
+
+
 // Test whether an event should be visible given a set of filter parameters
 function calendar_event_visible(filter_params, event) {
     // Visible if filtering is disabled or event has no keywords
@@ -49,10 +55,14 @@ function make_display_events(event_data, tz) {
                 glue + (src_event.group || 'Invalid event'));
         }
         return {
-            title: title,
+            title: src_event.current_status != "canceled" ? title : `<del>${title}</del>`,
+            extendedProps: {
+                desc: src_event.current_status != "canceled" ? title : `CANCELLED: ${title}`
+            },
             start: format_moment(src_event.start_moment, tz, 'datetime'),
             end: format_moment(src_event.end_moment, tz, 'datetime'),
-            url: src_event.url
+            url: src_event.url,
+            backgroundColor: src_event.current_status != "canceled" ? primary: secondary
         }; // all events have the URL
     });
 }
@@ -78,9 +88,12 @@ function update_calendar(tz, filter_params) {
             initialView: 'dayGridMonth',
             displayEventTime: false,
             events: function (fInfo, success) { success(display_events); },
+            eventContent: function(info) {
+                return {html: info.event.title};
+            },
             eventDidMount: function (info) {
                 $(info.el)
-                    .tooltip({ title: info.event.title });
+                    .tooltip({ title: info.event.extendedProps.desc });
             },
             eventDisplay: 'block'
         });
@@ -158,4 +171,4 @@ window.timezone_changed = function (newtz) {
     }
 
     update_calendar(newtz);
-};
\ No newline at end of file
+};
diff --git a/ietf/templates/meeting/upcoming.html b/ietf/templates/meeting/upcoming.html
index eece8383f7..09dff6de47 100644
--- a/ietf/templates/meeting/upcoming.html
+++ b/ietf/templates/meeting/upcoming.html
@@ -137,6 +137,7 @@ <h3 class="my-3">No upcoming meetings</h3>
                       {% with session=entry %}
                           {
                               group: '{% if session.group %}{{session.group.acronym}}{% endif %}{% if session.name %} - {{session.name}}{% endif %}',
+                              current_status: '{{ session.current_status }}',
                               filter_keywords: ["{{ session.filter_keywords|join:'","' }}"],
                               start_moment: moment.utc('{{session.official_timeslotassignment.timeslot.time | utc | date:"Y-m-d H:i"}}'),
                               end_moment: moment.utc('{{session.official_timeslotassignment.timeslot.end_time | utc | date:"Y-m-d H:i"}}'),
@@ -157,4 +158,4 @@ <h3 class="my-3">No upcoming meetings</h3>
                 agenda_filter.enable();
         });
     </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file