Bug 1554641 - [de-xbl] convert the dragndropContainer binding. r=mkmelin,philipp DONTBUILD
authorAlessandro Castellani <alessandro@thunderbird.net>
Thu, 04 Jul 2019 11:12:25 +0200
changeset 36031 5ce69de5c6c60edcb37c2b3e6242eb79cd8a6600
parent 36030 2a299189d89023de2a2a37a97815c9ee3f01867a
child 36032 5bec03032031f3a35f6e5fd63a4eded96ea49a56
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersmkmelin, philipp
bugs1554641
Bug 1554641 - [de-xbl] convert the dragndropContainer binding. r=mkmelin,philipp DONTBUILD
calendar/base/content/calendar-base-view.js
calendar/base/content/calendar-month-base-view.js
calendar/base/content/calendar-month-view.js
calendar/base/content/calendar-month-view.xml
calendar/base/content/calendar-multiday-view.js
calendar/base/content/calendar-multiday-view.xml
calendar/base/content/calendar-view-bindings.css
calendar/base/content/widgets/calendar-dnd-widgets.js
calendar/base/content/widgets/calendar-widget-bindings.css
calendar/base/content/widgets/calendar-widgets.xml
calendar/base/jar.mn
calendar/lightning/content/messenger-overlay-sidebar.xul
calendar/test/mozmill/cal-recurrence/testAnnualRecurrence.js
calendar/test/mozmill/cal-recurrence/testBiweeklyRecurrence.js
calendar/test/mozmill/cal-recurrence/testDailyRecurrence.js
calendar/test/mozmill/cal-recurrence/testLastDayOfMonthRecurrence.js
calendar/test/mozmill/cal-recurrence/testWeeklyNRecurrence.js
calendar/test/mozmill/cal-recurrence/testWeeklyUntilRecurrence.js
calendar/test/mozmill/cal-recurrence/testWeeklyWithExceptionRecurrence.js
calendar/test/mozmill/eventDialog/testEventDialog.js
calendar/test/mozmill/recurrenceRotated/testAnnualRecurrence.js
calendar/test/mozmill/recurrenceRotated/testBiweeklyRecurrence.js
calendar/test/mozmill/recurrenceRotated/testDailyRecurrence.js
calendar/test/mozmill/recurrenceRotated/testLastDayOfMonthRecurrence.js
calendar/test/mozmill/recurrenceRotated/testWeeklyNRecurrence.js
calendar/test/mozmill/recurrenceRotated/testWeeklyUntilRecurrence.js
calendar/test/mozmill/recurrenceRotated/testWeeklyWithExceptionRecurrence.js
calendar/test/mozmill/shared-modules/test-calendar-utils.js
calendar/test/mozmill/views/testMonthView.js
calendar/test/mozmill/views/testMultiweekView.js
--- a/calendar/base/content/calendar-base-view.js
+++ b/calendar/base/content/calendar-base-view.js
@@ -903,20 +903,19 @@
             this.showDate(date);
         }
 
         getRangeDescription() {
             return cal.getDateFormatter().formatInterval(this.rangeStartDate, this.rangeEndDate);
         }
 
         removeDropShadows() {
-            const dropbox = document.getAnonymousElementByAttribute(this, "dropbox", "true");
-            if (dropbox) {
-                dropbox.setAttribute("dropbox", "false");
-            }
+            this.querySelectorAll("[dropbox='true']").forEach(dbox => {
+                dbox.setAttribute("dropbox", "false");
+            });
         }
 
         setDateRange(startDate, endDate) {
             cal.navigationBar.setDateRange(startDate, endDate);
         }
 
         getSelectedItems(count) {
             count.value = this.mSelectedItems.length;
--- a/calendar/base/content/calendar-month-base-view.js
+++ b/calendar/base/content/calendar-month-base-view.js
@@ -486,17 +486,17 @@ var { cal } = ChromeUtils.import("resour
                             break;
                         case 1:
                             daybox.setAttribute("relation", "future");
                             break;
                     }
 
                     // Set up label with the week number in the first day of the row.
                     if (this.mShowWeekNumber) {
-                        const weekLabel = document.getAnonymousElementByAttribute(daybox, "anonid", "week-label");
+                        const weekLabel = daybox.querySelector("[data-label='week']");
                         if (weekLabelColumnPos < 0) {
                             const isDayOff = this.mDaysOffArray.includes((j + this.mWeekStartOffset) % 7);
                             if (this.mDisplayDaysOff || !isDayOff) {
                                 weekLabelColumnPos = j;
                             }
                         }
                         // Build and set the label.
                         if (j == weekLabelColumnPos) {
@@ -568,18 +568,17 @@ var { cal } = ChromeUtils.import("resour
          * Hide the week numbers.
          */
         hideWeekNumbers() {
             const rows = this.monthgridrows.childNodes;
             for (let i = 0; i < rows.length; i++) {
                 const row = rows[i];
                 for (let j = 0; j < row.childNodes.length; j++) {
                     const daybox = row.childNodes[j];
-                    const weekLabel = document
-                        .getAnonymousElementByAttribute(daybox, "anonid", "week-label");
+                    const weekLabel = daybox.querySelector("[data-label='week']");
                     weekLabel.hidden = true;
                 }
             }
         }
 
         /**
          * Hide the days off.
          */
new file mode 100644
--- /dev/null
+++ b/calendar/base/content/calendar-month-view.js
@@ -0,0 +1,259 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* globals currentView MozElements MozXULElement */
+
+/* import-globals-from calendar-ui-utils.js */
+
+"use strict";
+
+// Wrap in a block to prevent leaking to window scope.
+{
+    const { cal } = ChromeUtils.import("resource://calendar/modules/calUtils.jsm");
+
+    /**
+     * Implements the Drag and Drop class for the Month Day Box view.
+     *
+     * @extends {MozElements.CalendarDnDContainer}
+     */
+    class CalendarMonthDayBox extends MozElements.CalendarDnDContainer {
+        static get inheritedAttributes() {
+            return {
+                ".calendar-week-label": "relation,selected",
+                ".calendar-day-label": "relation,selected,value",
+            };
+        }
+
+        constructor() {
+            super();
+            this.addEventListener("mousedown", this.onMouseDown);
+            this.addEventListener("dblclick", this.onDblClick);
+            this.addEventListener("click", this.onClick);
+            this.addEventListener("wheel", this.onWheel);
+        }
+
+        connectedCallback() {
+            if (this.delayConnectedCallback() || this.hasConnected) {
+                return;
+            }
+            // this.hasConnected is set to true in super.connectedCallback.
+            super.connectedCallback();
+
+            this.mDate = null;
+            this.mItemHash = {};
+            this.mShowMonthLabel = false;
+
+            this.setAttribute("orient", "vertical");
+
+            let monthDayLabels = document.createXULElement("hbox");
+            monthDayLabels.style.overflow = "hidden";
+
+            let weekLabel = document.createXULElement("label");
+            weekLabel.setAttribute("data-label", "week");
+            weekLabel.setAttribute("flex", "1");
+            weekLabel.setAttribute("crop", "end");
+            weekLabel.setAttribute("hidden", "true");
+            weekLabel.setAttribute("mousethrough", "always");
+            weekLabel.classList.add("calendar-month-day-box-week-label",
+                "calendar-month-day-box-date-label",
+                "calendar-week-label");
+
+            let dayLabel = document.createXULElement("label");
+            dayLabel.setAttribute("data-label", "day");
+            dayLabel.setAttribute("flex", "1");
+            dayLabel.setAttribute("mousethrough", "always");
+            dayLabel.classList.add("calendar-month-day-box-date-label",
+                "calendar-day-label");
+
+            monthDayLabels.appendChild(weekLabel);
+            monthDayLabels.appendChild(dayLabel);
+
+            this.dayItems = document.createXULElement("vbox");
+            this.dayItems.setAttribute("flex", "1");
+            this.dayItems.classList.add("calendar-month-day-box-items-box",
+                "calendar-day-items");
+
+            this.appendChild(monthDayLabels);
+            this.appendChild(this.dayItems);
+
+            this.initializeAttributeInheritance();
+        }
+
+        get date() {
+            return this.mDate;
+        }
+
+        set date(val) {
+            this.setDate(val);
+            return val;
+        }
+
+        get selected() {
+            let sel = this.getAttribute("selected");
+            if (sel && sel == "true") {
+                return true;
+            }
+
+            return false;
+        }
+
+        set selected(val) {
+            if (val) {
+                this.setAttribute("selected", "true");
+            } else {
+                this.removeAttribute("selected");
+            }
+            return val;
+        }
+
+        get showMonthLabel() {
+            return this.mShowMonthLabel;
+        }
+
+        set showMonthLabel(val) {
+            if (this.mShowMonthLabel == val) {
+                return val;
+            }
+            this.mShowMonthLabel = val;
+
+            if (!this.mDate) {
+                return val;
+            }
+            if (val) {
+                this.setAttribute("value", cal.getDateFormatter()
+                    .formatDateWithoutYear(this.mDate));
+            } else {
+                this.setAttribute("value", this.mDate.day);
+            }
+            return val;
+        }
+
+        setDate(aDate) {
+            if (!aDate) {
+                throw Cr.NS_ERROR_NULL_POINTER;
+            }
+
+            // Remove all the old events.
+            this.mItemHash = {};
+            removeChildren(this.dayItems);
+
+            if (this.mDate && this.mDate.compare(aDate) == 0) {
+                return;
+            }
+
+            this.mDate = aDate;
+
+            // Set up DOM attributes for custom CSS coloring.
+            let weekTitle = cal.getWeekInfoService().getWeekTitle(aDate);
+            this.setAttribute("year", aDate.year);
+            this.setAttribute("month", aDate.month + 1);
+            this.setAttribute("week", weekTitle);
+            this.setAttribute("day", aDate.day);
+
+            if (this.mShowMonthLabel) {
+                let monthName = cal.l10n.getDateFmtString(`month.${aDate.month + 1}.Mmm`);
+                this.setAttribute("value", aDate.day + " " + monthName);
+            } else {
+                this.setAttribute("value", aDate.day);
+            }
+        }
+
+        addItem(aItem) {
+            if (aItem.hashId in this.mItemHash) {
+                this.deleteItem(aItem);
+            }
+
+            let cssSafeId = cal.view.formatStringForCSSRule(aItem.calendar.id);
+            let box = document.createXULElement("calendar-month-day-box-item");
+            let context = this.getAttribute("item-context") ||
+                this.getAttribute("context");
+            box.setAttribute("context", context);
+            box.style.setProperty("--item-backcolor", `var(--calendar-${cssSafeId}-backcolor)`);
+            box.style.setProperty("--item-forecolor", `var(--calendar-${cssSafeId}-forecolor)`);
+
+            cal.data.binaryInsertNode(this.dayItems, box, aItem, cal.view.compareItems, false);
+
+            box.calendarView = this.calendarView;
+            box.item = aItem;
+            box.parentBox = this;
+            box.occurrence = aItem;
+
+            this.mItemHash[aItem.hashId] = box;
+            return box;
+        }
+
+        selectItem(aItem) {
+            if (aItem.hashId in this.mItemHash) {
+                this.mItemHash[aItem.hashId].selected = true;
+            }
+        }
+
+        unselectItem(aItem) {
+            if (aItem.hashId in this.mItemHash) {
+                this.mItemHash[aItem.hashId].selected = false;
+            }
+        }
+
+        deleteItem(aItem) {
+            if (aItem.hashId in this.mItemHash) {
+                let node = this.mItemHash[aItem.hashId];
+                node.remove();
+                delete this.mItemHash[aItem.hashId];
+            }
+        }
+
+        onDropItem(aItem) {
+            // When item's timezone is different than the default one, the
+            // item might get moved on a day different than the drop day.
+            // Changing the drop day allows to compensate a possible difference.
+
+            // Figure out if the timezones cause a days difference.
+            let start = (aItem[cal.dtz.startDateProp(aItem)] ||
+                aItem[cal.dtz.endDateProp(aItem)]).clone();
+            let dayboxDate = this.mDate.clone();
+            if (start.timezone != dayboxDate.timezone) {
+                let startInDefaultTz = start.clone().getInTimezone(dayboxDate.timezone);
+                start.isDate = true;
+                startInDefaultTz.isDate = true;
+                startInDefaultTz.timezone = start.timezone;
+                let dayDiff = start.subtractDate(startInDefaultTz);
+                // Change the day where to drop the item.
+                dayboxDate.addDuration(dayDiff);
+            }
+
+            return cal.item.moveToDate(aItem, dayboxDate);
+        }
+
+        onMouseDown(event) {
+            event.stopPropagation();
+            if (this.mDate) {
+                this.calendarView.selectedDay = this.mDate;
+            }
+        }
+
+        onDblClick(event) {
+            event.stopPropagation();
+            this.calendarView.controller.createNewEvent();
+        }
+
+        onClick(event) {
+            if (event.button != 0) {
+                return;
+            }
+
+            if (!(event.ctrlKey || event.metaKey)) {
+                this.calendarView.setSelectedItems(0, []);
+            }
+        }
+
+        onWheel(event) {
+            if (cal.view.getParentNodeOrThisByAttribute(event.originalTarget, "data-label", "day") == null) {
+                if (this.dayItems.scrollHeight > this.dayItems.clientHeight) {
+                    event.stopPropagation();
+                }
+            }
+        }
+    }
+    customElements.define("calendar-month-day-box", CalendarMonthDayBox);
+}
--- a/calendar/base/content/calendar-month-view.xml
+++ b/calendar/base/content/calendar-month-view.xml
@@ -120,227 +120,9 @@
 
             this.setEditableLabel();
             this.setCSSClasses();
             return val;
         ]]></setter>
       </property>
     </implementation>
   </binding>
-
-  <binding id="calendar-month-day-box" extends="chrome://calendar/content/widgets/calendar-widgets.xml#dragndropContainer">
-    <content orient="vertical">
-      <xul:hbox anonid="monthday-labels" style="overflow: hidden;">
-        <xul:label anonid="week-label"
-                   flex="1"
-                   crop="end"
-                   hidden="true"
-                   mousethrough="always"
-                   class="calendar-month-day-box-week-label calendar-month-day-box-date-label"
-                   xbl:inherits="relation,selected"/>
-        <xul:label anonid="day-label"
-                   flex="1"
-                   mousethrough="always"
-                   class="calendar-month-day-box-date-label"
-                   xbl:inherits="relation,selected,value"/>
-      </xul:hbox>
-      <xul:vbox anonid="day-items" class="calendar-month-day-box-items-box" flex="1">
-        <children/>
-      </xul:vbox>
-    </content>
-
-    <implementation>
-      <field name="mDate">null</field>
-      <field name="mItemHash">{}</field>
-      <field name="mShowMonthLabel">false</field>
-
-      <property name="date"
-                onget="return this.mDate"
-                onset="this.setDate(val); return val;"/>
-
-      <property name="selected">
-        <getter><![CDATA[
-            let sel = this.getAttribute("selected");
-            if (sel && sel == "true") {
-                return true;
-            }
-
-            return false;
-        ]]></getter>
-        <setter><![CDATA[
-            if (val) {
-                this.setAttribute("selected", "true");
-            } else {
-                this.removeAttribute("selected");
-            }
-            return val;
-        ]]></setter>
-      </property>
-
-      <property name="dayitems">
-        <getter><![CDATA[
-            return document.getAnonymousElementByAttribute(this, "anonid", "day-items");
-        ]]></getter>
-      </property>
-
-      <property name="showMonthLabel">
-        <getter><![CDATA[
-            return this.mShowMonthLabel;
-        ]]></getter>
-        <setter><![CDATA[
-            if (this.mShowMonthLabel == val) {
-                return val;
-            }
-            this.mShowMonthLabel = val;
-
-            if (!this.mDate) {
-                return val;
-            }
-            if (val) {
-                this.setAttribute("value", cal.getDateFormatter().formatDateWithoutYear(this.mDate));
-            } else {
-                this.setAttribute("value", this.mDate.day);
-            }
-            return val;
-        ]]></setter>
-      </property>
-
-      <method name="setDate">
-        <parameter name="aDate"/>
-        <body><![CDATA[
-            if (!aDate) {
-                throw Cr.NS_ERROR_NULL_POINTER;
-            }
-
-            // Remove all the old events
-            this.mItemHash = {};
-            removeChildren(this);
-
-            if (this.mDate && this.mDate.compare(aDate) == 0) {
-                return;
-            }
-
-            this.mDate = aDate;
-
-            // Set up DOM attributes for custom CSS coloring.
-            let weekTitle = cal.getWeekInfoService().getWeekTitle(aDate);
-            this.setAttribute("year", aDate.year);
-            this.setAttribute("month", aDate.month + 1);
-            this.setAttribute("week", weekTitle);
-            this.setAttribute("day", aDate.day);
-
-            if (this.mShowMonthLabel) {
-                let monthName = cal.l10n.getDateFmtString(`month.${aDate.month + 1}.Mmm`);
-                this.setAttribute("value", aDate.day + " " + monthName);
-            } else {
-                this.setAttribute("value", aDate.day);
-            }
-        ]]></body>
-      </method>
-
-      <method name="addItem">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            if (aItem.hashId in this.mItemHash) {
-                this.deleteItem(aItem);
-            }
-
-            let cssSafeId = cal.view.formatStringForCSSRule(aItem.calendar.id);
-            let box = document.createXULElement("calendar-month-day-box-item");
-            let context = this.getAttribute("item-context") ||
-                          this.getAttribute("context");
-            box.setAttribute("context", context);
-            box.style.setProperty("--item-backcolor", `var(--calendar-${cssSafeId}-backcolor)`);
-            box.style.setProperty("--item-forecolor", `var(--calendar-${cssSafeId}-forecolor)`);
-
-            cal.data.binaryInsertNode(this, box, aItem, cal.view.compareItems, false);
-
-            box.calendarView = this.calendarView;
-            box.item = aItem;
-            box.parentBox = this;
-            box.occurrence = aItem;
-
-            this.mItemHash[aItem.hashId] = box;
-            return box;
-        ]]></body>
-      </method>
-
-      <method name="selectItem">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            if (aItem.hashId in this.mItemHash) {
-                this.mItemHash[aItem.hashId].selected = true;
-            }
-        ]]></body>
-      </method>
-
-      <method name="unselectItem">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            if (aItem.hashId in this.mItemHash) {
-                this.mItemHash[aItem.hashId].selected = false;
-            }
-        ]]></body>
-      </method>
-
-      <method name="deleteItem">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            if (aItem.hashId in this.mItemHash) {
-                let node = this.mItemHash[aItem.hashId];
-                node.remove();
-                delete this.mItemHash[aItem.hashId];
-            }
-        ]]></body>
-      </method>
-
-      <method name="onDropItem">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            // When item's timezone is different than the default one, the
-            // item might get moved on a day different than the drop day.
-            // Changing the drop day allows to compensate a possible difference.
-
-            // Figure out if the timezones cause a days difference.
-            let start = (aItem[cal.dtz.startDateProp(aItem)] ||
-                         aItem[cal.dtz.endDateProp(aItem)]).clone();
-            let dayboxDate = this.mDate.clone();
-            if (start.timezone != dayboxDate.timezone) {
-                let startInDefaultTz = start.clone().getInTimezone(dayboxDate.timezone);
-                start.isDate = true;
-                startInDefaultTz.isDate = true;
-                startInDefaultTz.timezone = start.timezone;
-                let dayDiff = start.subtractDate(startInDefaultTz);
-                // Change the day where to drop the item.
-                dayboxDate.addDuration(dayDiff);
-            }
-
-            return cal.item.moveToDate(aItem, dayboxDate);
-        ]]></body>
-      </method>
-    </implementation>
-
-    <handlers>
-      <handler event="mousedown"><![CDATA[
-          event.stopPropagation();
-          if (this.mDate) {
-              this.calendarView.selectedDay = this.mDate;
-          }
-      ]]></handler>
-      <handler event="dblclick"><![CDATA[
-          event.stopPropagation();
-          this.calendarView.controller.createNewEvent();
-      ]]></handler>
-      <handler event="click" button="0"><![CDATA[
-          if (!(event.ctrlKey || event.metaKey)) {
-              this.calendarView.setSelectedItems(0, []);
-          }
-      ]]></handler>
-      <handler event="wheel"><![CDATA[
-          if (cal.view.getParentNodeOrThisByAttribute(event.originalTarget, "anonid", "day-label") == null) {
-              if (this.dayitems.scrollHeight > this.dayitems.clientHeight) {
-                  event.stopPropagation();
-              }
-          }
-      ]]></handler>
-    </handlers>
-  </binding>
 </bindings>
new file mode 100644
--- /dev/null
+++ b/calendar/base/content/calendar-multiday-view.js
@@ -0,0 +1,155 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* globals currentView MozElements MozXULElement */
+
+/* import-globals-from calendar-ui-utils.js */
+
+"use strict";
+
+// Wrap in a block to prevent leaking to window scope.
+{
+    const { cal } = ChromeUtils.import("resource://calendar/modules/calUtils.jsm");
+
+    /**
+     * Implements the Drag and Drop class for the Calendar Header Container.
+     *
+     * @extends {MozElements.CalendarDnDContainer}
+     */
+    class CalendarHeaderContainer extends MozElements.CalendarDnDContainer {
+        static get inheritedAttributes() {
+            return { ".calendar-event-column-header": "selected" };
+        }
+
+        constructor() {
+            super();
+            this.addEventListener("dblclick", this.onDblClick);
+            this.addEventListener("mousedown", this.onMouseDown);
+            this.addEventListener("click", this.onClick);
+            this.addEventListener("wheel", this.onWheel);
+        }
+
+        connectedCallback() {
+            if (this.delayConnectedCallback() || this.hasConnected) {
+                return;
+            }
+            // this.hasConnected is set to true in super.connectedCallback.
+            super.connectedCallback();
+
+            this.mItemBoxes = [];
+
+            this.setAttribute("flex", "1");
+            this.classList.add("calendar-event-column-header");
+            this.initializeAttributeInheritance();
+        }
+
+        get date() {
+            return this.mDate;
+        }
+
+        set date(val) {
+            this.mDate = val;
+            return val;
+        }
+
+        findBoxForItem(aItem) {
+            for (let item of this.mItemBoxes) {
+                if (aItem && item.occurrence.hasSameIds(aItem)) {
+                    // We can return directly, since there will only be one box per
+                    // item in the header.
+                    return item;
+                }
+            }
+            return null;
+        }
+
+        addEvent(aItem) {
+            // Prevent same items being added.
+            if (this.mItemBoxes.some(itemBox => itemBox.occurrence.hashId == aItem.hashId)) {
+                return;
+            }
+
+            let itemBox = document.createXULElement("calendar-editable-item");
+            this.appendChild(itemBox);
+            itemBox.calendarView = this.calendarView;
+            itemBox.occurrence = aItem;
+            let ctxt = this.calendarView.getAttribute("item-context") ||
+                this.calendarView.getAttribute("context");
+            itemBox.setAttribute("context", ctxt);
+
+            if (aItem.hashId in this.calendarView.mFlashingEvents) {
+                itemBox.setAttribute("flashing", "true");
+            }
+
+            this.mItemBoxes.push(itemBox);
+            itemBox.parentBox = this;
+        }
+
+        deleteEvent(aItem) {
+            for (let i in this.mItemBoxes) {
+                if (this.mItemBoxes[i].occurrence.hashId == aItem.hashId) {
+                    this.mItemBoxes[i].remove();
+                    this.mItemBoxes.splice(i, 1);
+                    break;
+                }
+            }
+        }
+
+        onDropItem(aItem) {
+            let newItem = cal.item.moveToDate(aItem, this.mDate);
+            newItem = cal.item.setToAllDay(newItem, true);
+            return newItem;
+        }
+
+        selectOccurrence(aItem) {
+            for (let itemBox of this.mItemBoxes) {
+                if (aItem && (itemBox.occurrence.hashId == aItem.hashId)) {
+                    itemBox.selected = true;
+                }
+            }
+        }
+
+        unselectOccurrence(aItem) {
+            for (let itemBox of this.mItemBoxes) {
+                if (aItem && (itemBox.occurrence.hashId == aItem.hashId)) {
+                    itemBox.selected = false;
+                }
+            }
+        }
+
+        onDblClick(event) {
+            if (event.button == 0) {
+                this.calendarView.controller.createNewEvent(null, this.mDate, null, true);
+            }
+        }
+
+        onMouseDown(event) {
+            this.calendarView.selectedDay = this.mDate;
+        }
+
+        onClick(event) {
+            if (event.button == 0) {
+                if (!(event.ctrlKey || event.metaKey)) {
+                    this.calendarView.setSelectedItems(0, []);
+                }
+            }
+            if (event.button == 2) {
+                let newStart = this.calendarView.selectedDay.clone();
+                newStart.isDate = true;
+                this.calendarView.selectedDateTime = newStart;
+                event.stopPropagation();
+            }
+        }
+
+        onWheel(event) {
+            if (this.getAttribute("orient") == "vertical") {
+                // In vertical view (normal), don't let the parent multiday view
+                // handle the scrolling in its bubbling phase. The default action
+                // will make the box scroll here.
+                event.stopPropagation();
+            }
+        }
+    }
+    customElements.define("calendar-header-container", CalendarHeaderContainer);
+}
--- a/calendar/base/content/calendar-multiday-view.xml
+++ b/calendar/base/content/calendar-multiday-view.xml
@@ -11,149 +11,16 @@
 <!DOCTYPE bindings SYSTEM "chrome://global/locale/global.dtd" >
 
 <bindings id="calendar-multiday-view-bindings"
   xmlns="http://www.mozilla.org/xbl"
   xmlns:html="http://www.w3.org/1999/xhtml"
   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   xmlns:xbl="http://www.mozilla.org/xbl">
 
-  <binding id="calendar-header-container" extends="chrome://calendar/content/widgets/calendar-widgets.xml#dragndropContainer">
-    <content xbl:inherits="selected" flex="1" class="calendar-event-column-header">
-      <children/>
-    </content>
-
-    <implementation>
-      <field name="mItemBoxes">null</field>
-      <constructor><![CDATA[
-          this.mItemBoxes = [];
-      ]]></constructor>
-
-      <property name="date">
-        <getter><![CDATA[
-            return this.mDate;
-        ]]></getter>
-        <setter><![CDATA[
-            this.mDate = val;
-            return val;
-        ]]></setter>
-      </property>
-      <method name="findBoxForItem">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            for (let item of this.mItemBoxes) {
-                if (aItem && item.occurrence.hasSameIds(aItem)) {
-                    // We can return directly, since there will only be one box per
-                    // item in the header.
-                    return item;
-                }
-            }
-            return null;
-        ]]></body>
-      </method>
-
-      <method name="addEvent">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            // prevent same items being added
-            if (this.mItemBoxes.some(itemBox => itemBox.occurrence.hashId == aItem.hashId)) {
-                return;
-            }
-
-            let itemBox = document.createXULElement("calendar-editable-item");
-            this.appendChild(itemBox);
-            itemBox.calendarView = this.calendarView;
-            itemBox.occurrence = aItem;
-            let ctxt = this.calendarView.getAttribute("item-context") ||
-                       this.calendarView.getAttribute("context");
-            itemBox.setAttribute("context", ctxt);
-
-            if (aItem.hashId in this.calendarView.mFlashingEvents) {
-                itemBox.setAttribute("flashing", "true");
-            }
-
-            this.mItemBoxes.push(itemBox);
-            itemBox.parentBox = this;
-        ]]></body>
-      </method>
-
-      <method name="deleteEvent">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            for (let i in this.mItemBoxes) {
-                if (this.mItemBoxes[i].occurrence.hashId == aItem.hashId) {
-                    this.mItemBoxes[i].remove();
-                    this.mItemBoxes.splice(i, 1);
-                    break;
-                }
-            }
-        ]]></body>
-      </method>
-
-      <method name="onDropItem">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            let newItem = cal.item.moveToDate(aItem, this.mDate);
-            newItem = cal.item.setToAllDay(newItem, true);
-            return newItem;
-        ]]></body>
-      </method>
-
-      <method name="selectOccurrence">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            for (let itemBox of this.mItemBoxes) {
-                if (aItem && (itemBox.occurrence.hashId == aItem.hashId)) {
-                    itemBox.selected = true;
-                }
-            }
-        ]]></body>
-      </method>
-      <method name="unselectOccurrence">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            for (let itemBox of this.mItemBoxes) {
-                if (aItem && (itemBox.occurrence.hashId == aItem.hashId)) {
-                    itemBox.selected = false;
-                }
-            }
-        ]]></body>
-      </method>
-
-    </implementation>
-
-    <handlers>
-      <handler event="dblclick" button="0"><![CDATA[
-          this.calendarView.controller.createNewEvent(null, this.mDate, null, true);
-      ]]></handler>
-      <handler event="mousedown"><![CDATA[
-          this.calendarView.selectedDay = this.mDate;
-      ]]></handler>
-      <handler event="click" button="0"><![CDATA[
-          if (!(event.ctrlKey || event.metaKey)) {
-              this.calendarView.setSelectedItems(0, []);
-          }
-      ]]></handler>
-      <handler event="click" button="2"><![CDATA[
-          let newStart = this.calendarView.selectedDay.clone();
-          newStart.isDate = true;
-          this.calendarView.selectedDateTime = newStart;
-          event.stopPropagation();
-      ]]></handler>
-      <handler event="wheel"><![CDATA[
-          if (this.getAttribute("orient") == "vertical") {
-              // In vertical view (normal), don't let the parent multiday view
-              // handle the scrolling in its bubbling phase. The default action
-              // will make the box scroll here.
-              event.stopPropagation();
-          }
-      ]]></handler>
-    </handlers>
-  </binding>
-
   <!--
      -  An individual event box, to be inserted into a column.
     -->
   <binding id="calendar-event-box" extends="chrome://calendar/content/calendar-view-core.xml#calendar-editable-item">
     <content mousethrough="never" tooltip="itemTooltip">
       <xul:box xbl:inherits="orient,width,height" flex="1">
         <xul:box anonid="event-container"
                  class="calendar-color-box"
--- a/calendar/base/content/calendar-view-bindings.css
+++ b/calendar/base/content/calendar-view-bindings.css
@@ -7,29 +7,22 @@
 calendar-event-box { 
   -moz-binding: url(chrome://calendar/content/calendar-multiday-view.xml#calendar-event-box);
 }
 
 calendar-day-label {
   display: -moz-box;
 }
 
-calendar-header-container { 
-  -moz-binding: url(chrome://calendar/content/calendar-multiday-view.xml#calendar-header-container);
-}
+/* Month View */
 
-/* Month View */
-calendar-month-day-box { 
-  -moz-binding: url(chrome://calendar/content/calendar-month-view.xml#calendar-month-day-box);
-}
-
-calendar-month-day-box-item { 
+calendar-month-day-box-item {
   -moz-binding: url(chrome://calendar/content/calendar-month-view.xml#calendar-month-day-box-item);
 }
 
 /* View core */
-calendar-editable-item { 
+calendar-editable-item {
   -moz-binding: url(chrome://calendar/content/calendar-view-core.xml#calendar-editable-item);
 }
 
  calendar-shadow-box {
    -moz-binding: url(chrome://calendar/content/calendar-view-core.xml#calendar-shadow-box);
  }
new file mode 100644
--- /dev/null
+++ b/calendar/base/content/widgets/calendar-dnd-widgets.js
@@ -0,0 +1,238 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* globals currentView MozElements MozXULElement */
+
+"use strict";
+
+// Wrap in a block to prevent leaking to window scope.
+{
+    var { cal } = ChromeUtils.import("resource://calendar/modules/calUtils.jsm");
+
+    /**
+     * An abstract class to handle drag on drop for calendar.
+     *
+     * @abstract
+     */
+    class CalendarDnDContainer extends MozXULElement {
+        constructor() {
+            super();
+            this.addEventListener("dragstart", this.onDragStart, true);
+            this.addEventListener("dragover", this.onDragOver);
+            this.addEventListener("dragenter", this.onDragEnter);
+            this.addEventListener("drop", this.onDrop);
+            this.addEventListener("dragend", this.onDragEnd);
+        }
+
+        connectedCallback() {
+            if (this.delayConnectedCallback()) {
+                return;
+            }
+            this.hasConnected = true;
+
+            this.mDropShadows = [];
+            this.mCalendarView = null;
+        }
+
+        /**
+         * The ViewController that supports the interface 'calICalendarView'.
+         *
+         * @returns {calICalendarView}
+         */
+        get calendarView() {
+            return this.mCalendarView;
+        }
+
+        set calendarView(val) {
+            return (this.mCalendarView = val);
+        }
+
+        /**
+         * Method to add individual code e.g to set up the new item during 'ondrop'.
+         */
+        onDropItem(aItem) {
+            // method that may be overridden by derived bindings...
+        }
+
+        getDropShadows() {
+            return this.mDropShadows;
+        }
+
+        /**
+         * Adds the dropshadows to the children of the binding.
+         * The dropshadows are added at the first position of the children.
+         */
+        addDropShadows() {
+            if (!this.mDropShadows) {
+                return;
+            }
+
+            if (this.getElementsByAttribute("class", "dropshadow").length > 0) {
+                return;
+            }
+
+            let offset = this.calendarView.mShadowOffset;
+            let shadowStartDate = this.date.clone();
+            shadowStartDate.addDuration(offset);
+            this.calendarView.mDropShadows = [];
+            for (let i = 0; i < this.calendarView.mDropShadowsLength; i++) {
+                let box = this.calendarView.findDayBoxForDate(shadowStartDate);
+                if (!box) {
+                    // Dragging to the end or beginning of a view.
+                    shadowStartDate.day += 1;
+                    continue;
+                }
+                let boxItems = box.querySelector(".calendar-day-items");
+                let dropshadow = document.createXULElement("box");
+                dropshadow.setAttribute("class", "dropshadow");
+                if (boxItems) {
+                    boxItems.insertBefore(dropshadow, boxItems.firstChild);
+                    this.calendarView.mDropShadows.push(boxItems);
+                } else {
+                    box.insertBefore(dropshadow, box.firstChild);
+                    this.calendarView.mDropShadows.push(box);
+                }
+                shadowStartDate.day += 1;
+            }
+        }
+
+        /**
+         * Removes all dropShadows from the binding.
+         * Dropshadows are recognized as such by carrying an attribute "dropshadow".
+         */
+        removeDropShadows() {
+            // method that may be overwritten by derived bindings...
+            if (this.calendarView.mDropShadows) {
+                for (let shadow of this.calendarView.mDropShadows) {
+                    cal.view.removeChildElementsByAttribute(shadow, "class", "dropshadow");
+                }
+            }
+            this.calendarView.mDropShadows = null;
+        }
+
+        /**
+         * By setting the attribute "dropbox" to "true" or "false" the
+         * dropshadows are added or removed.
+         */
+        setAttribute(aAttr, aVal) {
+            if (aAttr == "dropbox") {
+                let session = cal.getDragService().getCurrentSession();
+                let startingDayBox = session.sourceNode.mParentBox;
+                if (session) {
+                    session.canDrop = true;
+                    // no shadows when dragging in the initial position
+                    if (aVal == "true" && this != startingDayBox) {
+                        this.mDropShadows = [session.sourceNode.sourceObject];
+                        this.addDropShadows();
+                    } else {
+                        this.removeDropShadows();
+                    }
+                }
+            }
+            return XULElement.prototype.setAttribute.call(this, aAttr, aVal);
+        }
+
+        onDragStart(event) {
+            let draggedDOMNode = event.target;
+            if (!draggedDOMNode || (draggedDOMNode.parentNode != this &&
+                !draggedDOMNode.parentNode.classList.contains("calendar-day-items"))) {
+                return;
+            }
+            let item = draggedDOMNode.occurrence.clone();
+            let beginMoveDate = draggedDOMNode.mParentBox.date;
+            let itemStartDate = (item.startDate || item.entryDate || item.dueDate)
+                                .getInTimezone(this.calendarView.mTimezone);
+            let itemEndDate = (item.endDate || item.dueDate || item.entryDate)
+                              .getInTimezone(this.calendarView.mTimezone);
+            let oneMoreDay = (itemEndDate.hour > 0 || itemEndDate.minute > 0);
+            itemStartDate.isDate = true;
+            itemEndDate.isDate = true;
+            let offsetDuration = itemStartDate.subtractDate(beginMoveDate);
+            let lenDuration = itemEndDate.subtractDate(itemStartDate);
+            let len = lenDuration.weeks * 7 + lenDuration.days;
+
+            this.calendarView.mShadowOffset = offsetDuration;
+            this.calendarView.mDropShadowsLength = oneMoreDay ? len + 1 : len;
+        }
+
+        onDragOver(event) {
+            let session = cal.getDragService().getCurrentSession();
+            if (!session || !session.sourceNode || !session.sourceNode.sourceObject) {
+                // No source item? Then this is not for us.
+                return;
+            }
+
+            // We handled the event.
+            event.preventDefault();
+        }
+
+        onDragEnter(event) {
+            if (event.target.localName == this.localName ||
+                event.target.classList.contains("calendar-day-items")) {
+                let session = cal.getDragService().getCurrentSession();
+                if (session) {
+                    if (!session.sourceNode || !session.sourceNode.sourceObject) {
+                        // No source item? Then this is not for us.
+                        return;
+                    }
+
+                    // We can drop now, tell the drag service.
+                    event.preventDefault();
+
+                    if (!this.hasAttribute("dropbox") || this.getAttribute("dropbox") == "false") {
+                        // As it turned out it was not possible to remove the remaining dropshadows
+                        // at the "dragleave" or "dragexit" event, majorly because it was not reliably
+                        // fired. As the dragndropcontainer may be anonymous it is further on not
+                        // possible to remove the dropshadows by something like
+                        // "document.getElementsByAttribute('dropbox').removeDropShadows();";
+                        // So we have to remove them at the currentView(). The restriction of course is
+                        // that these containers so far may not be used for drag and drop from/to e.g.
+                        // the today-pane.
+                        currentView().removeDropShadows();
+                    }
+                    this.setAttribute("dropbox", "true");
+                }
+            }
+        }
+
+        onDrop(event) {
+            let session = cal.getDragService().getCurrentSession();
+            if (!session || !session.sourceNode || !session.sourceNode.sourceObject) {
+                // No source node? Not our drag.
+                return;
+            }
+            let item = session.sourceNode.sourceObject.clone();
+            this.setAttribute("dropbox", "false");
+            let transfer = Cc["@mozilla.org/widget/transferable;1"]
+                .createInstance(Ci.nsITransferable);
+            transfer.init(null);
+
+            if (cal.item.isEvent(item)) {
+                transfer.addDataFlavor("application/x-moz-cal-event");
+            } else {
+                transfer.addDataFlavor("application/x-moz-cal-task");
+            }
+
+            session.getData(transfer, 0);
+            item = session.sourceNode.sourceObject;
+
+            let newItem = this.onDropItem(item).clone();
+            let newStart = newItem.startDate || newItem.entryDate || newItem.dueDate;
+            let newEnd = newItem.endDate || newItem.dueDate || newItem.entryDate;
+            let offset = this.calendarView.mShadowOffset;
+            newStart.addDuration(offset);
+            newEnd.addDuration(offset);
+            this.calendarView.controller.modifyOccurrence(item, newStart, newEnd);
+
+            // We handled the event.
+            event.stopPropagation();
+        }
+
+        onDragEnd(event) {
+            currentView().removeDropShadows();
+        }
+    }
+
+    MozElements.CalendarDnDContainer = CalendarDnDContainer;
+}
--- a/calendar/base/content/widgets/calendar-widget-bindings.css
+++ b/calendar/base/content/widgets/calendar-widget-bindings.css
@@ -7,12 +7,8 @@ modebox,
 modevbox {
   -moz-binding: url(chrome://calendar/content/widgets/calendar-widgets.xml#modebox);
   -moz-user-focus: normal;
 }
 
 modevbox {
   -moz-box-orient: vertical;
 }
-
-dragndropContainer {
-   -moz-binding: url(chrome://calendar/content/widgets/calendar-widgets.xml#dragndropContainer);
-}
--- a/calendar/base/content/widgets/calendar-widgets.xml
+++ b/calendar/base/content/widgets/calendar-widgets.xml
@@ -239,206 +239,9 @@
                     this.mBroadcaster.addEventListener("DOMAttrModified", this.mModHandler, true);
                 }
             }
             return XULElement.prototype.setAttribute.call(this, aAttr, aVal);
         ]]></body>
       </method>
     </implementation>
   </binding>
-
-  <!-- This binding may server as a droptarget container for arbitrary items
-       it contains methods to add DropShadows. This binding is meant to be used
-       as a parent binding. The methods may be overwritten. -->
-  <binding id="dragndropContainer">
-    <implementation>
-      <field name="mDropShadows">[]</field>
-      <field name="mCalendarView">null</field>
-
-      <!-- The ViewController that supports the interface 'calICalendarView'-->
-      <property name="calendarView"
-                onget="return this.mCalendarView;"
-                onset="return (this.mCalendarView = val);"/>
-
-      <!-- method to add individual code e.g to set up the new item during
-       'ondrop' -->
-      <method name="onDropItem">
-        <parameter name="aItem"/>
-        <body><![CDATA[
-            // method that may be overridden by derived bindings...
-        ]]></body>
-      </method>
-
-      <method name="getDropShadows">
-        <body><![CDATA[
-            return this.mDropShadows;
-        ]]></body>
-      </method>
-
-      <!-- Adds the dropshadows to the children of the binding. The dropshadows
-           are added at the first position of the children -->
-      <method name="addDropShadows">
-        <body><![CDATA[
-            if (this.mDropShadows) {
-                if (this.getElementsByAttribute("class", "dropshadow").length == 0) {
-                    let offset = this.calendarView.mShadowOffset;
-                    let shadowStartDate = this.date.clone();
-                    shadowStartDate.addDuration(offset);
-                    this.calendarView.mDropShadows = [];
-                    for (let i = 0; i < this.calendarView.mDropShadowsLength; i++) {
-                        let box = this.calendarView.findDayBoxForDate(shadowStartDate);
-                        if (!box) {
-                            // Dragging to the end or beginning of a view
-                            shadowStartDate.day += 1;
-                            continue;
-                        }
-                        let dropshadow = document.createXULElement("box");
-                        dropshadow.setAttribute("class", "dropshadow");
-                        if (box.hasChildNodes()) {
-                            box.insertBefore(dropshadow, box.firstChild);
-                        } else {
-                            box.appendChild(dropshadow);
-                        }
-                        shadowStartDate.day += 1;
-                        this.calendarView.mDropShadows.push(box);
-                    }
-                }
-            }
-        ]]></body>
-      </method>
-
-      <!-- removes all dropShadows from the binding. Dropshadows are recognized
-           as such by carrying an attribute "dropshadow" -->
-      <method name="removeDropShadows">
-        <body><![CDATA[
-            // method that may be overwritten by derived bindings...
-            if (this.calendarView.mDropShadows) {
-                for (let shadow of this.calendarView.mDropShadows) {
-                    cal.view.removeChildElementsByAttribute(shadow, "class", "dropshadow");
-                }
-            }
-            this.calendarView.mDropShadows = null;
-        ]]></body>
-      </method>
-
-      <!-- By setting the attribute "dropbox" to "true" or "false" the
-           dropshadows are added or removed -->
-      <method name="setAttribute">
-        <parameter name="aAttr"/>
-        <parameter name="aVal"/>
-        <body><![CDATA[
-            if (aAttr == "dropbox") {
-                let session = cal.getDragService().getCurrentSession();
-                let startingDayBox = session.sourceNode.mParentBox;
-                if (session) {
-                    session.canDrop = true;
-                    // no shadows when dragging in the initial position
-                    if (aVal == "true" && this != startingDayBox) {
-                        this.mDropShadows = [session.sourceNode.sourceObject];
-                        this.addDropShadows();
-                    } else {
-                        this.removeDropShadows();
-                    }
-                }
-            }
-            return XULElement.prototype.setAttribute.call(this, aAttr, aVal);
-        ]]></body>
-      </method>
-    </implementation>
-
-    <handlers>
-      <handler event="dragstart" phase="capturing"><![CDATA[
-          let draggedDOMNode = event.target;
-          if (!draggedDOMNode || draggedDOMNode.parentNode != this) {
-              return;
-          }
-          let item = draggedDOMNode.occurrence.clone();
-          let beginMoveDate = draggedDOMNode.mParentBox.date;
-          let itemStartDate = (item.startDate || item.entryDate || item.dueDate).getInTimezone(this.calendarView.mTimezone);
-          let itemEndDate = (item.endDate || item.dueDate || item.entryDate).getInTimezone(this.calendarView.mTimezone);
-          let oneMoreDay = (itemEndDate.hour > 0 || itemEndDate.minute > 0);
-          itemStartDate.isDate = true;
-          itemEndDate.isDate = true;
-          let offsetDuration = itemStartDate.subtractDate(beginMoveDate);
-          let lenDuration = itemEndDate.subtractDate(itemStartDate);
-          let len = lenDuration.weeks * 7 + lenDuration.days;
-          this.calendarView.mShadowOffset = offsetDuration;
-          this.calendarView.mDropShadowsLength = oneMoreDay ? len + 1 : len;
-      ]]></handler>
-
-      <handler event="dragover"><![CDATA[
-          let session = cal.getDragService().getCurrentSession();
-          if (!session || !session.sourceNode || !session.sourceNode.sourceObject) {
-              // No source item? Then this is not for us.
-              return;
-          }
-
-          // We handled the event
-          event.preventDefault();
-      ]]></handler>
-
-      <handler event="dragenter"><![CDATA[
-          if (event.target.localName == this.localName) {
-              let session = cal.getDragService().getCurrentSession();
-              if (session) {
-                  if (!session.sourceNode || !session.sourceNode.sourceObject) {
-                      // No source item? Then this is not for us.
-                      return;
-                  }
-
-                  // We can drop now, tell the drag service.
-                  event.preventDefault();
-
-                  if (!this.hasAttribute("dropbox") || this.getAttribute("dropbox") == "false") {
-                      // As it turned out it was not possible to remove the remaining dropshadows
-                      // at the "dragleave" or "dragexit" event, majorly because it was not reliably
-                      // fired. As the dragndropcontainer may be anonymous it is further on not
-                      // possible to remove the dropshadows by something like
-                      // "document.getElementsByAttribute('dropbox').removeDropShadows();";
-                      // So we have to remove them at the currentView(). The restriction of course is
-                      // that these containers so far may not be used for drag and drop from/to e.g.
-                      // the today-pane.
-                      currentView().removeDropShadows();
-                  }
-                  this.setAttribute("dropbox", "true");
-              }
-          }
-      ]]></handler>
-
-      <handler event="drop"><![CDATA[
-          let session = cal.getDragService().getCurrentSession();
-          if (!session || !session.sourceNode || !session.sourceNode.sourceObject) {
-              // No source node? Not our drag.
-              return;
-          }
-          let item = session.sourceNode.sourceObject.clone();
-          this.setAttribute("dropbox", "false");
-          let transfer = Cc["@mozilla.org/widget/transferable;1"]
-                           .createInstance(Ci.nsITransferable);
-          transfer.init(null);
-
-          if (cal.item.isEvent(item)) {
-              transfer.addDataFlavor("application/x-moz-cal-event");
-          } else {
-              transfer.addDataFlavor("application/x-moz-cal-task");
-          }
-
-          session.getData(transfer, 0);
-          item = session.sourceNode.sourceObject;
-
-          let newItem = this.onDropItem(item).clone();
-          let newStart = newItem.startDate || newItem.entryDate || newItem.dueDate;
-          let newEnd = newItem.endDate || newItem.dueDate || newItem.entryDate;
-          let offset = this.calendarView.mShadowOffset;
-          newStart.addDuration(offset);
-          newEnd.addDuration(offset);
-          this.calendarView.controller.modifyOccurrence(item, newStart, newEnd);
-
-          // We handled the event
-          event.stopPropagation();
-      ]]></handler>
-
-      <handler event="dragend"><![CDATA[
-          currentView().removeDropShadows();
-      ]]></handler>
-    </handlers>
-  </binding>
 </bindings>
--- a/calendar/base/jar.mn
+++ b/calendar/base/jar.mn
@@ -20,20 +20,22 @@ calendar.jar:
     content/calendar/calendar-dnd-listener.js              (content/calendar-dnd-listener.js)
     content/calendar/calendar-extract.js                   (content/calendar-extract.js)
     content/calendar/calendar-invitations-manager.js       (content/calendar-invitations-manager.js)
     content/calendar/calendar-item-editing.js              (content/calendar-item-editing.js)
     content/calendar/calendar-item-bindings.js             (content/calendar-item-bindings.js)
     content/calendar/calendar-management.js                (content/calendar-management.js)
     content/calendar/calendar-menus.js                     (content/calendar-menus.js)
     content/calendar/calendar-views.xul                    (content/calendar-views.xul)
+    content/calendar/calendar-month-view.js                (content/calendar-month-view.js)
     content/calendar/calendar-month-view.xml               (content/calendar-month-view.xml)
     content/calendar/calendar-month-base-view.js           (content/calendar-month-base-view.js)
     content/calendar/calendar-multiday-view.xml            (content/calendar-multiday-view.xml)
     content/calendar/calendar-multiday-base-view.js        (content/calendar-multiday-base-view.js)
+    content/calendar/calendar-multiday-view.js             (content/calendar-multiday-view.js)
     content/calendar/calendar-base-view.js                 (content/calendar-base-view.js)
     content/calendar/calendar-day-label.js                 (content/calendar-day-label.js)
     content/calendar/calendar-daypicker.js                 (content/calendar-daypicker.js)
     content/calendar/calendar-statusbar.js                 (content/calendar-statusbar.js)
     content/calendar/calendar-task-editing.js              (content/calendar-task-editing.js)
     content/calendar/calendar-task-tree.js                 (content/calendar-task-tree.js)
     content/calendar/calendar-task-tree-view.js            (content/calendar-task-tree-view.js)
     content/calendar/calendar-task-tree-utils.js           (content/calendar-task-tree-utils.js)
@@ -88,16 +90,17 @@ calendar.jar:
     content/calendar/chooseCalendarDialog.xul              (content/dialogs/chooseCalendarDialog.xul)
     content/calendar/preferences/alarms.js                 (content/preferences/alarms.js)
     content/calendar/preferences/categories.js             (content/preferences/categories.js)
     content/calendar/preferences/editCategory.xul          (content/preferences/editCategory.xul)
     content/calendar/preferences/editCategory.js           (content/preferences/editCategory.js)
     content/calendar/preferences/general.js                (content/preferences/general.js)
     content/calendar/preferences/views.js                  (content/preferences/views.js)
     content/calendar/widgets/calendar-alarm-widget.js      (content/widgets/calendar-alarm-widget.js)
+    content/calendar/widgets/calendar-dnd-widgets.js       (content/widgets/calendar-dnd-widgets.js)
     content/calendar/widgets/calendar-minimonth.js         (content/widgets/calendar-minimonth.js)
     content/calendar/widgets/calendar-widgets.xml          (content/widgets/calendar-widgets.xml)
     content/calendar/widgets/calendar-list-tree.js         (content/widgets/calendar-list-tree.js)
     content/calendar/calendar-subscriptions-list.js        (content/widgets/calendar-subscriptions-list.js)
     content/calendar/widgets/calendar-widget-bindings.css  (content/widgets/calendar-widget-bindings.css)
     content/calendar/calApplicationUtils.js                (src/calApplicationUtils.js)
     content/calendar/calFilter.js                          (src/calFilter.js)
     content/calendar/WindowsNTToZoneInfoTZId.properties    (src/WindowsNTToZoneInfoTZId.properties)
--- a/calendar/lightning/content/messenger-overlay-sidebar.xul
+++ b/calendar/lightning/content/messenger-overlay-sidebar.xul
@@ -48,18 +48,21 @@
   <script src="chrome://calendar/content/calendar-item-editing.js"/>
   <script src="chrome://calendar/content/calendar-chrome-startup.js"/>
   <script src="chrome://calendar/content/mouseoverPreviews.js"/>
   <script src="chrome://calendar/content/calendar-ui-utils.js"/>
 
   <script src="chrome://calendar/content/calendar-views-utils.js"/>
   <script src="chrome://calendar/content/calendar-base-view.js"/>
   <script src="chrome://calendar/content/calendar-month-base-view.js"/>
+  <script src="chrome://calendar/content/widgets/calendar-dnd-widgets.js"/>
+  <script src="chrome://calendar/content/calendar-month-view.js"/>
   <script src="chrome://calendar/content/calendar-event-column.js"/>
   <script src="chrome://calendar/content/calendar-multiday-base-view.js"/>
+  <script src="chrome://calendar/content/calendar-multiday-view.js"/>
   <script src="chrome://calendar/content/calendar-views.js"/>
 
   <script src="chrome://calendar/content/calendar-creation.js"/>
   <script src="chrome://calendar/content/calendar-dnd-listener.js"/>
   <script src="chrome://calendar/content/calendar-statusbar.js"/>
   <script src="chrome://calendar/content/widgets/calendar-minimonth.js"/>
   <script src="chrome://global/content/nsDragAndDrop.js"/>
   <script src="chrome://calendar/content/widgets/calendar-list-tree.js"/>
--- a/calendar/test/mozmill/cal-recurrence/testAnnualRecurrence.js
+++ b/calendar/test/mozmill/cal-recurrence/testAnnualRecurrence.js
@@ -1,28 +1,29 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 var MODULE_NAME = "testAnnualRecurrence";
 var RELATIVE_ROOT = "../shared-modules";
 var MODULE_REQUIRES = ["calendar-utils"];
 
-var CALENDARNAME, EVENTPATH, ALLDAY;
+var CALENDARNAME, EVENTPATH, CANVAS_BOX, ALLDAY;
 var helpersForController, handleOccurrencePrompt, switchToView, goToDate, invokeEventDialog;
 var closeAllEventDialogs, deleteCalendars, createCalendar, menulistSelect;
 
 const STARTYEAR = 1950;
 const EPOCH = 1970;
 
 function setupModule(module) {
     controller = mozmill.getMail3PaneController();
     ({
         CALENDARNAME,
         EVENTPATH,
+        CANVAS_BOX,
         ALLDAY,
         helpersForController,
         handleOccurrencePrompt,
         switchToView,
         goToDate,
         invokeEventDialog,
         closeAllEventDialogs,
         deleteCalendars,
@@ -58,21 +59,21 @@ function testAnnualRecurrence() {
         controller.waitForElement(lookupEventBox("day", ALLDAY, null, 1, null, EVENTPATH));
 
         // week view
         switchToView(controller, "week");
         controller.waitForElement(lookupEventBox("week", ALLDAY, null, column, null, EVENTPATH));
 
         // multiweek view
         switchToView(controller, "multiweek");
-        controller.waitForElement(lookupEventBox("multiweek", ALLDAY, 1, column, null, EVENTPATH));
+        controller.waitForElement(lookupEventBox("multiweek", CANVAS_BOX, 1, column, null, EVENTPATH));
 
         // month view
         switchToView(controller, "month");
-        controller.waitForElement(lookupEventBox("month", ALLDAY, 1, column, null, EVENTPATH));
+        controller.waitForElement(lookupEventBox("month", CANVAS_BOX, 1, column, null, EVENTPATH));
     }
 
     // Delete event.
     switchToView(controller, "day");
     goToDate(controller, checkYears[0], 1, 1);
     const boxPath = getEventBoxPath("day", ALLDAY, null, 1, null) + EVENTPATH;
     const box = lookup(boxPath);
     controller.click(box);
--- a/calendar/test/mozmill/cal-recurrence/testBiweeklyRecurrence.js
+++ b/calendar/test/mozmill/cal-recurrence/testBiweeklyRecurrence.js
@@ -65,43 +65,43 @@ function testBiweeklyRecurrence() {
 
     // Check multiweek view.
     switchToView(controller, "multiweek");
     goToDate(controller, 2009, 1, 31);
 
     // Always two occurrences in view, 1st and 3rd or 2nd and 4th week.
     for (let i = 0; i < 5; i++) {
         controller.waitForElement(
-            lookupEventBox("multiweek", EVENT_BOX, i % 2 + 1, 7, null, EVENTPATH)
+            lookupEventBox("multiweek", CANVAS_BOX, i % 2 + 1, 7, null, EVENTPATH)
         );
         controller.assertNode(
-            lookupEventBox("multiweek", EVENT_BOX, i % 2 + 3, 7, null, EVENTPATH)
+            lookupEventBox("multiweek", CANVAS_BOX, i % 2 + 3, 7, null, EVENTPATH)
         );
         viewForward(controller, 1);
     }
 
     // Check month view.
     switchToView(controller, "month");
     goToDate(controller, 2009, 1, 31);
 
     // January
-    controller.waitForElement(lookupEventBox("month", EVENT_BOX, 5, 7, null, EVENTPATH));
+    controller.waitForElement(lookupEventBox("month", CANVAS_BOX, 5, 7, null, EVENTPATH));
     viewForward(controller, 1);
 
     // February
-    controller.waitForElement(lookupEventBox("month", EVENT_BOX, 2, 7, null, EVENTPATH));
-    controller.assertNode(lookupEventBox("month", EVENT_BOX, 4, 7, null, EVENTPATH));
+    controller.waitForElement(lookupEventBox("month", CANVAS_BOX, 2, 7, null, EVENTPATH));
+    controller.assertNode(lookupEventBox("month", CANVAS_BOX, 4, 7, null, EVENTPATH));
     viewForward(controller, 1);
 
     // March
-    controller.waitForElement(lookupEventBox("month", EVENT_BOX, 2, 7, null, EVENTPATH));
-    controller.assertNode(lookupEventBox("month", EVENT_BOX, 4, 7, null, EVENTPATH));
+    controller.waitForElement(lookupEventBox("month", CANVAS_BOX, 2, 7, null, EVENTPATH));
+    controller.assertNode(lookupEventBox("month", CANVAS_BOX, 4, 7, null, EVENTPATH));
 
     // Delete event.
-    let box = lookupEventBox("month", EVENT_BOX, 4, 7, null, EVENTPATH);
+    let box = lookupEventBox("month", CANVAS_BOX, 4, 7, null, EVENTPATH);
     controller.click(box);
     handleOccurrencePrompt(controller, box, "delete", true);
     controller.waitForElementNotPresent(box);
 }
 
 function teardownModule(module) {
     deleteCalendars(controller, CALENDARNAME);
     closeAllEventDialogs();
--- a/calendar/test/mozmill/cal-recurrence/testDailyRecurrence.js
+++ b/calendar/test/mozmill/cal-recurrence/testDailyRecurrence.js
@@ -76,43 +76,43 @@ function testDailyRecurrence() {
         controller.waitForElement(lookupEventBox("week", EVENT_BOX, 2, day, null, EVENTPATH));
     }
 
     // Check multiweek view for 4 weeks.
     switchToView(controller, "multiweek");
     goToDate(controller, 2009, 1, 1);
 
     for (let day = 5; day <= 7; day++) {
-        controller.waitForElement(lookupEventBox("multiweek", EVENT_BOX, 1, day, null, EVENTPATH));
+        controller.waitForElement(lookupEventBox("multiweek", CANVAS_BOX, 1, day, null, EVENTPATH));
     }
 
     for (let week = 2; week <= 4; week++) {
         for (let day = 1; day <= 7; day++) {
             controller.waitForElement(
-                lookupEventBox("multiweek", EVENT_BOX, week, day, null, EVENTPATH)
+                lookupEventBox("multiweek", CANVAS_BOX, week, day, null, EVENTPATH)
             );
         }
     }
 
     // Check month view for all 5 weeks.
     switchToView(controller, "month");
     goToDate(controller, 2009, 1, 1);
 
     for (let day = 5; day <= 7; day++) {
-        controller.waitForElement(lookupEventBox("month", EVENT_BOX, 1, day, null, EVENTPATH));
+        controller.waitForElement(lookupEventBox("month", CANVAS_BOX, 1, day, null, EVENTPATH));
     }
 
     for (let week = 2; week <= 5; week++) {
         for (let day = 1; day <= 7; day++) {
-            controller.assertNode(lookupEventBox("month", EVENT_BOX, week, day, null, EVENTPATH));
+            controller.assertNode(lookupEventBox("month", CANVAS_BOX, week, day, null, EVENTPATH));
         }
     }
 
     // Delete 3rd January occurrence.
-    let saturday = lookupEventBox("month", EVENT_BOX, 1, 7, null, EVENTPATH);
+    let saturday = lookupEventBox("month", CANVAS_BOX, 1, 7, null, EVENTPATH);
     controller.click(saturday);
     handleOccurrencePrompt(controller, saturday, "delete", false);
 
     // Verify in all views.
     controller.waitForElementNotPresent(saturday);
 
     switchToView(controller, "multiweek");
     controller.assertNodeNotExist(lookupEventBox("multiweek", EVENT_BOX, 1, 7, null, EVENTPATH));
@@ -179,17 +179,17 @@ function testDailyRecurrence() {
     for (let i = 1; i <= 5; i++) {
         controller.waitForElementNotPresent(
             lookupEventBox("month", EVENT_BOX, i, 1, null, EVENTPATH)
         );
         controller.assertNodeNotExist(lookupEventBox("month", EVENT_BOX, i, 7, null, EVENTPATH));
     }
 
     // Delete event.
-    day = lookupEventBox("month", EVENT_BOX, 1, 5, null, EVENTPATH);
+    day = lookupEventBox("month", CANVAS_BOX, 1, 5, null, EVENTPATH);
     controller.click(day);
     handleOccurrencePrompt(controller, day, "delete", true);
     controller.waitForElementNotPresent(day);
 }
 
 function teardownModule(module) {
     deleteCalendars(controller, CALENDARNAME);
     closeAllEventDialogs();
--- a/calendar/test/mozmill/cal-recurrence/testLastDayOfMonthRecurrence.js
+++ b/calendar/test/mozmill/cal-recurrence/testLastDayOfMonthRecurrence.js
@@ -90,23 +90,23 @@ function testLastDayOfMonthRecurrence() 
 
         // week view
         switchToView(controller, "week");
         controller.waitForElement(lookupEventBox("week", EVENT_BOX, null, column, null, EVENTPATH));
 
         // multiweek view
         switchToView(controller, "multiweek");
         controller.waitForElement(
-            lookupEventBox("multiweek", EVENT_BOX, 1, column, null, EVENTPATH)
+            lookupEventBox("multiweek", CANVAS_BOX, 1, column, null, EVENTPATH)
         );
 
         // month view
         switchToView(controller, "month");
         controller.waitForElement(
-            lookupEventBox("month", EVENT_BOX, correctRow, column, null, EVENTPATH)
+            lookupEventBox("month", CANVAS_BOX, correctRow, column, null, EVENTPATH)
         );
     }
 
     // Delete event.
     goToDate(controller, checkingData[0][0], checkingData[0][1], checkingData[0][2]);
     switchToView(controller, "day");
     let box = lookupEventBox("day", EVENT_BOX, null, 1, null, EVENTPATH);
     controller.waitThenClick(box);
--- a/calendar/test/mozmill/cal-recurrence/testWeeklyNRecurrence.js
+++ b/calendar/test/mozmill/cal-recurrence/testWeeklyNRecurrence.js
@@ -97,17 +97,17 @@ function testWeeklyNRecurrence() {
     switchToView(controller, "multiweek");
     checkMultiWeekView("multiweek");
 
     // Check month view.
     switchToView(controller, "month");
     checkMultiWeekView("month");
 
     // Delete event.
-    box = lookupEventBox("month", EVENT_BOX, 2, 2, null, EVENTPATH);
+    box = lookupEventBox("month", CANVAS_BOX, 2, 2, null, EVENTPATH);
     controller.click(box);
     handleOccurrencePrompt(controller, box, "delete", true);
     controller.waitForElementNotPresent(box);
 }
 
 function setRecurrence(recurrence) {
     let { sleep: recsleep, lookup: reclookup, eid: recid } = helpersForController(recurrence);
 
@@ -143,19 +143,19 @@ function setRecurrence(recurrence) {
 }
 
 function checkMultiWeekView(view) {
     // In month view event starts from 2nd row.
     let week = view == "month" ? 2 : 1;
 
     // Monday, Tuesday, Wednesday, Thursday
     for (let i = 2; i < 6; i++) {
-        controller.assertNode(lookupEventBox(view, EVENT_BOX, week, i, null, EVENTPATH));
+        controller.assertNode(lookupEventBox(view, CANVAS_BOX, week, i, null, EVENTPATH));
     }
 
     // Saturday
-    controller.assertNodeNotExist(lookupEventBox(view, EVENT_BOX, week, 7, null, EVENTPATH));
+    controller.assertNodeNotExist(lookupEventBox(view, CANVAS_BOX, week, 7, null, EVENTPATH));
 }
 
 function teardownModule(module) {
     deleteCalendars(controller, CALENDARNAME);
     closeAllEventDialogs();
 }
--- a/calendar/test/mozmill/cal-recurrence/testWeeklyUntilRecurrence.js
+++ b/calendar/test/mozmill/cal-recurrence/testWeeklyUntilRecurrence.js
@@ -121,17 +121,17 @@ function testWeeklyUntilRecurrence() {
     checkMultiWeekView("multiweek");
 
     // Check month view.
     switchToView(controller, "month");
     goToDate(controller, 2009, 1, 5);
     checkMultiWeekView("month");
 
     // Delete event.
-    box = lookupEventBox("month", EVENT_BOX, 2, 2, null, EVENTPATH);
+    box = lookupEventBox("month", CANVAS_BOX, 2, 2, null, EVENTPATH);
     controller.click(box);
     handleOccurrencePrompt(controller, box, "delete", true);
     controller.waitForElementNotPresent(box);
 }
 
 function setRecurrence(recurrence) {
     let { sleep: recsleep, lookup: reclookup, eid: recid } = helpersForController(recurrence);
 
@@ -178,25 +178,25 @@ function setRecurrence(recurrence) {
     recurrence.click(reclookup(REC_DLG_ACCEPT));
 }
 
 function checkMultiWeekView(view) {
     let startWeek = view == "month" ? 2 : 1;
 
     for (let week = startWeek; week < startWeek + 3; week++) {
         // Monday
-        controller.waitForElement(lookupEventBox(view, EVENT_BOX, week, 2, null, EVENTPATH));
+        controller.waitForElement(lookupEventBox(view, CANVAS_BOX, week, 2, null, EVENTPATH));
         // Wednesday
-        controller.assertNode(lookupEventBox(view, EVENT_BOX, week, 4, null, EVENTPATH));
+        controller.assertNode(lookupEventBox(view, CANVAS_BOX, week, 4, null, EVENTPATH));
         // Friday
-        controller.assertNode(lookupEventBox(view, EVENT_BOX, week, 6, null, EVENTPATH));
+        controller.assertNode(lookupEventBox(view, CANVAS_BOX, week, 6, null, EVENTPATH));
     }
 
     // Monday, last occurrence
-    controller.assertNode(lookupEventBox(view, EVENT_BOX, startWeek + 3, 2, null, EVENTPATH));
+    controller.assertNode(lookupEventBox(view, CANVAS_BOX, startWeek + 3, 2, null, EVENTPATH));
 
     // Wednesday
     controller.assertNodeNotExist(
         lookupEventBox(view, EVENT_BOX, startWeek + 3, 4, null, EVENTPATH)
     );
 }
 
 function teardownModule(module) {
--- a/calendar/test/mozmill/cal-recurrence/testWeeklyWithExceptionRecurrence.js
+++ b/calendar/test/mozmill/cal-recurrence/testWeeklyWithExceptionRecurrence.js
@@ -262,26 +262,26 @@ function checkMultiWeekView(view) {
     // Wait for the first items, then check the ones not to be present.
     // ASssert exactly two.
     controller.waitForElement(lookupEventBox(view, EVENT_BOX, startWeek, 3, null, "/[0]"));
     assertNodeLookup(view, EVENT_BOX, startWeek, 3, null, "/[1]");
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek, 3, null, "/[2]");
     // Then check no item on the 5th.
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek, 2, null, EVENTPATH);
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek, 3, null, "/[2]");
-    assertNodeLookup(view, EVENT_BOX, startWeek, 4, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek, 4, null, EVENTPATH);
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek, 5, null, EVENTPATH);
-    assertNodeLookup(view, EVENT_BOX, startWeek, 6, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek, 6, null, EVENTPATH);
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek, 7, null, EVENTPATH);
 
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek + 1, 1, null, EVENTPATH);
-    assertNodeLookup(view, EVENT_BOX, startWeek + 1, 2, null, EVENTPATH);
-    assertNodeLookup(view, EVENT_BOX, startWeek + 1, 3, null, EVENTPATH);
-    assertNodeLookup(view, EVENT_BOX, startWeek + 1, 4, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek + 1, 2, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek + 1, 3, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek + 1, 4, null, EVENTPATH);
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek + 1, 5, null, EVENTPATH);
-    assertNodeLookup(view, EVENT_BOX, startWeek + 1, 6, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek + 1, 6, null, EVENTPATH);
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek + 1, 7, null, EVENTPATH);
 }
 
 function teardownModule(module) {
     deleteCalendars(controller, CALENDARNAME);
     closeAllEventDialogs();
 }
--- a/calendar/test/mozmill/eventDialog/testEventDialog.js
+++ b/calendar/test/mozmill/eventDialog/testEventDialog.js
@@ -170,63 +170,63 @@ function testEventDialog() {
         let { eid: alarmid } = helpersForController(alarm);
         alarm.waitThenClick(alarmid("alarm-dismiss-all-button"));
     });
     wait_for_modal_dialog("Calendar:AlarmWindow", TIMEOUT_MODAL_DIALOG);
 
     // Verify event and alarm icon visible until endDate (3 full rows) and check tooltip.
     for (let row = 1; row <= 3; row++) {
         for (let col = 1; col <= 7; col++) {
-            controller.waitForElement(lookupEventBox("month", EVENT_BOX, row, col, null, EVENTPATH));
+            controller.waitForElement(lookupEventBox("month", CANVAS_BOX, row, col, null, EVENTPATH));
             checkAlarmIcon(controller, "month", row, col);
             checkTooltip(row, col, startTime, endTime);
         }
     }
     controller.assertNodeNotExist(lookupEventBox("month", EVENT_BOX, 4, 1, null, EVENTPATH));
 
     // Delete and verify deleted 6th col in row 1.
-    controller.click(lookupEventBox("month", EVENT_BOX, 1, 6, null, EVENTPATH));
+    controller.click(lookupEventBox("month", CANVAS_BOX, 1, 6, null, EVENTPATH));
     let elemToDelete = eid("month-view");
     handleOccurrencePrompt(controller, elemToDelete, "delete", false);
-    controller.waitForElementNotPresent(lookupEventBox("month", EVENT_BOX, 1, 6, null, EVENTPATH));
+    controller.waitForElementNotPresent(lookupEventBox("month", CANVAS_BOX, 1, 6, null, EVENTPATH));
 
     // Verify all others still exist.
     for (let col = 1; col <= 5; col++) {
-        controller.assertNode(lookupEventBox("month", EVENT_BOX, 1, col, null, EVENTPATH));
+        controller.assertNode(lookupEventBox("month", CANVAS_BOX, 1, col, null, EVENTPATH));
     }
-    controller.assertNode(lookupEventBox("month", EVENT_BOX, 1, 7, null, EVENTPATH));
+    controller.assertNode(lookupEventBox("month", CANVAS_BOX, 1, 7, null, EVENTPATH));
 
     for (let row = 2; row <= 3; row++) {
         for (let col = 1; col <= 7; col++) {
-            controller.assertNode(lookupEventBox("month", EVENT_BOX, row, col, null, EVENTPATH));
+            controller.assertNode(lookupEventBox("month", CANVAS_BOX, row, col, null, EVENTPATH));
         }
     }
 
     // Delete series by deleting last item in row 1 and confirming to delete all.
-    controller.click(lookupEventBox("month", EVENT_BOX, 1, 7, null, EVENTPATH));
+    controller.click(lookupEventBox("month", CANVAS_BOX, 1, 7, null, EVENTPATH));
     elemToDelete = eid("month-view");
     handleOccurrencePrompt(controller, elemToDelete, "delete", true);
 
     // Verify all deleted.
     controller.waitForElementNotPresent(lookupEventBox("month", EVENT_BOX, 1, 5, null, EVENTPATH));
-    controller.assertNodeNotExist(lookupEventBox("month", EVENT_BOX, 1, 6, null, EVENTPATH));
-    controller.assertNodeNotExist(lookupEventBox("month", EVENT_BOX, 1, 7, null, EVENTPATH));
+    controller.assertNodeNotExist(lookupEventBox("month", CANVAS_BOX, 1, 6, null, EVENTPATH));
+    controller.assertNodeNotExist(lookupEventBox("month", CANVAS_BOX, 1, 7, null, EVENTPATH));
 
     for (let row = 2; row <= 3; row++) {
         for (let col = 1; col <= 7; col++) {
             controller.assertNodeNotExist(lookupEventBox(
-                "month", EVENT_BOX, row, col, null, EVENTPATH
+                "month", CANVAS_BOX, row, col, null, EVENTPATH
             ));
         }
     }
 }
 testEventDialog.EXCLUDED_PLATFORMS = ["darwin"]; // Bug 1513181
 
 function checkTooltip(row, col, startTime, endTime) {
-    let item = lookupEventBox("month", null, row, col, null, EVENTPATH);
+    let item = lookupEventBox("month", CANVAS_BOX, row, col, null, EVENTPATH);
 
     let toolTip = '/id("messengerWindow")/id("calendar-popupset")/id("itemTooltip")';
     let toolTipNode = lookup(toolTip).getNode();
     toolTipNode.ownerGlobal.onMouseOverItem({ currentTarget: item.getNode() });
 
     // Check title.
     let toolTipGrid = toolTip + '/{"class":"tooltipBox"}/{"class":"tooltipHeaderGrid"}/';
     let eventName = lookup(`${toolTipGrid}/[1]/[0]/[1]`);
--- a/calendar/test/mozmill/recurrenceRotated/testAnnualRecurrence.js
+++ b/calendar/test/mozmill/recurrenceRotated/testAnnualRecurrence.js
@@ -1,28 +1,29 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 var MODULE_NAME = "testAnnualRecurrenceRotated";
 var RELATIVE_ROOT = "../shared-modules";
 var MODULE_REQUIRES = ["calendar-utils"];
 
-var CALENDARNAME, EVENTPATH, ALLDAY;
+var CALENDARNAME, EVENTPATH, CANVAS_BOX, ALLDAY;
 var helpersForController, handleOccurrencePrompt, switchToView, goToDate;
 var invokeEventDialog, closeAllEventDialogs, deleteCalendars, createCalendar, menulistSelect;
 
 const STARTYEAR = 1950;
 const EPOCH = 1970;
 
 function setupModule(module) {
     controller = mozmill.getMail3PaneController();
     ({
         CALENDARNAME,
         EVENTPATH,
+        CANVAS_BOX,
         ALLDAY,
         helpersForController,
         handleOccurrencePrompt,
         switchToView,
         goToDate,
         invokeEventDialog,
         closeAllEventDialogs,
         deleteCalendars,
@@ -61,21 +62,21 @@ function testAnnualRecurrence() {
         controller.waitForElement(lookupEventBox("day", ALLDAY, null, 1, null, EVENTPATH));
 
         // week view
         switchToView(controller, "week");
         controller.waitForElement(lookupEventBox("week", ALLDAY, null, column, null, EVENTPATH));
 
         // multiweek view
         switchToView(controller, "multiweek");
-        controller.waitForElement(lookupEventBox("multiweek", ALLDAY, 1, column, null, EVENTPATH));
+        controller.waitForElement(lookupEventBox("multiweek", CANVAS_BOX, 1, column, null, EVENTPATH));
 
         // month view
         switchToView(controller, "month");
-        controller.waitForElement(lookupEventBox("month", ALLDAY, 1, column, null, EVENTPATH));
+        controller.waitForElement(lookupEventBox("month", CANVAS_BOX, 1, column, null, EVENTPATH));
     }
 
     // Delete event.
     goToDate(controller, checkYears[0], 1, 1);
     switchToView(controller, "day");
     const boxPath = getEventBoxPath("day", ALLDAY, null, 1, null) + EVENTPATH;
     const box = lookup(boxPath);
     controller.click(box);
--- a/calendar/test/mozmill/recurrenceRotated/testBiweeklyRecurrence.js
+++ b/calendar/test/mozmill/recurrenceRotated/testBiweeklyRecurrence.js
@@ -69,43 +69,43 @@ function testBiweeklyRecurrence() {
 
     // Check multiweek view.
     switchToView(controller, "multiweek");
     goToDate(controller, 2009, 1, 31);
 
     // Always two occurrences in view, 1st and 3rd or 2nd and 4th week.
     for (let i = 0; i < 5; i++) {
         controller.waitForElement(
-            lookupEventBox("multiweek", EVENT_BOX, i % 2 + 1, 7, null, EVENTPATH)
+            lookupEventBox("multiweek", CANVAS_BOX, i % 2 + 1, 7, null, EVENTPATH)
         );
         controller.assertNode(
-            lookupEventBox("multiweek", EVENT_BOX, i % 2 + 3, 7, null, EVENTPATH)
+            lookupEventBox("multiweek", CANVAS_BOX, i % 2 + 3, 7, null, EVENTPATH)
         );
         viewForward(controller, 1);
     }
 
     // Check month view.
     switchToView(controller, "month");
     goToDate(controller, 2009, 1, 31);
 
     // January
-    controller.waitForElement(lookupEventBox("month", EVENT_BOX, 5, 7, null, EVENTPATH));
+    controller.waitForElement(lookupEventBox("month", CANVAS_BOX, 5, 7, null, EVENTPATH));
     viewForward(controller, 1);
 
     // February
-    controller.waitForElement(lookupEventBox("month", EVENT_BOX, 2, 7, null, EVENTPATH));
-    controller.assertNode(lookupEventBox("month", EVENT_BOX, 4, 7, null, EVENTPATH));
+    controller.waitForElement(lookupEventBox("month", CANVAS_BOX, 2, 7, null, EVENTPATH));
+    controller.assertNode(lookupEventBox("month", CANVAS_BOX, 4, 7, null, EVENTPATH));
     viewForward(controller, 1);
 
     // March
-    controller.waitForElement(lookupEventBox("month", EVENT_BOX, 2, 7, null, EVENTPATH));
-    controller.assertNode(lookupEventBox("month", EVENT_BOX, 4, 7, null, EVENTPATH));
+    controller.waitForElement(lookupEventBox("month", CANVAS_BOX, 2, 7, null, EVENTPATH));
+    controller.assertNode(lookupEventBox("month", CANVAS_BOX, 4, 7, null, EVENTPATH));
 
     // Delete event.
-    let box = lookupEventBox("month", EVENT_BOX, 4, 7, null, EVENTPATH);
+    let box = lookupEventBox("month", CANVAS_BOX, 4, 7, null, EVENTPATH);
     controller.click(box);
     handleOccurrencePrompt(controller, box, "delete", true);
     controller.waitForElementNotPresent(box);
 }
 
 function teardownModule(module) {
     deleteCalendars(controller, CALENDARNAME);
     // Reset view.
--- a/calendar/test/mozmill/recurrenceRotated/testDailyRecurrence.js
+++ b/calendar/test/mozmill/recurrenceRotated/testDailyRecurrence.js
@@ -81,50 +81,50 @@ function testDailyRecurrence() {
         controller.waitForElement(lookupEventBox("week", EVENT_BOX, 2, day, null, EVENTPATH));
     }
 
     // Check multiweek view for 4 weeks.
     switchToView(controller, "multiweek");
     goToDate(controller, 2009, 1, 1);
 
     for (let day = 5; day <= 7; day++) {
-        controller.waitForElement(lookupEventBox("multiweek", EVENT_BOX, 1, day, null, EVENTPATH));
+        controller.waitForElement(lookupEventBox("multiweek", CANVAS_BOX, 1, day, null, EVENTPATH));
     }
 
     for (let week = 2; week <= 4; week++) {
         for (let day = 1; day <= 7; day++) {
             controller.waitForElement(
-                lookupEventBox("multiweek", EVENT_BOX, week, day, null, EVENTPATH)
+                lookupEventBox("multiweek", CANVAS_BOX, week, day, null, EVENTPATH)
             );
         }
     }
     // Check month view for all 5 weeks.
     switchToView(controller, "month");
     goToDate(controller, 2009, 1, 1);
 
     for (let day = 5; day <= 7; day++) {
-        controller.waitForElement(lookupEventBox("month", EVENT_BOX, 1, day, null, EVENTPATH));
+        controller.waitForElement(lookupEventBox("month", CANVAS_BOX, 1, day, null, EVENTPATH));
     }
 
     for (let week = 2; week <= 5; week++) {
         for (let day = 1; day <= 7; day++) {
-            controller.assertNode(lookupEventBox("month", EVENT_BOX, week, day, null, EVENTPATH));
+            controller.assertNode(lookupEventBox("month", CANVAS_BOX, week, day, null, EVENTPATH));
         }
     }
 
     // Delete 3rd January occurrence.
-    let saturday = lookupEventBox("month", EVENT_BOX, 1, 7, null, EVENTPATH);
+    let saturday = lookupEventBox("month", CANVAS_BOX, 1, 7, null, EVENTPATH);
     controller.click(saturday);
     handleOccurrencePrompt(controller, saturday, "delete", false);
 
     // Verify in all views.
     controller.waitForElementNotPresent(saturday);
 
     switchToView(controller, "multiweek");
-    controller.assertNodeNotExist(lookupEventBox("multiweek", EVENT_BOX, 1, 7, null, EVENTPATH));
+    controller.assertNodeNotExist(lookupEventBox("multiweek", CANVAS_BOX, 1, 7, null, EVENTPATH));
 
     switchToView(controller, "week");
     controller.assertNodeNotExist(lookupEventBox("week", EVENT_BOX, null, 7, null, EVENTPATH));
 
     switchToView(controller, "day");
     controller.assertNodeNotExist(lookupEventBox("day", EVENT_BOX, null, 1, null, EVENTPATH));
 
     // Go to previous day to edit event to occur only on weekdays.
@@ -164,36 +164,36 @@ function testDailyRecurrence() {
     }
 
     // Check multiweek view for 4 weeks.
     switchToView(controller, "multiweek");
     goToDate(controller, 2009, 1, 1);
 
     for (let i = 1; i <= 4; i++) {
         controller.waitForElementNotPresent(
-            lookupEventBox("multiweek", EVENT_BOX, i, 1, null, EVENTPATH)
+            lookupEventBox("multiweek", CANVAS_BOX, i, 1, null, EVENTPATH)
         );
         controller.assertNodeNotExist(
-            lookupEventBox("multiweek", EVENT_BOX, i, 7, null, EVENTPATH)
+            lookupEventBox("multiweek", CANVAS_BOX, i, 7, null, EVENTPATH)
         );
     }
 
     // Check month view for all 5 weeks.
     switchToView(controller, "month");
     goToDate(controller, 2009, 1, 1);
 
     for (let i = 1; i <= 5; i++) {
         controller.waitForElementNotPresent(
-            lookupEventBox("month", EVENT_BOX, i, 1, null, EVENTPATH)
+            lookupEventBox("month", CANVAS_BOX, i, 1, null, EVENTPATH)
         );
-        controller.assertNodeNotExist(lookupEventBox("month", EVENT_BOX, i, 7, null, EVENTPATH));
+        controller.assertNodeNotExist(lookupEventBox("month", CANVAS_BOX, i, 7, null, EVENTPATH));
     }
 
     // Delete event.
-    day = lookupEventBox("month", EVENT_BOX, 1, 5, null, EVENTPATH);
+    day = lookupEventBox("month", CANVAS_BOX, 1, 5, null, EVENTPATH);
     controller.click(day);
     handleOccurrencePrompt(controller, day, "delete", true);
     controller.waitForElementNotPresent(day);
 }
 
 function teardownModule(module) {
     deleteCalendars(controller, CALENDARNAME);
     // Reset view.
--- a/calendar/test/mozmill/recurrenceRotated/testLastDayOfMonthRecurrence.js
+++ b/calendar/test/mozmill/recurrenceRotated/testLastDayOfMonthRecurrence.js
@@ -94,23 +94,23 @@ function testLastDayOfMonthRecurrence() 
 
         // week view
         switchToView(controller, "week");
         controller.waitForElement(lookupEventBox("week", EVENT_BOX, null, column, null, EVENTPATH));
 
         // multiweek view
         switchToView(controller, "multiweek");
         controller.waitForElement(
-            lookupEventBox("multiweek", EVENT_BOX, 1, column, null, EVENTPATH)
+            lookupEventBox("multiweek", CANVAS_BOX, 1, column, null, EVENTPATH)
         );
 
         // month view
         switchToView(controller, "month");
         controller.waitForElement(
-            lookupEventBox("month", EVENT_BOX, correctRow, column, null, EVENTPATH)
+            lookupEventBox("month", CANVAS_BOX, correctRow, column, null, EVENTPATH)
         );
     }
 
     // Delete event.
     goToDate(controller, checkingData[0][0], checkingData[0][1], checkingData[0][2]);
     switchToView(controller, "day");
     let box = lookupEventBox("day", EVENT_BOX, null, 1, null, EVENTPATH);
     controller.waitThenClick(box);
@@ -136,14 +136,15 @@ function setRecurrence(recurrence) {
 
     // Close dialog.
     recurrence.click(reclookup(REC_DLG_ACCEPT));
 }
 
 function teardownModule(module) {
     deleteCalendars(controller, CALENDARNAME);
     // Reset view.
+    switchToView(controller, "day");
     if (eid("day-view").getNode().orient == "horizontal") {
         controller.mainMenu.click("#ltnViewRotated");
     }
     controller.waitFor(() => eid("day-view").getNode().orient == "vertical");
     closeAllEventDialogs();
 }
--- a/calendar/test/mozmill/recurrenceRotated/testWeeklyNRecurrence.js
+++ b/calendar/test/mozmill/recurrenceRotated/testWeeklyNRecurrence.js
@@ -100,17 +100,17 @@ function testWeeklyNRecurrence() {
     switchToView(controller, "multiweek");
     checkMultiWeekView("multiweek");
 
     // Check month view.
     switchToView(controller, "month");
     checkMultiWeekView("month");
 
     // Delete event.
-    box = lookupEventBox("month", EVENT_BOX, 2, 2, null, EVENTPATH);
+    box = lookupEventBox("month", CANVAS_BOX, 2, 2, null, EVENTPATH);
     controller.click(box);
     handleOccurrencePrompt(controller, box, "delete", true);
     controller.waitForElementNotPresent(box);
 }
 
 function setRecurrence(recurrence) {
     let { sleep: recsleep, lookup: reclookup, eid: recid } = helpersForController(recurrence);
 
@@ -146,21 +146,21 @@ function setRecurrence(recurrence) {
 }
 
 function checkMultiWeekView(view) {
     // In month view event starts from 2nd row.
     let week = view == "month" ? 2 : 1;
 
     // Monday, Tuesday, Wednesday, Thursday
     for (let i = 2; i < 6; i++) {
-        controller.assertNode(lookupEventBox(view, EVENT_BOX, week, i, null, EVENTPATH));
+        controller.assertNode(lookupEventBox(view, CANVAS_BOX, week, i, null, EVENTPATH));
     }
 
     // Saturday
-    controller.assertNodeNotExist(lookupEventBox(view, EVENT_BOX, week, 7, null, EVENTPATH));
+    controller.assertNodeNotExist(lookupEventBox(view, CANVAS_BOX, week, 7, null, EVENTPATH));
 }
 
 function teardownModule(module) {
     deleteCalendars(controller, CALENDARNAME);
     // Reset view.
     switchToView(controller, "day");
     if (eid("day-view").getNode().orient == "horizontal") {
         controller.mainMenu.click("#ltnViewRotated");
--- a/calendar/test/mozmill/recurrenceRotated/testWeeklyUntilRecurrence.js
+++ b/calendar/test/mozmill/recurrenceRotated/testWeeklyUntilRecurrence.js
@@ -124,17 +124,17 @@ function testWeeklyUntilRecurrence() {
     checkMultiWeekView("multiweek");
 
     // Check month view.
     switchToView(controller, "month");
     goToDate(controller, 2009, 1, 5);
     checkMultiWeekView("month");
 
     // Delete event.
-    box = lookupEventBox("month", EVENT_BOX, 2, 2, null, EVENTPATH);
+    box = lookupEventBox("month", CANVAS_BOX, 2, 2, null, EVENTPATH);
     controller.click(box);
     handleOccurrencePrompt(controller, box, "delete", true);
     controller.waitForElementNotPresent(box);
 }
 
 function setRecurrence(recurrence) {
     let { sleep: recsleep, lookup: reclookup, eid: recid } = helpersForController(recurrence);
 
@@ -181,29 +181,29 @@ function setRecurrence(recurrence) {
     recurrence.click(reclookup(REC_DLG_ACCEPT));
 }
 
 function checkMultiWeekView(view) {
     let startWeek = view == "month" ? 2 : 1;
 
     for (let week = startWeek; week < startWeek + 3; week++) {
         // Monday
-        controller.waitForElement(lookupEventBox(view, EVENT_BOX, week, 2, null, EVENTPATH));
+        controller.waitForElement(lookupEventBox(view, CANVAS_BOX, week, 2, null, EVENTPATH));
         // Wednesday
-        controller.assertNode(lookupEventBox(view, EVENT_BOX, week, 4, null, EVENTPATH));
+        controller.assertNode(lookupEventBox(view, CANVAS_BOX, week, 4, null, EVENTPATH));
         // Friday
-        controller.assertNode(lookupEventBox(view, EVENT_BOX, week, 6, null, EVENTPATH));
+        controller.assertNode(lookupEventBox(view, CANVAS_BOX, week, 6, null, EVENTPATH));
     }
 
     // Monday, last occurrence
-    controller.assertNode(lookupEventBox(view, EVENT_BOX, startWeek + 3, 2, null, EVENTPATH));
+    controller.assertNode(lookupEventBox(view, CANVAS_BOX, startWeek + 3, 2, null, EVENTPATH));
 
     // Wednesday
     controller.assertNodeNotExist(
-        lookupEventBox(view, EVENT_BOX, startWeek + 3, 4, null, EVENTPATH)
+        lookupEventBox(view, CANVAS_BOX, startWeek + 3, 4, null, EVENTPATH)
     );
 }
 
 function teardownModule(module) {
     deleteCalendars(controller, CALENDARNAME);
     // Reset view.
     switchToView(controller, "day");
     if (eid("day-view").getNode().orient == "horizontal") {
--- a/calendar/test/mozmill/recurrenceRotated/testWeeklyWithExceptionRecurrence.js
+++ b/calendar/test/mozmill/recurrenceRotated/testWeeklyWithExceptionRecurrence.js
@@ -260,37 +260,38 @@ function checkMultiWeekView(view) {
     };
     let assertNodeNotExistLookup = (...args) => {
         return controller.assertNodeNotExist(lookupEventBox(...args));
     };
 
     // Wait for the first items, then check the ones not to be present.
     // Assert exactly two.
     controller.waitForElement(lookupEventBox(view, EVENT_BOX, startWeek, 3, null, "/[0]"));
-    assertNodeLookup(view, EVENT_BOX, startWeek, 3, null, "/[1]");
+    assertNodeLookup(view, CANVAS_BOX, startWeek, 3, null, "/[1]");
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek, 3, null, "/[2]");
     // Then check no item on the 5th.
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek, 2, null, EVENTPATH);
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek, 3, null, "/[2]");
-    assertNodeLookup(view, EVENT_BOX, startWeek, 4, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek, 4, null, EVENTPATH);
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek, 5, null, EVENTPATH);
-    assertNodeLookup(view, EVENT_BOX, startWeek, 6, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek, 6, null, EVENTPATH);
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek, 7, null, EVENTPATH);
 
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek + 1, 1, null, EVENTPATH);
-    assertNodeLookup(view, EVENT_BOX, startWeek + 1, 2, null, EVENTPATH);
-    assertNodeLookup(view, EVENT_BOX, startWeek + 1, 3, null, EVENTPATH);
-    assertNodeLookup(view, EVENT_BOX, startWeek + 1, 4, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek + 1, 2, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek + 1, 3, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek + 1, 4, null, EVENTPATH);
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek + 1, 5, null, EVENTPATH);
-    assertNodeLookup(view, EVENT_BOX, startWeek + 1, 6, null, EVENTPATH);
+    assertNodeLookup(view, CANVAS_BOX, startWeek + 1, 6, null, EVENTPATH);
     assertNodeNotExistLookup(view, EVENT_BOX, startWeek + 1, 7, null, EVENTPATH);
 }
 
 function teardownModule(module) {
     deleteCalendars(controller, CALENDARNAME);
 
     // Reset view.
+    switchToView(controller, "day");
     if (eid("day-view").getNode().orient == "horizontal") {
         controller.mainMenu.click("#ltnViewRotated");
     }
     controller.waitFor(() => eid("day-view").getNode().orient == "vertical");
     closeAllEventDialogs();
 }
--- a/calendar/test/mozmill/shared-modules/test-calendar-utils.js
+++ b/calendar/test/mozmill/shared-modules/test-calendar-utils.js
@@ -363,17 +363,17 @@ function getEventBoxPath(controller, vie
     } else {
         path += `
             /{"class":"mainbox"}/{"class":"monthgrid"}/
             {"class":"monthgridrows"}/[${row - 1}]/[${column - 1}]
         `;
 
         if (option == CANVAS_BOX) {
             path += `
-                /anon({"anonid":"day-items"})
+                /{"class":"calendar-day-items"}
             `;
         }
 
         return path;
     }
 }
 
 /**
@@ -402,17 +402,17 @@ function getEventDetails(view) {
  * Checks if Alarm-Icon is shown on a given Event-Box.
  *
  * @param view          day, week, multiweek or month
  * @param row           Only used in multiweek and month view, 1-based index of a row.
  * @param column        1-based index of a column
  */
 function checkAlarmIcon(controller, view, row, column) {
     let { lookupEventBox } = helpersForController(controller);
-    controller.assertNode(lookupEventBox(view, EVENT_BOX, row, column, null, `
+    controller.assertNode(lookupEventBox(view, CANVAS_BOX, row, column, null, `
         ${EVENTPATH}/${getEventDetails([view])}/${ALARM_ICON_PATH}
     `));
 }
 
 /**
  * Moves the view n times forward.
  *
  * @param controller    Mozmill window controller
--- a/calendar/test/mozmill/views/testMonthView.js
+++ b/calendar/test/mozmill/views/testMonthView.js
@@ -3,30 +3,29 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 var MODULE_NAME = "testMonthView";
 var RELATIVE_ROOT = "../shared-modules";
 var MODULE_REQUIRES = ["calendar-utils", "item-editing-helpers"];
 
 var { cal } = ChromeUtils.import("resource://calendar/modules/calUtils.jsm");
 
-var CALENDARNAME, EVENT_BOX, CANVAS_BOX, MONTH_VIEW, EVENTPATH;
+var CALENDARNAME, CANVAS_BOX, MONTH_VIEW, EVENTPATH;
 var helpersForController, switchToView, invokeEventDialog, getEventDetails, createCalendar;
 var closeAllEventDialogs, deleteCalendars, goToDate, lookupEventBox;
 var helpersForEditUI, setData;
 
 const TITLE1 = "Month View Event";
 const TITLE2 = "Month View Event Changed";
 const DESC = "Month View Event Description";
 
 function setupModule(module) {
     controller = mozmill.getMail3PaneController();
     ({
         CALENDARNAME,
-        EVENT_BOX,
         CANVAS_BOX,
         MONTH_VIEW,
         EVENTPATH,
         helpersForController,
         switchToView,
         invokeEventDialog,
         getEventDetails,
         createCalendar,
@@ -87,27 +86,27 @@ function testMonthView() {
             calendar: CALENDARNAME
         });
 
         // save
         event.click(eventid("button-saveandclose"));
     });
 
     // If it was created successfully, it can be opened.
-    eventBox = lookupEventBox("month", EVENT_BOX, 1, 5, null, EVENTPATH);
+    eventBox = lookupEventBox("month", CANVAS_BOX, 1, 5, null, EVENTPATH);
     invokeEventDialog(controller, eventBox, (event, iframe) => {
         let { eid: eventid } = helpersForController(event);
 
         // Change title and save changes.
         setData(event, iframe, { title: TITLE2 });
         event.click(eventid("button-saveandclose"));
     });
 
     // Check if name was saved.
-    let eventName = lookupEventBox("month", EVENT_BOX, 1, 5, null,
+    let eventName = lookupEventBox("month", CANVAS_BOX, 1, 5, null,
         `${EVENTPATH}/${getEventDetails("month")}/anon({"flex":"1"})/anon({"anonid":"event-name"})`
     );
 
     controller.waitForElement(eventName);
     controller.assertValue(eventName, TITLE2);
 
     // Delete event.
     controller.click(eventBox);
--- a/calendar/test/mozmill/views/testMultiweekView.js
+++ b/calendar/test/mozmill/views/testMultiweekView.js
@@ -3,30 +3,29 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 var MODULE_NAME = "testMultiweekView";
 var RELATIVE_ROOT = "../shared-modules";
 var MODULE_REQUIRES = ["calendar-utils", "item-editing-helpers"];
 
 var { cal } = ChromeUtils.import("resource://calendar/modules/calUtils.jsm");
 
-var CALENDARNAME, EVENT_BOX, CANVAS_BOX, MULTIWEEK_VIEW, EVENTPATH;
+var CALENDARNAME, CANVAS_BOX, MULTIWEEK_VIEW, EVENTPATH;
 var helpersForController, switchToView, invokeEventDialog, getEventDetails, createCalendar;
 var closeAllEventDialogs, deleteCalendars, goToDate, lookupEventBox;
 var helpersForEditUI, setData;
 
 const TITLE1 = "Multiweek View Event";
 const TITLE2 = "Multiweek View Event Changed";
 const DESC = "Multiweek View Event Description";
 
 function setupModule(module) {
     controller = mozmill.getMail3PaneController();
     ({
         CALENDARNAME,
-        EVENT_BOX,
         CANVAS_BOX,
         MULTIWEEK_VIEW,
         EVENTPATH,
         helpersForController,
         switchToView,
         invokeEventDialog,
         getEventDetails,
         createCalendar,
@@ -87,27 +86,27 @@ function testMultiWeekView() {
             calendar: CALENDARNAME
         });
 
         // save
         event.click(eventid("button-saveandclose"));
     });
 
     // If it was created successfully, it can be opened.
-    eventBox = lookupEventBox("multiweek", EVENT_BOX, 1, 5, null, EVENTPATH);
+    eventBox = lookupEventBox("multiweek", CANVAS_BOX, 1, 5, null, EVENTPATH);
     invokeEventDialog(controller, eventBox, (event, iframe) => {
         let { eid: eventid } = helpersForController(event);
 
         // Change title and save changes.
         setData(event, iframe, { title: TITLE2 });
         event.click(eventid("button-saveandclose"));
     });
 
     // Check if name was saved.
-    let eventName = lookupEventBox("multiweek", EVENT_BOX, 1, 5, null,
+    let eventName = lookupEventBox("multiweek", CANVAS_BOX, 1, 5, null,
         `${EVENTPATH}/${getEventDetails("multiweek")}/anon({"flex":"1"})/
         anon({"anonid":"event-name"})`
     );
 
     controller.waitForElement(eventName);
     controller.assertValue(eventName, TITLE2);
 
     // Delete event.