[FIX] web: use right color class for calendar popovers

Purpose:
--------
Currently, the calendar common popover has an incorrect color class if
the value of the field used to color the records in the calendar is not
a number. Therefore the popover header remains grey although the event
is colored, and the header content is misaligned.

This commit fixes this behavior by using the `getColor` method to obtain
the class name to use in the popover, which is the method currently used
to obtain the class name to use in the event. If this method does not
return a number, the default color class (o_calendar_color_0) is used.

Task-3239985

closes odoo/odoo#128169

X-original-commit: b159a98e0f0c89fab91b706895bbc1884a8cbd4e
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

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() {

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,