diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss
index ea5ff414863..147bf05240e 100644
--- a/addons/calendar/static/src/scss/calendar.scss
+++ b/addons/calendar/static/src/scss/calendar.scss
@@ -92,3 +92,75 @@
 .o_attendee_border_tentative {
     border-color: map-get($theme-colors, 'light');
 }
+
+@for $i from 1 through length($o-filter_colors) {
+    $color: nth($o-filter_colors, $i);
+
+    .o_cw_popover_link.o_calendar_color_#{$i - 1} {
+        &.o_attendee_status_tentative {
+            color: color-contrast($color);
+            background: repeating-linear-gradient(
+                45deg,
+                $color,
+                $color 10px,
+                rgba($color, 0.7) 10px,
+                rgba($color, 0.7) 20px
+            ) !important;
+        }
+
+        &.o_attendee_status_needsAction {
+            background-color: rgba($o-view-background-color, 0.9) !important;
+        }
+
+        &.o_attendee_status_declined {
+            text-decoration: line-through;
+            background-color: rgba($o-view-background-color, 0.9) !important;
+        }
+    }
+
+    .o_calendar_renderer {
+        .fc-event.o_calendar_color_#{$i - 1} {
+            &.o_attendee_status_needsAction,
+            &.o_attendee_status_tentative,
+            &.o_attendee_status_declined,
+            &.o_attendee_status_alone {
+                border-width: 2px 2px 2px !important;
+
+                &.o_cw_custom_highlight {
+                    background-color: $color;
+                }
+            }
+
+            &.o_attendee_status_tentative {
+                color: color-contrast($color) !important;
+                .fc-bg {
+                    background: repeating-linear-gradient(
+                        45deg,
+                        $color,
+                        $color 10px,
+                        rgba(white, 0.4) 10px,
+                        rgba(white, 0.4) 20px
+                    ) !important;
+                }
+            }
+
+            &.o_attendee_status_alone,
+            &.o_attendee_status_needsAction {
+                background-color: rgba($o-view-background-color, 0.9) !important;
+                color: $o-black !important;
+                .fc-bg {
+                    background-color: rgba($o-view-background-color, 0.9) !important;
+                }
+            }
+
+            &.o_attendee_status_declined {
+                text-decoration: line-through;
+                background-color: rgba($o-view-background-color, 0.9) !important;
+                color: $o-black !important;
+                .fc-bg {
+                    background-color: rgba($o-view-background-color, 0.9) !important;
+                }
+            }
+        }
+    }
+}
diff --git a/addons/calendar/static/src/views/attendee_calendar/year/attendee_calendar_year_popover.js b/addons/calendar/static/src/views/attendee_calendar/year/attendee_calendar_year_popover.js
index 66f4c9383ca..ea37536000a 100644
--- a/addons/calendar/static/src/views/attendee_calendar/year/attendee_calendar_year_popover.js
+++ b/addons/calendar/static/src/views/attendee_calendar/year/attendee_calendar_year_popover.js
@@ -2,7 +2,17 @@
 
 import { CalendarYearPopover } from "@web/views/calendar/calendar_year/calendar_year_popover";
 
-export class AttendeeCalendarYearPopover extends CalendarYearPopover {}
+export class AttendeeCalendarYearPopover extends CalendarYearPopover {
+    getRecordClass(record) {
+        const classes = [super.getRecordClass(record)];
+        if (record.isAlone) {
+            classes.push("o_attendee_status_alone");
+        } else {
+            classes.push(`o_attendee_status_${record.attendeeStatus}`);
+        }
+        return classes.join(" ");
+    }
+}
 AttendeeCalendarYearPopover.subTemplates = {
     ...CalendarYearPopover.subTemplates,
     body: "calendar.AttendeeCalendarYearPopover.body",
diff --git a/addons/hr_holidays/static/src/views/calendar/calendar_renderer.scss b/addons/hr_holidays/static/src/views/calendar/calendar_renderer.scss
index ef5d7a561dc..e12433e3b07 100644
--- a/addons/hr_holidays/static/src/views/calendar/calendar_renderer.scss
+++ b/addons/hr_holidays/static/src/views/calendar/calendar_renderer.scss
@@ -13,38 +13,5 @@
         .fc-bgevent {
             border-radius: 25px;
         }
-
-        @for $i from 1 through length($o-filter_colors) {
-            $color: nth($o-filter_colors, $i);
-
-            .o_calendar_color_#{$i - 1} {
-                &.o_event_hatched {
-                    background: repeating-linear-gradient(
-                        45deg,
-                        $color,
-                        $color 10px,
-                        rgba($color, 0.4) 10px,
-                        rgba($color, 0.4) 20px
-                    ) !important;
-
-                    .fc-bg {
-                        background: repeating-linear-gradient(
-                            45deg,
-                            $color,
-                            $color 10px,
-                            rgba($color, 0.5) 10px,
-                            rgba($color, 0.5) 20px
-                        );
-                    }
-                }
-
-                &.o_event_striked {
-                    background: linear-gradient(
-                        transparent 0 45%,
-                        $color 45% 55%,
-                        transparent 55% 100%);
-                }
-            }
-        }
     }
 }
diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml
index 1359769f544..521422fce03 100644
--- a/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml
+++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_popover.xml
@@ -26,7 +26,7 @@
         </div>
         <div class="o_cw_body">
             <t t-call="{{ constructor.subTemplates.body }}" />
-            <div class="card-footer border-top" t-att-class="{ 'o_footer_shrink': isEventEditable and isEventDeletable }">
+            <div class="card-footer border-top" t-att-class="{ 'o_footer_shrink': !isEventEditable and !isEventDeletable }">
                 <t t-call="{{ constructor.subTemplates.footer }}" />
             </div>
         </div>
diff --git a/addons/web/static/src/views/calendar/calendar_renderer.scss b/addons/web/static/src/views/calendar/calendar_renderer.scss
index fa553601524..80bfdd79f92 100644
--- a/addons/web/static/src/views/calendar/calendar_renderer.scss
+++ b/addons/web/static/src/views/calendar/calendar_renderer.scss
@@ -1,3 +1,11 @@
+// Generated with http://phrogz.net/css/distinct-colors.html
+// Do not modify the first 12 colors of this list or it will break the colors in the Time Off Calendar
+$o-filter_colors: lighten(#000, 46.7%), #f06050, #f4a460, #f7cd1f, #6cc1ed, #814968, #eb7e7f, #2c8397, #475577, #d6145f,
+    #30c381, #9365b8, #ff1e00, #bf9600, #0003b3, #ff006a, #cc3300, #ffea00, #00cc85, #007ab3, #6900cc, #ff0048, #c2cc00,
+    #00ffc8, #008cff, #bf0036, #b24400, #d0ff00, #00ffea, #0062b3, #ea00ff, #ff0026, #8bcc00, #00bfaf, #006aff, #af00bf,
+    #bf001d, #bf6300, #8cff00, #00f2ff, #004ab3, #ff00d0, #ffa600, #3acc00, #00b6bf, #0048ff, #bf7c00, #04ff00, #00d0ff,
+    #0036bf, #ff008c, #00bf49, #0092b3, #0004ff, #b20062, #649173 !default;
+
 .o_calendar_renderer {
     flex: 1 1 auto;
     min-width: 0;
@@ -372,39 +380,6 @@
                 padding-left: 5px;
             }
 
-            @for $i from 1 through length($o-colors-complete) {
-                $color: nth($o-colors-complete, $i);
-
-                .o_cw_popover_link.o_calendar_color_#{$i - 1} {
-                    border: solid 2px;
-                    padding-left: 5px;
-                    border-color: $color;
-                    margin-top: 2px;
-                    background: $color;
-                    color: black;
-
-                    &.o_attendee_status_tentative {
-                        color: color-contrast($color);
-                        background: repeating-linear-gradient(
-                            45deg,
-                            $color,
-                            $color 10px,
-                            rgba($color, 0.7) 10px,
-                            rgba($color, 0.7) 20px
-                        ) !important;
-                    }
-
-                    &.o_attendee_status_needsAction {
-                        background-color: rgba($o-view-background-color, 0.9) !important;
-                    }
-
-                    &.o_attendee_status_declined {
-                        text-decoration: line-through;
-                        background-color: rgba($o-view-background-color, 0.9) !important;
-                    }
-                }
-            }
-
             > table {
                 height: 100%;
             }
@@ -535,91 +510,68 @@
     }
 }
 
-// Generated with http://phrogz.net/css/distinct-colors.html
-// Do not modify the first 12 colors of this list or it will break the colors in the Time Off Calendar
-$o-filter_colors: lighten(#000, 46.7%), #f06050, #f4a460, #f7cd1f, #6cc1ed, #814968, #eb7e7f, #2c8397, #475577, #d6145f,
-    #30c381, #9365b8, #ff1e00, #bf9600, #0003b3, #ff006a, #cc3300, #ffea00, #00cc85, #007ab3, #6900cc, #ff0048, #c2cc00,
-    #00ffc8, #008cff, #bf0036, #b24400, #d0ff00, #00ffea, #0062b3, #ea00ff, #ff0026, #8bcc00, #00bfaf, #006aff, #af00bf,
-    #bf001d, #bf6300, #8cff00, #00f2ff, #004ab3, #ff00d0, #ffa600, #3acc00, #00b6bf, #0048ff, #bf7c00, #04ff00, #00d0ff,
-    #0036bf, #ff008c, #00bf49, #0092b3, #0004ff, #b20062, #649173 !default;
-
 // ===============  Generate color classes ===============
 @for $i from 1 through length($o-filter_colors) {
     $color: nth($o-filter_colors, $i);
 
     .o_calendar_renderer .fc-view {
-        .fc-bgevent.o_calendar_color_#{$i - 1} {
+        .o_calendar_color_#{$i - 1} {
             border-color: $color;
-            background-color: $color;
-            opacity: 0.5;
-        }
-        .fc-event.o_calendar_color_#{$i - 1} {
-            border-color: $color;
-            color: darken($color, 45%);
-            opacity: 1;
-            background: scale-color($color, $lightness: 50%);
-            .fc-bg {
+            &.fc-bgevent {
+                background-color: $color;
+                opacity: 0.5;
+            }
+            &.fc-event {
+                color: darken($color, 45%);
+                opacity: 1;
                 background: scale-color($color, $lightness: 50%);
-            }
-
-            &.o_event_highlight {
-                opacity: 1;
-
-                .fc-content {
-                    font-weight: bold;
+                .fc-bg {
+                    background: scale-color($color, $lightness: 50%);
                 }
-            }
 
-            &.o_cw_custom_highlight {
-                box-shadow: 0 12px 12px -5px rgba($color, 0.3);
-                color: color-contrast($color);
-                z-index: 10 !important;
-                opacity: 1;
-                right: 1px !important;
-                left: 1px !important;
-                margin-right: 0 !important;
-            }
-
-            &.o_attendee_status_needsAction,
-            &.o_attendee_status_tentative,
-            &.o_attendee_status_declined,
-            &.o_attendee_status_alone {
-                border-width: 2px 2px 2px !important;
+                &.o_event_highlight {
+                    opacity: 1;
+                    .fc-content {
+                        font-weight: bold;
+                    }
+                }
 
                 &.o_cw_custom_highlight {
-                    background-color: $color;
+                    box-shadow: 0 12px 12px -5px rgba($color, 0.3);
+                    color: color-contrast($color);
+                    z-index: 10 !important;
+                    opacity: 1;
+                    right: 1px !important;
+                    left: 1px !important;
+                    margin-right: 0 !important;
                 }
             }
 
-            &.o_attendee_status_tentative {
-                color: color-contrast($color);
+            &.o_event_hatched {
+                background: repeating-linear-gradient(
+                    45deg,
+                    $color,
+                    $color 10px,
+                    rgba($color, 0.4) 10px,
+                    rgba($color, 0.4) 20px
+                ) !important;
+
                 .fc-bg {
                     background: repeating-linear-gradient(
                         45deg,
                         $color,
                         $color 10px,
-                        rgba(white, 0.4) 10px,
-                        rgba(white, 0.4) 20px
-                    ) !important;
+                        rgba($color, 0.5) 10px,
+                        rgba($color, 0.5) 20px
+                    );
                 }
             }
 
-            &.o_attendee_status_alone,
-            &.o_attendee_status_needsAction {
-                background-color: rgba($o-view-background-color, 0.9) !important;
-                color: $o-black;
-                .fc-bg {
-                    background-color: rgba($o-view-background-color, 0.9) !important;
-                }
-            }
-
-            &.o_attendee_status_declined {
-                text-decoration: line-through;
-                background-color: rgba($o-view-background-color, 0.9) !important;
-                color: $o-black;
-                .fc-bg {
-                    background-color: rgba($o-view-background-color, 0.9) !important;
-                }
+            &.o_event_striked {
+                background: linear-gradient(
+                    transparent 0 45%,
+                    $color 45% 55%,
+                    transparent 55% 100%);
             }
         }
     }
diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js
index 82318121f3f..3f2aeea764e 100644
--- a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js
+++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.js
@@ -2,6 +2,7 @@
 
 import { Dialog } from "@web/core/dialog/dialog";
 import { formatDate } from "@web/core/l10n/dates";
+import { getColor } from "../colors";
 
 const { Component } = owl;
 
@@ -42,6 +43,22 @@ export class CalendarYearPopover extends Component {
         }
         return Object.values(recordGroups);
     }
+    getRecordClass(record) {
+        const { colorIndex } = record;
+        const color = getColor(colorIndex);
+        if (color && typeof color === "number") {
+            return `o_calendar_color_${color}`;
+        }
+        return "";
+    }
+    getRecordStyle(record) {
+        const { colorIndex } = record;
+        const color = getColor(colorIndex);
+        if (color && typeof color === "string") {
+            return `background-color: ${color};`;
+        }
+        return "";
+    }
     getSortedRecordGroups(recordGroups) {
         return recordGroups.sort((a, b) => {
             if (a.start.hasSame(a.end, "days")) {
diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss
new file mode 100644
index 00000000000..fc9df1c63e9
--- /dev/null
+++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.scss
@@ -0,0 +1,14 @@
+.o_cw_popover_link {
+    border: solid 2px;
+    padding-left: 5px;
+    margin-top: 2px;
+    color: black;
+    @for $i from 1 through length($o-filter_colors) {
+        $color: nth($o-filter_colors, $i);
+        
+        &.o_calendar_color_#{$i - 1} {
+            border-color: $color;
+            background: $color;
+        }
+    }
+}
diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml
index 30ac250c92b..996103ca4f4 100644
--- a/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml
+++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_popover.xml
@@ -21,11 +21,11 @@
                 <i class="fa fa-close small" />
             </span>
         </div>
-        <div class="o_cw_body">
+        <div class="o_cw_body popover-body">
             <t t-call="{{ constructor.subTemplates.body }}" />
-        </div>
-        <div t-if="props.model.canCreate" class="mt-2">
-            <t t-call="{{ constructor.subTemplates.footer }}" />
+            <div t-if="props.model.canCreate" class="mt-2">
+                <t t-call="{{ constructor.subTemplates.footer }}" />
+            </div>
         </div>
     </t>
 
@@ -56,7 +56,8 @@
         <a
             href="#"
             t-on-click.prevent="() => this.onRecordClick(record)"
-            t-attf-class="o_cw_popover_link btn-link d-block"
+            t-attf-style="{{ getRecordStyle(record) }}"
+            t-attf-class="o_cw_popover_link btn-link d-block {{ getRecordClass(record) }}"
             t-att-data-id="record.id"
             t-att-data-title="record.title"
         >
diff --git a/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js b/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js
index 24f53de9aaf..0f566cfdc95 100644
--- a/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js
+++ b/addons/web/static/src/views/calendar/calendar_year/calendar_year_renderer.js
@@ -104,7 +104,7 @@ export class CalendarYearRenderer extends Component {
         };
     }
     openPopover(target, date, records) {
-        this.popover.open(target, this.getPopoverProps(date, records));
+        this.popover.open(target, this.getPopoverProps(date, records), "o_cw_popover");
     }
     unselect() {
         for (const fc of Object.values(this.fcs)) {
diff --git a/addons/web/static/tests/views/calendar/calendar_year_popover_tests.js b/addons/web/static/tests/views/calendar/calendar_year_popover_tests.js
index 4ffb9288104..fbdcc90c666 100644
--- a/addons/web/static/tests/views/calendar/calendar_year_popover_tests.js
+++ b/addons/web/static/tests/views/calendar/calendar_year_popover_tests.js
@@ -90,7 +90,7 @@ QUnit.module("CalendarView - YearPopover", ({ beforeEach }) => {
     QUnit.test("group records", async (assert) => {
         await start({});
 
-        assert.containsN(target, ".o_cw_body > div", 4);
+        assert.containsN(target, ".o_cw_body > div", 5);
         assert.containsN(target, ".o_cw_body > a", 5);
 
         const sectionTitles = target.querySelectorAll(".o_cw_body > div");
@@ -101,7 +101,7 @@ QUnit.module("CalendarView - YearPopover", ({ beforeEach }) => {
 
         assert.strictEqual(
             target.querySelector(".o_cw_body").textContent.trim(),
-            "July 16, 2021R114:00 R2July 13-17, 2021R4July 15-17, 2021R3July 15-19, 2021R5"
+            "July 16, 2021R114:00 R2July 13-17, 2021R4July 15-17, 2021R3July 15-19, 2021R5 Create"
         );
     });