[FIX] web: Calendar: update breadcrumbs and buttons

In calendar views, the breadcrumbs should display the period
displayed in the view (e.g. in month mode, something like 'April
2017'). Moreover, the 'Day', 'Week' and 'Month' buttons should be
highlighted when the corresponding mode is used.

This rev. ensures that this is the case.

addons/web/static/src/js/views/calendar/calendar_controller.js

@@ -28,6 +28,7 @@ var CalendarController = AbstractController.extend({
         changeDate: '_onChangeDate',
         changeFilter: '_onChangeFilter',
         toggleFullWidth: '_onToggleFullWidth',
+        viewUpdated: '_onViewUpdated',
     }),
     /**
      * @override
@@ -39,6 +40,7 @@ var CalendarController = AbstractController.extend({
     init: function (parent, model, renderer, params) {
         this._super.apply(this, arguments);
         this.current_start = null;
+        this.displayName = params.displayName;
         this.quickAddPop = params.quickAddPop;
         this.disableQuickCreate = params.disableQuickCreate;
         this.eventOpenPopup = params.eventOpenPopup;
@@ -317,6 +319,21 @@ var CalendarController = AbstractController.extend({
     _onUpdateRecord: function (event) {
         this._updateRecord(event.data);
     },
+    /**
+     * The internal state of the calendar (mode, period displayed) has changed,
+     * so update the control panel buttons and breadcrumbs accordingly.
+     *
+     * @param {OdooEvent} event
+     */
+    _onViewUpdated: function (event) {
+        this.mode = event.data.mode;
+        if (this.$buttons) {
+            this.$buttons.find('.active').removeClass('active');
+            this.$buttons.find('.o_calendar_button_' + this.mode).addClass('active');
+        }
+        var subtitle = (this.mode === 'week' ? _t('Week ') : '') + event.data.title;
+        this.set({title: this.displayName + ' (' + subtitle + ')'});
+    },
 });
 
 return CalendarController;

addons/web/static/src/js/views/calendar/calendar_renderer.js

@@ -350,9 +350,19 @@ return AbstractRenderer.extend({
                 element.find('.fc-content .fc-time').text(display_hour);
             },
             // Dirty hack to ensure a correct first render
-            eventAfterAllRender: function (view) {
+            eventAfterAllRender: function () {
                 window.dispatchEvent(new Event('resize'));
             },
+            viewRender: function (view) {
+                // compute mode from view.name which is either 'month', 'agendaWeek' or 'agendaDay'
+                var mode = view.name === 'month' ? 'month' : (view.name === 'agendaWeek' ? 'week' : 'day');
+                // compute title: in week mode, display the week number
+                var title = mode === 'week' ? view.intervalStart.week() : view.title;
+                self.trigger_up('viewUpdated', {
+                    mode: mode,
+                    title: title,
+                });
+            },
             height: 'parent',
             unselectAuto: false,
         });

addons/web/static/src/js/views/calendar/calendar_view.js

@@ -107,7 +107,7 @@ var CalendarView = AbstractView.extend({
 
         //if quick_add = False, we don't allow quick_add
         //if quick_add = not specified in view, we use the default widgets.QuickCreate
-        //if quick_add = is NOT False and IS specified in view, we this one for widgets.QuickCreate'   
+        //if quick_add = is NOT False and IS specified in view, we this one for widgets.QuickCreate'
         this.controllerParams.quickAddPop = (!('quick_add' in attrs) || utils.toBoolElse(attrs.quick_add+'', true));
         this.controllerParams.disableQuickCreate =  params.disable_quick_create || !this.controllerParams.quickAddPop;
         // If this field is set ot true, we don't open the event in form view, but in a popup with the view_id passed by this parameter
@@ -116,6 +116,7 @@ var CalendarView = AbstractView.extend({
         this.controllerParams.eventOpenPopup = utils.toBoolElse(attrs.event_open_popup || '', false);
         this.controllerParams.mapping = mapping;
         this.controllerParams.context = params.context || {};
+        this.controllerParams.displayName = params.action && params.action.name;
 
         this.rendererParams.displayFields = displayFields;
         this.rendererParams.eventTemplate = _.findWhere(arch.children, {'tag': 'templates'});