[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>

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;

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);
+                        }
                     }
                 }
 
@@ -661,6 +665,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.
      *
@@ -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);
 

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;
                 }
 

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>

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");