diff --git a/addons/web_calendar/static/src/css/web_calendar.css b/addons/web_calendar/static/src/css/web_calendar.css
index 313db123bb5..18eec963866 100644
--- a/addons/web_calendar/static/src/css/web_calendar.css
+++ b/addons/web_calendar/static/src/css/web_calendar.css
@@ -1,5 +1,20 @@
-#openerp_scheduler {
+.oe_calendar_table {
+    border-top: 3px solid #eee;
+}
+.oe_calendar {
     background-color:#eee;
+    height: 600px;
+    border-right: 1px solid #eee;
+}
+.oe_calendar_sidebar {
+    width: 200px;
+}
+.oe_calendar_mini {
+    background-color: #eee;
+    padding: 5px;
+}
+.oe_calendar_filter {
+    padding: 0 10px;
 }
 .openerp .dhx_mini_calendar {
     -moz-box-shadow: none;
diff --git a/addons/web_calendar/static/src/js/calendar.js b/addons/web_calendar/static/src/js/calendar.js
index 959768d895e..4d738e55514 100644
--- a/addons/web_calendar/static/src/js/calendar.js
+++ b/addons/web_calendar/static/src/js/calendar.js
@@ -8,6 +8,7 @@ var _t = instance.web._t,
 var QWeb = instance.web.qweb;
 instance.web.views.add('calendar', 'instance.web_calendar.CalendarView');
 instance.web_calendar.CalendarView = instance.web.View.extend({
+    template: "CalendarView",
     display_name: _lt('Calendar'),
 // Dhtmlx scheduler ?
     init: function(parent, dataset, view_id, options) {
@@ -98,13 +99,12 @@ instance.web_calendar.CalendarView = instance.web.View.extend({
         for (var fld = 0; fld < this.fields_view.arch.children.length; fld++) {
             this.info_fields.push(this.fields_view.arch.children[fld].attrs.name);
         }
-        this.$element.html(QWeb.render("CalendarView", {"fields_view": this.fields_view}));
 
         this.init_scheduler();
 
-        if (! this.sidebar && this.options.$sidebar) {
+        if (!this.sidebar && this.options.$sidebar) {
             this.sidebar = new instance.web_calendar.Sidebar(this);
-            this.has_been_loaded.pipe(this.sidebar.appendTo(this.options.$sidebar));
+            this.has_been_loaded.pipe(this.sidebar.appendTo(this.$element.find('.oe_calendar_sidebar_container')));
         }
 
         return this.has_been_loaded.resolve();
@@ -127,7 +127,7 @@ instance.web_calendar.CalendarView = instance.web.View.extend({
         scheduler.config.mark_now = true;
         scheduler.config.day_date = '%l %j';
 
-        scheduler.init('openerp_scheduler', null, this.mode || 'month');
+        scheduler.init(this.$element.find('.oe_calendar')[0], null, this.mode || 'month');
 
         // Remove hard coded style attributes from dhtmlx scheduler
         this.$element.find(".dhx_cal_navline div").removeAttr('style');
@@ -143,7 +143,7 @@ instance.web_calendar.CalendarView = instance.web.View.extend({
         this.refresh_scheduler();
     },
     on_view_changed: function(mode, date) {
-        this.$element.removeClass('oe_cal_day oe_cal_week oe_cal_month').addClass('oe_cal_' + mode);
+        this.$element.find('.oe_calendar').removeClass('oe_cal_day oe_cal_week oe_cal_month').addClass('oe_cal_' + mode);
         if (!date.between(this.range_start, this.range_stop)) {
             this.update_range_dates(date);
             this.do_ranged_search();
@@ -392,18 +392,9 @@ instance.web_calendar.CalendarView = instance.web.View.extend({
         var self = this;
         $.when(this.has_been_loaded).then(function() {
             self.$element.show();
-            if (self.sidebar) {
-                self.sidebar.$element.show();
-            }
             self.do_push_state({});
         });
     },
-    do_hide: function() {
-        this._super();
-        if (this.sidebar) {
-            this.sidebar.$element.hide();
-        }
-    },
     get_selected_ids: function() {
         // no way to select a record anyway
         return [];
diff --git a/addons/web_calendar/static/src/xml/web_calendar.xml b/addons/web_calendar/static/src/xml/web_calendar.xml
index 422c37dcf0a..ee9175f06ed 100644
--- a/addons/web_calendar/static/src/xml/web_calendar.xml
+++ b/addons/web_calendar/static/src/xml/web_calendar.xml
@@ -1,27 +1,32 @@
 <template>
 <t t-name="CalendarView">
-    <div class="oe_calendar">
-    <div id="openerp_scheduler" class="dhx_cal_container" style="height: 600px;">
-        <div class="dhx_cal_navline">
-            <div class="dhx_cal_prev_button">&amp;nbsp;</div>
-            <div class="dhx_cal_next_button">&amp;nbsp;</div>
-            <div class="dhx_cal_today_button" t-opentag="true"></div>
-            <div class="dhx_cal_date" t-opentag="true"></div>
-            <div class="dhx_cal_tab" name="day_tab" style="right:204px;" t-opentag="true"></div>
-            <div class="dhx_cal_tab" name="week_tab" style="right:140px;" t-opentag="true"></div>
-            <div class="dhx_cal_tab" name="month_tab" style="right:76px;" t-opentag="true"></div>
-        </div>
-        <div class="dhx_cal_header">
-        </div>
-        <div class="dhx_cal_data">
-        </div>
-    </div>
-    </div>
+    <table cellspacing="0" cellpadding="0" border="0" width="100%" class="oe_calendar_table">
+        <tr>
+            <td width="100%">
+                <div class="oe_calendar dhx_cal_container">
+                    <div class="dhx_cal_navline">
+                        <div class="dhx_cal_prev_button">&amp;nbsp;</div>
+                        <div class="dhx_cal_next_button">&amp;nbsp;</div>
+                        <div class="dhx_cal_today_button" t-opentag="true"></div>
+                        <div class="dhx_cal_date" t-opentag="true"></div>
+                        <div class="dhx_cal_tab" name="day_tab" style="right:204px;" t-opentag="true"></div>
+                        <div class="dhx_cal_tab" name="week_tab" style="right:140px;" t-opentag="true"></div>
+                        <div class="dhx_cal_tab" name="month_tab" style="right:76px;" t-opentag="true"></div>
+                    </div>
+                    <div class="dhx_cal_header">
+                    </div>
+                    <div class="dhx_cal_data">
+                    </div>
+                </div>
+            </td>
+            <td class="oe_calendar_sidebar_container"/>
+        </tr>
+    </table>
 </t>
 <t t-name="CalendarView.sidebar">
-    <div class="oe_calendar_sidebar" style="width: 500px">
-        <div class="oe_calendar_mini oe_left" style="width: 240px"/>
-        <div class="oe_calendar_filter oe_right" style="width: 240px">
+    <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>