diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss
index d721173f5b5..03b54090aef 100644
--- a/addons/calendar/static/src/scss/calendar.scss
+++ b/addons/calendar/static/src/scss/calendar.scss
@@ -26,13 +26,11 @@
 
 .o_calendar_renderer .fc-event {
     &:not(.o_event_dot) {
-        --o-overlay-opacity: .5;
-
         &.o_attendee_status_active {
             --o-bg-opacity: 1;
         }
 
-        &.o_attendee_status_tentative, &.o_event_hatched {
+        &.o_attendee_status_tentative {
             --o-bg-opacity: .5;
         }
 
@@ -47,22 +45,6 @@
     }
 
     &.o_event_dot {
-        --o-overlay-opacity: .25;
-
-        display: flex;
-        align-items: center;
-        gap: map-get($spacers, 1 );
-        border: none;
-        background-color: rgba(var(--o-event-bg--subtle-rgb), var(--o-bg-opacity));
-
-        &:before {
-            z-index: 2;
-            display: inline-block;
-            font-family: Fontawesome;
-            color: var(--o-event-bg, #{$info});
-            content: '\f111'; // fa-circle
-        }
-
         &.o_attendee_status_needsAction, &.o_event_hatched {
             &:before {
                 content: "\f1db"; // fa-circle-thin
@@ -80,10 +62,6 @@
         &.o_attendee_status_alone {
             content: "\f06a"; // fa-exclamation-circle
         }
-
-        &:hover {
-            --o-bg-opacity: 1;
-        }
     }
 
     &.o_attendee_status_declined, &.o_event_striked {
@@ -92,15 +70,3 @@
         }
     }
 }
-
-@for $-i from 1 through length($o-colors-complete) {
-    $-color: nth($o-colors-complete, $-i);
-    $-color-subtle: mix($o-white, $-color, 85%);
-
-    .o_calendar_renderer .fc-event.o_calendar_color_#{$-i - 1} {
-        --o-event-bg: #{$-color};
-        --o-event-bg-rgb: #{to-rgb($-color)};
-        --o-event-bg--subtle: #{$-color-subtle};
-        --o-event-bg--subtle-rgb: #{to-rgb($-color-subtle)};
-    }
-}
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss
index 60eddd370b4..b20bdf2e6b6 100644
--- a/addons/web/static/src/views/calendar/calendar_renderer.scss
+++ b/addons/web/static/src/views/calendar/calendar_renderer.scss
@@ -72,6 +72,34 @@
                 }
             }
         }
+
+        &:not(.o_event_dot) {
+            --o-overlay-opacity: .5;
+
+            &.o_event_hatched {
+                --o-bg-opacity: .5;
+            }
+        }
+
+        &.o_event_dot {
+            --o-overlay-opacity: .25;
+
+            display: flex;
+            align-items: center;
+            gap: map-get($spacers, 1);
+            border: none;
+
+            &:before {
+                z-index: 2;
+                display: inline-block;
+                font-family: Fontawesome;
+                content: '\f111'; // fa-circle
+            }
+
+            &:hover {
+                --o-bg-opacity: 1;
+            }
+        }
     }
 
     .o_calendar_widget {
@@ -593,6 +621,9 @@
 
     .o_calendar_renderer .fc-view {
         .o_calendar_color_#{$i - 1} {
+            --o-event-bg: #{$color};
+            --o-event-bg--subtle-rgb: #{to-rgb($color-subtle)};
+
             &.fc-bgevent, &:not(.o_event_dot) .fc-bg {
                 background-color: $color-subtle;
             }
@@ -618,6 +649,14 @@
                 color: color-contrast($color-subtle);
                 border-color: tint-color($color, 50%);
             }
+
+            &.o_event_dot {
+                background-color: rgba(var(--o-event-bg--subtle-rgb), var(--o-bg-opacity));
+
+                &:before {
+                    color: var(--o-event-bg, #{$info});
+                }
+            }
         }
     }