diff --git a/addons/hr_holidays/report/hr_leave_report_calendar.xml b/addons/hr_holidays/report/hr_leave_report_calendar.xml
index 459fe8810ec..0d90bf533bf 100644
--- a/addons/hr_holidays/report/hr_leave_report_calendar.xml
+++ b/addons/hr_holidays/report/hr_leave_report_calendar.xml
@@ -16,7 +16,7 @@
         <field name="name">hr.leave.report.calendar.view</field>
         <field name="model">hr.leave.report.calendar</field>
         <field name="arch" type="xml">
-            <calendar string="Time Off" date_start="start_datetime" date_stop="stop_datetime" mode="month" quick_add="False" color="employee_id" event_open_popup="True">
+            <calendar string="Time Off" date_start="start_datetime" date_stop="stop_datetime" mode="month" quick_add="False" color="employee_id" event_open_popup="True" js_class="time_off_calendar_all">
                 <field name="name"/>
             </calendar>
         </field>
diff --git a/addons/hr_holidays/static/src/js/time_off_calendar.js b/addons/hr_holidays/static/src/js/time_off_calendar.js
index b012aff2e1c..dd5c94f01dd 100644
--- a/addons/hr_holidays/static/src/js/time_off_calendar.js
+++ b/addons/hr_holidays/static/src/js/time_off_calendar.js
@@ -19,8 +19,14 @@ odoo.define('hr_holidays.dashboard.view_custo', function(require) {
             const state = this.event.extendedProps.record.state;
             this.canDelete = state && ['validate', 'refuse'].indexOf(state) === -1;
             this.canEdit = state !== undefined;
-            this.display_name = this.event.extendedProps.record.display_name;
             this.displayFields = [];
+
+            if (this.modelName === "hr.leave.report.calendar") {
+                const duration = this.event.extendedProps.record.display_name.split(':').slice(-1);
+                this.display_name = _.str.sprintf(_t("Time Off : %s"), duration);
+            } else {
+                this.display_name = this.event.extendedProps.record.display_name;
+            }
         },
     });