[IMP] web, web_calendar: New calendar

7 files changed, 111 insertions, 532 deletions

diff --git a/addons/web/static/src/js/control_panel.js b/addons/web/static/src/js/control_panel.js
index 5e607d86a5c..64b493b5270 100644
--- a/addons/web/static/src/js/control_panel.js
+++ b/addons/web/static/src/js/control_panel.js
@@ -159,7 +159,7 @@ var ControlPanel = Widget.extend({
 
         function make_breadcrumb (bc, is_last) {
             var $bc = $('<li>')
-                    .append(is_last ? bc.title : $('<a>').text(bc.title))
+                    .append(is_last ? bc.title : $('<a>').html(bc.title))
                     .toggleClass('active', is_last);
             if (!is_last) {
                 $bc.click(function () {
diff --git a/addons/web/static/src/less/enterprise_compatibility.less b/addons/web/static/src/less/enterprise_compatibility.less
index 1cfd5120c34..8770398ef17 100644
--- a/addons/web/static/src/less/enterprise_compatibility.less
+++ b/addons/web/static/src/less/enterprise_compatibility.less
@@ -18,7 +18,7 @@
 @odoo-main-color-muted: #a8a8a8;
 @odoo-main-text-color: #666666;
 @odoo-webclient-background-color: @odoo-brand-secondary;
-@odoo-view-background-color: red;
+@odoo-view-background-color: white;
 @odoo-shadow-color: #303030;
 @brand-primary: @odoo-brand-primary;
 
diff --git a/addons/web_calendar/static/src/css/web_fullcalendar.sass b/addons/web_calendar/static/src/css/web_fullcalendar.sass
deleted file mode 100644
index 7c70c036c93..00000000000
--- a/addons/web_calendar/static/src/css/web_fullcalendar.sass
+++ /dev/null
@@ -1,423 +0,0 @@
-@charset "utf-8"
-
-
-$color1: #ac725e
-$color2: #d06b64
-$color3: #f83a22
-$color4: #fa573c
-$color5: #ff7537
-$color6: #ffad46
-$color7: #42d692
-$color8: #16a765
-$color9: #7bd148
-$color10: #b3dc6c
-$color11: #fbe983
-$color12: #fad165
-$color13: #92e1c0
-$color14: #9fe1e7
-$color15: #9fc6e7
-$color16: #4986e7
-$color17: #9a9cff
-$color18: #b99aff
-$color19: #c2c2c2
-$color20: #cabdbf
-$color21: #cca6ac
-$color22: #f691b2
-$color23: #cd74e6
-$color24: #a47ae2
-$ecolor1: #a4bdfc
-$ecolor2: #7ae7bf
-$ecolor3: #dbadff
-$ecolor4: #ff887c
-$ecolor5: #fbd75b
-$ecolor6: #ffb878
-$ecolor7: #46d6db
-$ecolor8: #e1e1e1
-$ecolor9: #5484ed
-$ecolor10:#51b749
-$ecolor11: #dc2127
-$fontcolor: #0d0d0d 
-
-.openerp
-    .oe_calendar_quick_create
-        margin: 12px
-
-    .oe-view-manager-view-calendar
-        position: relative
-        padding-top: 10px
-        padding-left: 5px
-        
-.openerp
-    .oe_searchview.oe_searchview_open_drawer
-        .oe_searchview_drawer
-            z-index: 10
-
-.openerp 
-    td.oe_calendar_sidebar_container
-        padding: 10px
-
-.openerp
-    .o-dashboard
-        td.oe_calendar_sidebar_container
-            display: none
-
-img.attendee_head
-    height: 18px
-    width: 18px
-            
-.openerp .oe_calendar_table
-    .attendee_head
-        float: right
-        margin-left: 1px
-        size: 18px !important
-
-    .cal_avatar
-        height: 24px
-        width: 24px
-        
-    .cal_opacity 
-        opacity: 0.6
-                
-    .event_color_1
-        background-color: $ecolor1
-        color: $fontcolor
-            
-    .event_color_2
-        background-color: $ecolor2
-        color: $fontcolor
-            
-    .event_color_3
-        background-color: $ecolor3
-        color: $fontcolor
-            
-    .event_color_4
-        background-color: $ecolor4
-        color: $fontcolor
-        
-    .event_color_5
-        background-color: $ecolor5
-        color: $fontcolor
-        
-    .event_color_6
-        background-color: $ecolor6
-        color: $fontcolor
-        
-    .event_color_7
-        background-color: $ecolor7
-        color: $fontcolor
-        
-    .event_color_8
-        background-color: $ecolor8
-        color: $fontcolor
-        
-    .event_color_9
-        background-color: $ecolor9
-        color: $fontcolor
-        
-    .event_color_10
-        background-color: $ecolor10
-        color: $fontcolor
-        
-    .event_color_11
-        background-color: $ecolor11
-        color: $fontcolor    
-        
-    .calendar_color_1
-        border-color: $color1  
-        background-color: $color1
-        color: $fontcolor
-        
-    .calendar_color_2
-        border-color: $color2
-        background-color: $color2
-        color: $fontcolor
-        
-    .calendar_color_3
-        border-color: $color3
-        background-color: $color3
-        color: $fontcolor
-        
-    .calendar_color_4
-        border-color: $color4
-        background-color: $color4
-        color: $fontcolor
-        
-    .calendar_color_5
-        border-color: $color5
-        background-color: $color5
-        color: $fontcolor
-        
-    .calendar_color_6
-        border-color: $color6
-        background-color: $color6
-        color: $fontcolor
-        
-    .calendar_color_7
-        border-color: $color7
-        background-color: $color7
-        color: $fontcolor
-        
-    .calendar_color_8
-        border-color: $color8
-        background-color: $color8
-        color: $fontcolor
-        
-    .calendar_color_9
-        border-color: $color9
-        background-color: $color9
-        color: $fontcolor
-        
-    .calendar_color_10
-        border-color: $color10
-        background-color: $color10
-        color: $fontcolor
-        
-    .calendar_color_11
-        border-color: $color11
-        background-color: $color11
-        color: $fontcolor
-        
-    .calendar_color_12
-        border-color: $color12
-        background-color: $color12
-        color: $fontcolor
-            
-    .calendar_color_13
-        border-color: $color13
-        background-color: $color13
-        color: $fontcolor
-        
-    .calendar_color_14
-        border-color: $color14
-        background-color: $color14
-        color: $fontcolor
-        
-    .calendar_color_15
-        border-color: $color15
-        background-color: $color15
-        color: $fontcolor
-        
-    .calendar_color_16
-        border-color: $color16
-        background-color: $color16
-        color: $fontcolor
-        
-    .calendar_color_17
-        border-color: $color17
-        background-color: $color17
-        color: $fontcolor
-        
-    .calendar_color_18
-        border-color: $color18
-        background-color: $color18
-        color: $fontcolor
-        
-    .calendar_color_19
-        border-color: $color19
-        background-color: $color19
-        color: $fontcolor
-        
-    .calendar_color_20
-        border-color: $color20
-        background-color: $color20
-        color: $fontcolor
-        
-    .calendar_color_21
-        border-color: $color21
-        background-color: $color21
-        color: $fontcolor
-        
-    .calendar_color_22
-        border-color: $color22
-        background-color: $color22
-        color: $fontcolor
-        
-    .calendar_color_23
-        border-color: $color23
-        background-color: $color23
-        color: $fontcolor
-    
-    .calendar_color_24
-        border-color: $color24
-        background-color: $color24
-        color: $fontcolor
-    
-    
-    
-    .underline_ecolor_1
-        border-bottom: 4px solid $ecolor1
-        
-    .underline_ecolor_2
-        border-bottom: 4px solid $ecolor2
-        
-    .underline_ecolor_3
-        border-bottom: 4px solid $ecolor3
-        
-    .underline_ecolor_4
-        border-bottom: 4px solid $ecolor4
-        
-    .underline_ecolor_5
-        border-bottom: 4px solid $ecolor5
-        
-    .underline_ecolor_6
-        border-bottom: 4px solid $ecolor6
-        
-    .underline_ecolor_7
-        border-bottom: 4px solid $ecolor7
-        
-    .underline_ecolor_8
-        border-bottom: 4px solid $ecolor8
-        
-    .underline_ecolor_9
-        border-bottom: 4px solid $ecolor9
-        
-    .underline_ecolor_10
-        border-bottom: 4px solid $ecolor10
-        
-    .underline_ecolor_11
-        border-bottom: 4px solid $ecolor11
-        
-            
-    .underline_color_1
-        border-bottom: 4px solid $color1
-        
-    .underline_color_2
-        border-bottom: 4px solid $color2
-        
-    .underline_color_3
-        border-bottom: 4px solid $color3
-        
-    .underline_color_4
-        border-bottom: 4px solid $color4
-        
-    .underline_color_5
-        border-bottom: 4px solid $color5
-        
-    .underline_color_6
-        border-bottom: 4px solid $color6
-        
-    .underline_color_7
-        border-bottom: 4px solid $color7
-        
-    .underline_color_8
-        border-bottom: 4px solid $color8
-        
-    .underline_color_9
-        border-bottom: 4px solid $color9
-        
-    .underline_color_10
-        border-bottom: 4px solid $color10
-        
-    .underline_color_11
-        border-bottom: 4px solid $color11
-        
-    .underline_color_12
-        border-bottom: 4px solid $color12
-            
-    .underline_color_13
-        border-bottom: 4px solid $color13
-        
-    .underline_color_14
-        border-bottom: 4px solid $color14
-        
-    .underline_color_15
-        border-bottom: 4px solid $color15
-        
-    .underline_color_16
-        border-bottom: 4px solid $color16
-        
-    .underline_color_17
-        border-bottom: 4px solid $color17
-        
-    .underline_color_18
-        border-bottom: 4px solid $color18
-        
-    .underline_color_19
-        border-bottom: 4px solid $color19
-        
-    .underline_color_20
-        border-bottom: 4px solid $color20
-        
-    .underline_color_21
-        border-bottom: 4px solid $color21
-        
-    .underline_color_22
-        border-bottom: 4px solid $color22
-        
-    .underline_color_23
-        border-bottom: 4px solid $color23
-    
-    .underline_color_24
-        border-bottom: 4px solid $color24
-          
-    .color_1
-        color: $color1
-        
-    .color_2
-        color: $color2
-        
-    .color_3
-        color: $color3
-        
-    .color_4
-        color: $color4
-        
-    .color_5
-        color: $color5
-        
-    .color_6
-        color: $color6
-        
-    .color_7
-        color: $color7
-        
-    .color_8
-        color: $color8
-        
-    .color_9
-        color: $color9
-        
-    .color_10
-        color: $color10
-        
-    .color_11
-        color: $color11
-        
-    .color_12
-        color: $color12
-            
-    .color_13
-        color: $color13
-        
-    .color_14
-        color: $color14
-        
-    .color_15
-        color: $color15
-        
-    .color_16
-        color: $color16
-        
-    .color_17
-        color: $color17
-        
-    .color_18
-        color: $color18
-        
-    .color_19
-        color: $color19
-        
-    .color_20
-        color: $color20
-        
-    .color_21
-        color: $color21
-        
-    .color_22
-        color: $color22
-        
-    .color_23
-        color: $color23
-    
-    .color_24
-        color: $color24
diff --git a/addons/web_calendar/static/src/js/web_calendar.js b/addons/web_calendar/static/src/js/web_calendar.js
index 61c878d79ab..088d7cdbedf 100644
--- a/addons/web_calendar/static/src/js/web_calendar.js
+++ b/addons/web_calendar/static/src/js/web_calendar.js
@@ -32,12 +32,6 @@ function get_fc_defaultOptions() {
     return {
         weekNumberTitle: _t("W"),
         allDayText: _t("All day"),
-        buttonText : {
-            today:    _t("Today"),
-            month:    _t("Month"),
-            week:     _t("Week"),
-            day:      _t("Day")
-        },
         monthNames: moment.months(),
         monthNamesShort: moment.monthsShort(),
         dayNames: moment.weekdays(),
@@ -53,7 +47,7 @@ function get_fc_defaultOptions() {
         },
         titleFormat: {
             month: 'MMMM yyyy',
-            week: dateFormat + "{ '&#8212;'"+ dateFormat,
+            week: "W",
             day: dateFormat,
         },
         columnFormat: {
@@ -94,6 +88,8 @@ var CalendarView = View.extend({
         this.range_stop = null;
         this.selected_filters = [];
 
+        this.title = (this.options.action)? this.options.action.name : '';
+
         this.shown = $.Deferred();
     },
 
@@ -117,7 +113,7 @@ var CalendarView = View.extend({
         var attrs = fv.arch.attrs,
             self = this;
         this.fields_view = fv;
-        this.$calendar = this.$el.find(".oe_calendar_widget");
+        this.$calendar = this.$(".o_calendar_widget");
 
         this.info_fields = [];
 
@@ -138,6 +134,10 @@ var CalendarView = View.extend({
         this.how_display_event = '';
         this.attendee_people = attrs.attendee;
 
+        // Check whether the date field is editable (i.e. if the events can be dragged and dropped)
+        var main_date_field = this.date_start || this.date_end || this.date_delay;
+        this.editable = !this.options.read_only_mode && !this.fields_view.fields[main_date_field].readonly;
+
         //if quick_add = False, we don't allow quick_add
         //if quick_add = not specified in view, we use the default quick_create_instance
         //if quick_add = is NOT False and IS specified in view, we this one for quick_create_instance'   
@@ -249,15 +249,28 @@ var CalendarView = View.extend({
     render_buttons: function($node) {
         var self = this;
         this.$buttons = $(QWeb.render("CalendarView.buttons", {'widget': this}));
-        this.$buttons.on('click', 'button.oe_calendar_button_new', function () {
+        this.$buttons.on('click', 'button.o_calendar_button_new', function () {
             self.dataset.index = null;
             self.do_switch_view('form');
         });
+
+        var bindCalendarButton = function(selector, arg1, arg2) {
+            self.$buttons.on('click', selector, _.bind(self.$calendar.fullCalendar, self.$calendar, arg1, arg2));
+        }
+        bindCalendarButton('.o_calendar_button_prev', 'prev');
+        bindCalendarButton('.o_calendar_button_today', 'today');
+        bindCalendarButton('.o_calendar_button_next', 'next');
+        bindCalendarButton('.o_calendar_button_day', 'changeView', 'agendaDay');
+        bindCalendarButton('.o_calendar_button_week', 'changeView', 'agendaWeek');
+        bindCalendarButton('.o_calendar_button_month', 'changeView', 'month');
+
+        this.$buttons.find('.o_calendar_button_' + this.mode).addClass('active');
+        
         $node = $node || this.options.$buttons;
         if ($node) {
             this.$buttons.appendTo($node);
         } else {
-            this.$('.oe_calendar_buttons').replaceWith(this.$buttons);
+            this.$('.o_calendar_buttons').replaceWith(this.$buttons);
         }
     },
     get_fc_init_options: function () {
@@ -265,21 +278,25 @@ var CalendarView = View.extend({
         var self = this;
         return  $.extend({}, get_fc_defaultOptions(), {
             
-            defaultView: (this.mode == "month")?"month":
-                (this.mode == "week"?"agendaWeek":
-                 (this.mode == "day"?"agendaDay":"month")),
-            header: {
-                left: 'prev,next today',
-                center: 'title',
-                right: 'month,agendaWeek,agendaDay'
-            },
+            defaultView: (this.mode == "month")? "month" : ((this.mode == "week")? "agendaWeek" : ((this.mode == "day")? "agendaDay" : "agendaWeek")),
+            header: false,
             selectable: !this.options.read_only_mode && this.create_right,
             selectHelper: true,
-            editable: !this.options.read_only_mode,
+            editable: this.editable,
             droppable: true,
 
             // callbacks
 
+            viewRender: function(view) {
+                var mode = (view.name == "month")? "month" : ((view.name == "agendaWeek") ? "week" : "day");
+                if(self.$buttons !== undefined) {
+                    self.$buttons.find('.active').removeClass('active');
+                    self.$buttons.find('.o_calendar_button_' + mode).addClass('active');
+                }
+
+                var title = self.title + ' (' + ((mode === "week")? _t("Week ") : "") + view.title + ")"; 
+                self.set({'title': title});
+            },
             eventDrop: function (event, _day_delta, _minute_delta, _all_day, _revertFunc) {
                 var data = self.get_event_data(event);
                 self.proxy('update_record')(event._id, data); // we don't revert the event, but update it.
@@ -307,18 +324,15 @@ var CalendarView = View.extend({
                     allDay: all_day,
                 });
                 self.open_quick_create(data_template);
-
             },
 
             unselectAuto: false,
-
-
         });
     },
 
     calendarMiniChanged: function (context) {
         return function(datum,obj) {
-            var curView = context.$calendar.fullCalendar( 'getView');
+            var curView = context.$calendar.fullCalendar('getView');
             var curDate = new Date(obj.currentYear , obj.currentMonth, obj.currentDay);
 
             if (curView.name == "agendaWeek") {
@@ -327,7 +341,7 @@ var CalendarView = View.extend({
                 }
             }
             else if (curView.name != "agendaDay" || (curView.name == "agendaDay" && moment(curDate).diff(moment(curView.start))===0)) {
-                    context.$calendar.fullCalendar('changeView','agendaWeek');
+                context.$calendar.fullCalendar('changeView','agendaWeek');
             }
             context.$calendar.fullCalendar('gotoDate', obj.currentYear , obj.currentMonth, obj.currentDay);
         };
@@ -339,9 +353,9 @@ var CalendarView = View.extend({
         if (!this.sidebar) {
             var translate = get_fc_defaultOptions();
             this.sidebar = new widgets.Sidebar(this);
-            this.sidebar.appendTo(this.$el.find('.oe_calendar_sidebar_container'));
+            this.sidebar.appendTo(this.$('.o_calendar_sidebar_container'));
 
-            this.$small_calendar = self.$el.find(".oe_calendar_mini");
+            this.$small_calendar = self.$(".o_calendar_mini");
             this.$small_calendar.datepicker({ 
                 onSelect: self.calendarMiniChanged(self),
                 dayNamesMin : translate.dayNamesShort,
@@ -561,7 +575,7 @@ var CalendarView = View.extend({
                         attendee_showed += 1;
                         if (attendee_showed<= MAX_ATTENDEES) {
                             if (self.avatar_model !== null) {
-                                   the_title_avatar += '<img title="' + self.all_attendees[the_attendee_people] + '" class="attendee_head"  \
+                                   the_title_avatar += '<img title="' + self.all_attendees[the_attendee_people] + '" class="o_attendee_head"  \
                                                         src="/web/binary/image?model=' + self.avatar_model + '&field=image_small&id=' + the_attendee_people + '"></img>';
                             }
                             else {
@@ -569,7 +583,7 @@ var CalendarView = View.extend({
                                         var tempColor = (self.all_filters[the_attendee_people] !== undefined) 
                                                     ? self.all_filters[the_attendee_people].color
                                                     : (self.all_filters[-1] ? self.all_filters[-1].color : 1);
-                                    the_title_avatar += '<i class="fa fa-user attendee_head color_'+tempColor+'" title="' + self.all_attendees[the_attendee_people] + '" ></i>';
+                                    the_title_avatar += '<i class="fa fa-user o_attendee_head o_underline_color_'+tempColor+'" title="' + self.all_attendees[the_attendee_people] + '" ></i>';
                                 }//else don't add myself
                             }
                         }
@@ -579,7 +593,7 @@ var CalendarView = View.extend({
                     }
                 );
                 if (attendee_other.length>2) {
-                    the_title_avatar += '<span class="attendee_head" title="' + attendee_other.slice(0, -2) + '">+</span>';
+                    the_title_avatar += '<span class="o_attendee_head" title="' + attendee_other.slice(0, -2) + '">+</span>';
                 }
                 the_title = the_title_avatar + the_title;
             }
@@ -603,11 +617,11 @@ var CalendarView = View.extend({
                 if (typeof color_key === "object") {
                     color_key = color_key[0];
                 }
-                r.className = 'cal_opacity calendar_color_'+ this.get_color(color_key);
+                r.className = 'o_calendar_color_'+ this.get_color(color_key);
             }
         }
         else  { // if form all, get color -1
-              r.className = 'cal_opacity calendar_color_'+ self.all_filters[-1].color;
+              r.className = 'o_calendar_color_'+ self.all_filters[-1].color;
         }
         return r;
     },
@@ -665,7 +679,6 @@ var CalendarView = View.extend({
         }
 
         if (this.date_delay) {
-            
             data[this.date_delay] = diff_seconds / 3600;
         }
         return data;
diff --git a/addons/web_calendar/static/src/js/widgets.js b/addons/web_calendar/static/src/js/widgets.js
index 37b1a479541..24189868bb7 100644
--- a/addons/web_calendar/static/src/js/widgets.js
+++ b/addons/web_calendar/static/src/js/widgets.js
@@ -37,7 +37,7 @@ var QuickCreate = Widget.extend({
         }
         var title = (_.isUndefined(parent.field_widget)) ?
                 (parent.string || parent.name) :
-                parent.field_widget.string || parent.field_widget.name || '';
+                (parent.field_widget.string || parent.field_widget.name || '');
         return _t("Create: ") + title;
     },
     start: function () {
@@ -64,18 +64,18 @@ var QuickCreate = Widget.extend({
                     self.slow_add();
                 }}
             ] : []
-        }, QWeb.render('CalendarView.quick_create', {widged: this}))
+        }, QWeb.render('CalendarView.quick_create', {widget: this}))
         .on('closed', self, function() {
             self.trigger('close');
         })
         .open();
         this.$input = this.$dialog.$('input').keyup(function enterHandler (e) {
-            if(e.keyCode == 13){
+            if(e.keyCode == $.ui.keyCode.ENTER){
                 self.$input.off('keyup', enterHandler);
                 if (!self.quick_add()){
                     self.$input.on('keyup', enterHandler);
                 }
-            } else if (e.keyCode == 27 && self._buttons) {
+            } else if (e.keyCode == $.ui.keyCode.ESCAPE && self._buttons) {
                 self.trigger('close');
             }
         });
@@ -88,15 +88,12 @@ var QuickCreate = Widget.extend({
      * Gathers data from the quick create dialog a launch quick_create(data) method
      */
     quick_add: function() {
-        var val = this.$input.val();
-        if (/^\s*$/.test(val)) {
-            return false;
-        }
-        return this.quick_create({'name': val}).always(function() { return true; });
+        var val = this.$input.val().trim();
+        return (val)? this.quick_create({'name': val}) : false;
     },
     
     slow_add: function() {
-        var val = this.$input.val();
+        var val = this.$input.val().trim();
         this.slow_create({'name': val});
     },
 
@@ -109,7 +106,7 @@ var QuickCreate = Widget.extend({
             .then(function(id) {
                 self.trigger('added', id);
                 self.$input.val("");
-            }).fail(function(r, event) {
+            }, function(r, event) {
                 event.preventDefault();
                 // This will occurs if there are some more fields required
                 self.slow_create(data);
@@ -199,7 +196,7 @@ var Sidebar = Widget.extend({
     start: function() {
         this._super();
         this.filter = new SidebarFilter(this, this.getParent());
-        this.filter.appendTo(this.$el.find('.oe_calendar_filter'));
+        this.filter.appendTo(this.$('.o_calendar_filter'));
     }
 });
 var SidebarFilter = Widget.extend({
@@ -216,7 +213,7 @@ var SidebarFilter = Widget.extend({
         var self = this;
         _.forEach(self.view.all_filters, function(o) {
             if (_.contains(self.view.now_filter_ids, o.value)) {
-                self.$('div.oe_calendar_responsible input[value=' + o.value + ']').prop('checked',o.is_checked);
+                self.$('div.o_calendar_responsible input[value=' + o.value + ']').prop('checked',o.is_checked);
             }
         });
     },
diff --git a/addons/web_calendar/static/src/xml/web_fullcalendar.xml b/addons/web_calendar/static/src/xml/web_fullcalendar.xml
index cc4734dc4aa..efb8bac16b3 100644
--- a/addons/web_calendar/static/src/xml/web_fullcalendar.xml
+++ b/addons/web_calendar/static/src/xml/web_fullcalendar.xml
@@ -1,68 +1,60 @@
 <template>
-  <t t-name="CalendarView"> 
-    <table cellspacing="0" cellpadding="0" border="0" width="100%" class="oe_calendar_table">
-        <tr>
-            <td width="100%">
-                <div class="oe_calendar_view">        
-                  <div class="oe_calendar_widget" />
-                  <div class="oe_calendar_buttons"/>
-                  <div class="oe_calendar_qc_placeholder"/>                    
-                </div>                
-            </td>
-            <td class='oe_calendar_sidebar_container'>
-                 
-            </td>            
-        </tr>
-    </table>
-  </t>
-  
-   <t t-name="CalendarView.sidebar">
-      <div class="oe_calendar_sidebar">
-           <div class="oe_calendar_mini" />
-           <div class="oe_calendar_filter">
-               <h3><t t-esc="widget.getParent().color_string"/></h3>
-           </div>           
-       </div>
-   </t>
-   <t t-name="CalendarView.sidebar.responsible">
-       <div class="oe_calendar_all_responsibles"> 
-            <div t-foreach="filters" class="oe_calendar_responsible" > 
-                <t t-if="filters_value.value"> <!-- don't display if no value given (or undefined) -->
-                   <input type="checkbox" name="selection" t-att-value="filters_value.value" checked="checked" />
-                   <t t-if="filters_value.value == -1">
-                       <span><i t-attf-class="fa fa-users fa-fw cal_avatar" ></i></span>
-                   </t>
-                   <t t-if="(filters_value.value != -1) &amp;&amp; filters_value.avatar_model ">
-                       <img t-att-src="'/web/binary/image?model=' + filters_value.avatar_model + '&amp;field=image_small&amp;id=' + filters_value.value"  class="cal_avatar"/>     
-                   </t>
-                   <span t-attf-class="color_filter cal_opacity underline_color_#{filters_value.color}" ><t t-esc="filters_value.label" /></span>
-               </t>
-           </div>
-       </div>
-   </t>
-
-  <t t-name="CalendarView.buttons">
-    <t t-if="widget.options.action_buttons !== false">
-      <t t-if="widget.is_action_enabled('create') &amp;&amp;
-               ((widget.field_widget &amp;&amp;
-                   (widget.field_widget.open_popup_add)) ||
-                (!widget.field_widget))">
-        <div class="oe_calendar_buttons">
-          <button type="button" class="oe_calendar_button_new oe_highlight">
-            <t t-esc="widget.options.create_text || _t('Create')"/>
-          </button>
+    <t t-name="CalendarView">
+        <div class="row o_calendar_container">
+            <div class="o_calendar_view col-sm-9">
+                <div class="o_calendar_widget" />
+                <div class="o_calendar_buttons"/>                   
+            </div>
+            <div class="o_calendar_sidebar_container col-sm-3 hidden-xs"/>
         </div>
-      </t>
     </t>
-  </t>
+    
+     <t t-name="CalendarView.sidebar">
+        <div class="o_calendar_sidebar">
+            <div class="o_calendar_mini"/>
+            <div class="o_calendar_filter">
+                <h3><t t-esc="widget.getParent().color_string"/></h3>
+            </div>           
+        </div>
+     </t>
+
+     <t t-name="CalendarView.sidebar.responsible">
+        <div class="o_calendar_all_responsibles"> 
+            <div t-foreach="filters" class="o_calendar_responsible" > 
+                <t t-if="filters_value.value"><!-- don't display if no value given (or undefined) -->
+                    <input type="checkbox" name="selection" t-att-value="filters_value.value" checked="checked" />
+                    <t t-if="filters_value.value == -1">
+                        <span><i t-attf-class="fa fa-users fa-fw o_cal_avatar"></i></span>
+                    </t>
+                    <t t-if="(filters_value.value != -1) &amp;&amp; filters_value.avatar_model ">
+                        <img t-att-src="'/web/binary/image?model=' + filters_value.avatar_model + '&amp;field=image_small&amp;id=' + filters_value.value"  class="o_cal_avatar"/>     
+                    </t>
+                    <span t-attf-class="color_filter o_underline_color_#{filters_value.color}" ><t t-esc="filters_value.label" /></span>
+                </t>
+            </div>
+        </div>
+     </t>
 
-  <div t-name="CalendarView.quick_create" class="oe_calendar_quick_create">
-    <div class="form-group">
-        <label for='name' class='control-label'>Event summary:</label>
-        <input name='name' class="form-control"/>
-    </div>     
-  </div>
+    <t t-name="CalendarView.buttons">
+        <div class="o_calendar_buttons">
+            <button t-if="widget.options.action_buttons !== false &amp;&amp; widget.is_action_enabled('create') &amp;&amp; ((widget.field_widget &amp;&amp; (widget.field_widget.open_popup_add)) || (!widget.field_widget))" type="button" class="o_calendar_button_new o_highlight"><t t-esc="widget.options.create_text || _t('Create')"/></button>
 
+            <button class="o_calendar_button_prev btn btn-sm btn-primary"><span class="fa fa-arrow-left"/></button>
+            <button class="o_calendar_button_today btn btn-sm btn-primary">Today</button>
+            <button class="o_calendar_button_next btn btn-sm btn-primary"><span class="fa fa-arrow-right"/></button>
+
+            <div class="btn-group btn-group-sm">
+                <button type="button" class="o_calendar_button_day btn btn-sm btn-default">Day</button>
+                <button type="button" class="o_calendar_button_week btn btn-sm btn-default">Week</button>
+                <button type="button" class="o_calendar_button_month btn btn-sm btn-default">Month</button>
+            </div>
+        </div>
+    </t>
 
-  
+    <div t-name="CalendarView.quick_create" class="o_calendar_quick_create">
+        <div class="form-group">
+            <label for='name' class='control-label'>Event summary:</label>
+            <input name='name' class="form-control"/>
+        </div>     
+    </div>
 </template>
diff --git a/addons/web_calendar/views/web_calendar.xml b/addons/web_calendar/views/web_calendar.xml
index 7f7f17baccb..60949374acf 100644
--- a/addons/web_calendar/views/web_calendar.xml
+++ b/addons/web_calendar/views/web_calendar.xml
@@ -3,7 +3,7 @@
     <data>
         <template id="assets_backend" name="web_calendar assets" inherit_id="web.assets_backend">
             <xpath expr="." position="inside">
-                <link rel="stylesheet" href="/web_calendar/static/src/css/web_fullcalendar.css"/>
+                <link rel="stylesheet" href="/web_calendar/static/src/less/web_calendar.less"/>
                 <link rel="stylesheet" href="/web_calendar/static/lib/fullcalendar/css/fullcalendar.css"/>
 
                 <script type="text/javascript" src="/web_calendar/static/lib/fullcalendar/js/fullcalendar.js"></script>