[IMP] web: show start time of regular event in calendar

With this commit, the start time of single day events is displayed
in the calendar view, in month mode. This only applies to non allday
events. This can be disabled by setting (already existing) option
'hide_time' to true on the calendar arch.

task-2058477

Co-authored-by: Mohammed Shekha <msh@odoo.com>

5 files changed, 125 insertions, 10 deletions

diff --git a/addons/web/static/src/js/views/calendar/calendar_model.js b/addons/web/static/src/js/views/calendar/calendar_model.js
index 0fe12456e46..2f2c6339ac6 100644
--- a/addons/web/static/src/js/views/calendar/calendar_model.js
+++ b/addons/web/static/src/js/views/calendar/calendar_model.js
@@ -728,6 +728,7 @@ return AbstractModel.extend({
             r.allDay = true;
             r.start = date_start.format('YYYY-MM-DD');
             r.end = date_stop.startOf('day').format('YYYY-MM-DD');
+            r.showTime = true;
         }
 
         return r;
diff --git a/addons/web/static/src/js/views/calendar/calendar_renderer.js b/addons/web/static/src/js/views/calendar/calendar_renderer.js
index a22f39ec4ec..f563f793203 100644
--- a/addons/web/static/src/js/views/calendar/calendar_renderer.js
+++ b/addons/web/static/src/js/views/calendar/calendar_renderer.js
@@ -422,7 +422,6 @@ return AbstractRenderer.extend({
                     element.find('.fc-content').after($('<div/>', {class: 'fc-bg'}));
                 }
 
-                // For month view: Show background for all-day/multidate events only
                 if (view.name === 'month' && event.record) {
                     var start = event.r_start || event.start;
                     var end = event.r_end || event.end;
@@ -430,7 +429,12 @@ return AbstractRenderer.extend({
                     // note: add & remove 1 min to avoid issues with 00:00
                     var isSameDayEvent = start.clone().add(1, 'minute').isSame(end.clone().subtract(1, 'minute'), 'day');
                     if (!event.record.allday && isSameDayEvent) {
+                        // For month view: do not show background for non allday, single day events
                         element.addClass('o_cw_nobg');
+                        if (event.showTime && !self.hideTime) {
+                            const displayTime = start.format(self._getDbTimeFormat());
+                            element.find('.fc-content .fc-time').text(displayTime);
+                        }
                     }
                 }
 
@@ -662,6 +666,16 @@ return AbstractRenderer.extend({
         return Promise.resolve(prom);
     },
     /**
+     * Returns the time format from database parameters (only hours and minutes).
+     * FIXME: this looks like a weak heuristic...
+     *
+     * @private
+     * @returns {string}
+     */
+    _getDbTimeFormat: function () {
+        return _t.database.parameters.time_format.search('%H') !== -1 ? 'HH:mm' : 'hh:mm a';
+    },
+    /**
      * Prepare context to display in the popover.
      *
      * @private
@@ -686,8 +700,7 @@ return AbstractRenderer.extend({
 
         // Do not display timing if the event occur across multiple days. Otherwise use user's timing preferences
         if (!this.hideTime && !eventData.record.allday && isSameDayEvent) {
-            // Fetch user's preferences
-            var dbTimeFormat = _t.database.parameters.time_format.search('%H') != -1 ? 'HH:mm': 'hh:mm a';
+            var dbTimeFormat = this._getDbTimeFormat();
 
             context.eventTime.time = start.clone().format(dbTimeFormat) + ' - ' + end.clone().format(dbTimeFormat);
 
diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss
index 1a5bdf5c078..8ba1157f003 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -277,11 +277,9 @@ $o-cw-filter-avatar-size: 20px;
 
             .fc-event {
                 margin: 0 3px 2px;
-                .o_event_title {
-                    @include text-truncate();
-                }
 
                 .fc-content {
+                    @include text-truncate();
                     margin: 4px 4px 3px;
                 }
 
diff --git a/addons/web/static/src/xml/web_calendar.xml b/addons/web/static/src/xml/web_calendar.xml
index 80b60d2902a..4166b5e123e 100644
--- a/addons/web/static/src/xml/web_calendar.xml
+++ b/addons/web/static/src/xml/web_calendar.xml
@@ -13,6 +13,7 @@
 
     <t t-name="calendar-box">
         <div t-att-style="typeof color === 'string' ? ('background-color:' + color) + ';' : ''" t-attf-class="#{record.is_highlighted ? 'o_event_hightlight' : ''} #{typeof color === 'number' ? _.str.sprintf('o_calendar_color_%s', color) : 'o_calendar_color_1'}">
+            <span class="fc-time"/>
             <div class="o_event_title" t-esc="record.display_name"/>
         </div>
     </t>
diff --git a/addons/web/static/tests/views/calendar_tests.js b/addons/web/static/tests/views/calendar_tests.js
index 0a3c31474e1..0bdddb7bfae 100644
--- a/addons/web/static/tests/views/calendar_tests.js
+++ b/addons/web/static/tests/views/calendar_tests.js
@@ -1732,6 +1732,108 @@ QUnit.module('Views', {
         assert.strictEqual($('#ui-datepicker-div:empty').length, 0, "should have a clean body");
     });
 
+    QUnit.test('show start time of single day event for month mode', async function (assert) {
+        assert.expect(4);
+
+        var calendar = await createCalendarView({
+            View: CalendarView,
+            model: 'event',
+            data: this.data,
+            arch:
+            '<calendar class="o_calendar_test" ' +
+                'string="Events" ' +
+                'date_start="start" ' +
+                'date_stop="stop" ' +
+                'all_day="allday" ' +
+                'mode="month"/>',
+            archs: archs,
+            viewOptions: {
+                initialDate: initialDate,
+            },
+            session: {
+                getTZOffset: function () {
+                    return -240;
+                },
+            },
+        });
+
+        assert.strictEqual(calendar.$('.fc-event:contains(event 2) .fc-content .fc-time').text(), "06:55",
+            "should have a correct time 06:55 AM in month mode");
+        assert.strictEqual(calendar.$('.fc-event:contains(event 4) .fc-content .fc-time').text(), "",
+            "should not display a time for all day event");
+        assert.strictEqual(calendar.$('.fc-event:contains(event 5) .fc-content .fc-time').text(), "",
+            "should not display a time for multiple days event");
+        // switch to week mode
+        await testUtils.dom.click(calendar.$('.o_calendar_button_week'));
+        assert.strictEqual(calendar.$('.fc-event:contains(event 2) .fc-content .fc-time').text(), "",
+            "should not show time in week mode as week mode already have time on y-axis");
+
+        calendar.destroy();
+    });
+
+    QUnit.test('start time should not shown for date type field', async function (assert) {
+        assert.expect(1);
+
+        this.data.event.fields.start.type = "date";
+
+        var calendar = await createCalendarView({
+            View: CalendarView,
+            model: 'event',
+            data: this.data,
+            arch:
+            '<calendar class="o_calendar_test" ' +
+                'string="Events" ' +
+                'date_start="start" ' +
+                'date_stop="stop" ' +
+                'mode="month"/>',
+            archs: archs,
+            viewOptions: {
+                initialDate: initialDate,
+            },
+            session: {
+                getTZOffset: function () {
+                    return -240;
+                },
+            },
+        });
+
+        assert.strictEqual(calendar.$('.fc-event:contains(event 2) .fc-content .fc-time').text(), "",
+            "should not show time for date type field");
+
+        calendar.destroy();
+    });
+
+    QUnit.test('start time should not shown in month mode if hide_time is true', async function (assert) {
+        assert.expect(1);
+
+        var calendar = await createCalendarView({
+            View: CalendarView,
+            model: 'event',
+            data: this.data,
+            arch:
+            '<calendar class="o_calendar_test" ' +
+                'string="Events" ' +
+                'date_start="start" ' +
+                'date_stop="stop" ' +
+                'hide_time="True" ' +
+                'mode="month"/>',
+            archs: archs,
+            viewOptions: {
+                initialDate: initialDate,
+            },
+            session: {
+                getTZOffset: function () {
+                    return -240;
+                },
+            },
+        });
+
+        assert.strictEqual(calendar.$('.fc-event:contains(event 2) .fc-content .fc-time').text(), "",
+            "should not show time for hide_time attribute");
+
+        calendar.destroy();
+    });
+
     QUnit.test('readonly date_start field', async function (assert) {
         assert.expect(4);
 
@@ -2523,11 +2625,11 @@ QUnit.module('Views', {
             },
         });
 
-        assert.strictEqual(calendar.$('.fc-event:eq(0)').text().trim(), "event 1");
+        assert.strictEqual(calendar.$('.fc-event:eq(0)').text().replace(/\s/g, ''), "08:00event1");
         await testUtils.dom.click(calendar.$('.fc-event:eq(0)'));
         assert.strictEqual(calendar.$('.o_field_widget[name="start"]').text(), "12/09/2016 08:00:00");
 
-        assert.strictEqual(calendar.$('.fc-event:eq(5)').text().trim(), "event 6");
+        assert.strictEqual(calendar.$('.fc-event:eq(5)').text().replace(/\s/g, ''), "16:00event6");
         await testUtils.dom.click(calendar.$('.fc-event:eq(5)'));
         assert.strictEqual(calendar.$('.o_field_widget[name="start"]').text(), "12/16/2016 16:00:00");
 
@@ -2538,11 +2640,11 @@ QUnit.module('Views', {
         );
         await testUtils.nextTick();
 
-        assert.strictEqual(calendar.$('.fc-event:first').text().trim(), "event 6");
+        assert.strictEqual(calendar.$('.fc-event:eq(0)').text().replace(/\s/g, ''), "16:00event6");
         await testUtils.dom.click(calendar.$('.fc-event:eq(0)'));
         assert.strictEqual(calendar.$('.o_field_widget[name="start"]').text(), "11/27/2016 16:00:00");
 
-        assert.strictEqual(calendar.$('.fc-event:eq(1)').text().trim(), "event 1");
+        assert.strictEqual(calendar.$('.fc-event:eq(1)').text().replace(/\s/g, ''), "08:00event1");
         await testUtils.dom.click(calendar.$('.fc-event:eq(1)'));
         assert.strictEqual(calendar.$('.o_field_widget[name="start"]').text(), "12/09/2016 08:00:00");