diff --git a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js
index d8db042ed2d..98487de5d7b 100644
--- a/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js
+++ b/addons/web/static/src/views/calendar/calendar_common/calendar_common_renderer.js
@@ -154,10 +154,11 @@ export class CalendarCommonRenderer extends Component {
         };
     }
     openPopover(target, record) {
+        const color = getColor(record.colorIndex);
         this.popover.open(
             target,
             this.getPopoverProps(record),
-            `o_cw_popover o_calendar_color_${record.colorIndex}`
+            `o_cw_popover o_calendar_color_${typeof(color) === "number" ? color : 0}`
         );
     }
     updateSize() {
diff --git a/addons/web/static/tests/views/calendar/calendar_view_tests.js b/addons/web/static/tests/views/calendar/calendar_view_tests.js
index aa6def07245..000ff36ac27 100644
--- a/addons/web/static/tests/views/calendar/calendar_view_tests.js
+++ b/addons/web/static/tests/views/calendar/calendar_view_tests.js
@@ -2702,6 +2702,23 @@ QUnit.module("Views", ({ beforeEach }) => {
         );
     });
 
+    QUnit.test("Colors: use available colors when attr is not number", async (assert) => {
+        await makeView({
+            type: "calendar",
+            resModel: "event",
+            serverData,
+            arch: `
+                <calendar date_start="start" date_stop="stop" color="name">
+                    <field name="partner_ids" write_model="filter_partner" write_field="partner_id" filter_field="partner_checked"  />
+                </calendar>
+            `,
+        });
+        const colorClass = Array.from(findEvent(target, 1).classList).find(className => className.startsWith("o_calendar_color_"));
+        assert.notOk(isNaN(Number(colorClass.split("_").at(-1))));
+        await clickEvent(target, 1);
+        assert.hasClass(target.querySelector(".o_cw_popover"), colorClass);
+    });
+
     QUnit.test(`Add filters and specific color`, async (assert) => {
         serverData.models.event_type.records.push({
             id: 4,