calendar/base/content/calendar-multiday-view.xml
author Jorg K <jorgk@jorgk.com>
Wed, 17 Apr 2019 23:58:15 +0200
changeset 26376 e920876482870bfc239ab3bc3ecd1514d9958382
parent 26349 8eb6c4b7ccd499a0335a4ed0f4481801e973dc2e
child 26418 a7efaecb39ccf179d84a3375da8609698435ef58
permissions -rw-r--r--
Bug 1535725 - Port bug 1519948: Replace use of boxObject: .x, .y, .height, .width, .screenX, .screenY. r=me

<?xml version="1.0" encoding="UTF-8"?>
<!-- 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/. -->

<!-- import-globals-from ../../resources/content/mouseoverPreviews.js -->
<!-- import-globals-from calendar-dnd-listener.js -->
<!-- import-globals-from calendar-ui-utils.js -->
<!-- import-globals-from calendar-views.js -->

<!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">

  <!--
     - This is the time bar that displays time divisions to the side
     - or top of a multiday view.
    -->
  <binding id="calendar-time-bar">
    <content>
      <xul:stack anonid="timebarboxstack" style="display: block; position: relative" xbl:inherits="orient,width,height" flex="1">
        <xul:box anonid="topbox" xbl:inherits="orient,width,height" flex="1"/>
        <xul:box anonid="timeIndicatorBoxTimeBar" class="timeIndicator-timeBar" xbl:inherits="orient" hidden="true"/>
      </xul:stack>
    </content>

    <implementation>
      <field name="mPixPerMin">0.6</field>
      <field name="mStartMin">0</field>
      <field name="mEndMin">24 * 60</field>
      <field name="mDayStartHour">0</field>
      <field name="mDayEndHour">24</field>

      <constructor><![CDATA[
          this.relayout();
          this.dispatchEvent(new CustomEvent("bindingattached", { bubbles: false }));
      ]]></constructor>

      <method name="setDayStartEndHours">
        <parameter name="aDayStartHour"/>
        <parameter name="aDayEndHour"/>
        <body><![CDATA[
            if (aDayStartHour * 60 < this.mStartMin ||
                aDayStartHour > aDayEndHour ||
                aDayEndHour * 60 > this.mEndMin) {
                throw Cr.NS_ERROR_INVALID_ARG;
            }
            if (this.mDayStartHour != aDayStartHour ||
                this.mDayEndHour != aDayEndHour) {
                this.mDayEndHour = aDayEndHour;
                this.mDayStartHour = aDayStartHour;

                let topbox = document.getAnonymousElementByAttribute(this, "anonid", "topbox");
                if (topbox.childNodes.length) {
                    // This only needs to be done if the initial relayout has
                    // already happened, otherwise it will be done then.
                    for (let hour = this.mStartMin / 60; hour < this.mEndMin / 60; hour++) {
                        if (hour < this.mDayStartHour || hour >= this.mDayEndHour) {
                            topbox.childNodes[hour].setAttribute("off-time", "true");
                        } else {
                            topbox.childNodes[hour].removeAttribute("off-time");
                        }
                    }
                }
            }
        ]]></body>
      </method>

      <method name="setAttribute">
        <parameter name="aAttr"/>
        <parameter name="aVal"/>
        <body><![CDATA[
            let needsrelayout = false;
            if (aAttr == "orient") {
                if (this.getAttribute("orient") != aVal) {
                    needsrelayout = true;
                }
            }

            // this should be done using lookupMethod(), see bug 286629
            let ret = XULElement.prototype.setAttribute.call(this, aAttr, aVal);

            if (needsrelayout) {
                this.relayout();
            }

            return ret;
        ]]></body>
      </method>

      <property name="pixelsPerMinute"
                onget="return this.mPixPerMin"
                onset="if (this.mPixPerMin != val) { this.mPixPerMin = val; this.relayout(); } return val;"/>

      <method name="relayout">
        <body><![CDATA[
            const { cal } = ChromeUtils.import("resource://calendar/modules/calUtils.jsm");
            let topbox = document.getAnonymousElementByAttribute(this, "anonid", "topbox");
            let orient = topbox.getAttribute("orient");

            function makeTimeBox(timestr, size) {
                let box = document.createXULElement("box");
                box.setAttribute("orient", orient);

                if (orient == "horizontal") {
                    box.setAttribute("width", size);
                } else {
                    box.setAttribute("height", size);
                }

                let label = document.createXULElement("label");
                label.setAttribute("class", "calendar-time-bar-label");
                label.setAttribute("value", timestr);
                label.setAttribute("align", "center");

                box.appendChild(label);

                return box;
            }

            while (topbox.hasChildNodes()) {
                topbox.lastChild.remove();
            }

            let timeFormatter = cal.getDateFormatter();
            let jsTime = new Date();
            let timeString;
            let theMin = this.mStartMin;
            let theHour = Math.floor(theMin / 60);
            let durLeft = this.mEndMin - this.mStartMin;

            while (durLeft > 0) {
                let dur;
                if (this.mEndMin - theMin < 60) {
                    dur = this.mEndMin - theMin;
                } else {
                    dur = theMin % 60;
                }
                theMin += dur;
                if (dur == 0) {
                    dur = 60;
                }

                // calculate duration pixel as the difference between
                // start pixel and end pixel to avoid rounding errors.
                let startPix = Math.round(theMin * this.mPixPerMin);
                let endPix = Math.round((theMin + dur) * this.mPixPerMin);
                let durPix = endPix - startPix;
                let box;
                if (dur == 60) {
                    jsTime.setHours(theHour, 0, 0);
                    timeString = timeFormatter.formatTime(cal.dtz.jsDateToDateTime(jsTime, cal.dtz.floating));
                    box = makeTimeBox(timeString, durPix);
                } else {
                    box = makeTimeBox("", durPix);
                }

                // Set up workweek hours
                if (theHour < this.mDayStartHour || theHour >= this.mDayEndHour) {
                    box.setAttribute("off-time", "true");
                }

                box.setAttribute("class", "calendar-time-bar-box-" + (theHour % 2 == 0 ? "even" : "odd"));
                topbox.appendChild(box);

                durLeft -= dur;
                theMin += dur;
                theHour++;
            }
        ]]></body>
      </method>
    </implementation>
  </binding>


  <!--
     - A column for displaying event boxes in.  One column per
     - day; it manages the layout of the events given via add/deleteEvent.
    -->
  <binding id="calendar-event-column">
    <content>
      <xul:stack anonid="boxstack" flex="1" class="multiday-column-box-stack" style="min-width: 1px; min-height: 1px">
        <xul:box anonid="bgbox" flex="1" class="multiday-column-bg-box" style="min-width: 1px; min-height: 1px"/>
        <xul:box anonid="topbox" class="multiday-column-top-box" flex="1" style="min-width: 1px; min-height: 1px"
                 xbl:inherits="context" equalsize="always" mousethrough="always"/>
        <xul:box anonid="timeIndicatorBox" xbl:inherits="orient" class="timeIndicator" mousethrough="always" hidden="true"/>
        <xul:box anonid="fgbox" flex="1" class="fgdragcontainer" style="min-width: 1px; min-height: 1px; overflow:hidden;">
          <xul:box anonid="fgdragspacer" style="display: inherit; overflow: hidden;">
            <xul:spacer flex="1"/>
            <xul:label anonid="fgdragbox-startlabel" class="fgdragbox-label"/>
          </xul:box>
          <xul:box anonid="fgdragbox" class="fgdragbox" />
          <xul:label anonid="fgdragbox-endlabel" class="fgdragbox-label"/>
        </xul:box>
      </xul:stack>
      <xul:calendar-event-box anonid="config-box" hidden="true" xbl:inherits="orient"/>
    </content>

    <implementation>
      <constructor><![CDATA[
          const { cal } = ChromeUtils.import("resource://calendar/modules/calUtils.jsm");

          this.mEventInfos = [];
          this.mTimezone = cal.dtz.UTC;
          this.mSelectedItemIds = {};
      ]]></constructor>

      <!-- fields -->
      <field name="mPixPerMin">0.6</field>
      <field name="mStartMin">0</field>
      <field name="mEndMin">24 * 60</field>
      <field name="mDayStartMin">8 * 60</field>
      <field name="mDayEndMin">17 * 60</field>
      <!--an array of objects that contain information about the events that are to be
      displayed. The contained fields are:
      event:        The event that is to be displayed in a 'calendar-event-box'
      layoutStart:  The 'start'-datetime object of the event in the timezone of the view
      layoutEnd:    The 'end'-datetime object of the event in the timezone of the view.
                    The 'layoutEnd' may be different from the real 'end' time of the
                    event because it considers a certain minimum duration of the event
                    that is basically dependent of the font-size of the event-box label -->
      <field name="mEventInfos">[]</field>
      <field name="mEventMap">null</field>
      <field name="mCalendarView">null</field>
      <field name="mDate">null</field>
      <field name="mTimezone">null</field>
      <field name="mDragState">null</field>
      <field name="mLayoutBatchCount">0</field>
      <!-- Since we'll often be getting many events in rapid succession, this
           timer helps ensure that we don't re-compute the event map too many
           times in a short interval, and therefore improves performance.-->
      <field name="mEventMapTimeout">null</field>
      <!-- Sometimes we need to add resize handlers for columns with special
           widths.  When we relayout, we need to cancel those handlers -->
      <field name="mHandlersToRemove">[]</field>

      <!-- Set this true so that we know in our onAddItem listener to start
         - modifying an event when it comes back to us as created
        -->
      <field name="mCreatedNewEvent">false</field>
      <field name="mEventToEdit">null</field>
      <field name="mSelectedItemIds">null</field>

      <!-- properties -->
      <property name="pixelsPerMinute">
        <getter><![CDATA[
            return this.mPixPerMin;
        ]]></getter>
        <setter><![CDATA[
            if (val <= 0.0) {
                val = 0.01;
            }
            if (val != this.mPixPerMin) {
                this.mPixPerMin = val;
                this.relayout();
            }
            return val;
        ]]></setter>
      </property>

      <field name="mSelected">false</field>
      <property name="selected">
        <getter><![CDATA[
            return this.mSelected;
        ]]></getter>
        <setter><![CDATA[
            this.mSelected = val;
            if (this.bgbox && this.bgbox.hasChildNodes()) {
                let child = this.bgbox.firstChild;
                while (child) {
                    if (val) {
                        child.setAttribute("selected", "true");
                    } else {
                        child.removeAttribute("selected");
                    }
                    child = child.nextSibling;
                }
            }
            return val;
        ]]></setter>
      </property>

      <property name="date">
        <getter><![CDATA[
            return this.mDate;
        ]]></getter>
        <setter><![CDATA[
            this.mDate = val;

            if (!cal.data.compareObjects(val.timezone, this.mTimezone)) {
                this.mTimezone = val.timezone;
                if (!this.mLayoutBatchCount) {
                    this.recalculateStartEndMinutes();
                }
            }

            return val;
        ]]></setter>
      </property>

      <property name="calendarView"
                onget="return this.mCalendarView;"
                onset="return (this.mCalendarView = val);" />

      <property name="topbox" readonly="true">
        <getter><![CDATA[
            return document.getAnonymousElementByAttribute(this, "anonid", "topbox");
        ]]></getter>
      </property>

      <property name="bgbox" readonly="true">
        <getter><![CDATA[
            return document.getAnonymousElementByAttribute(this, "anonid", "bgbox");
        ]]></getter>
      </property>

      <field name="mFgboxes">null</field>
      <field name="mMinDuration">null</field>
      <property name="fgboxes" readonly="true">
        <getter><![CDATA[
            if (this.mFgboxes == null) {
                this.mFgboxes = {
                    box: document.getAnonymousElementByAttribute(this, "anonid", "fgbox"),
                    dragbox: document.getAnonymousElementByAttribute(this, "anonid", "fgdragbox"),
                    dragspacer: document.getAnonymousElementByAttribute(this, "anonid", "fgdragspacer"),
                    startlabel: document.getAnonymousElementByAttribute(this, "anonid", "fgdragbox-startlabel"),
                    endlabel: document.getAnonymousElementByAttribute(this, "anonid", "fgdragbox-endlabel")
                };
            }
            return this.mFgboxes;
        ]]></getter>
      </property>

      <property name="timeIndicatorBox"
        readonly="true">
        <getter><![CDATA[
            return document.getAnonymousElementByAttribute(this, "anonid", "timeIndicatorBox");
        ]]></getter>
      </property>

      <property name="events" readonly="true" onget="return this.methods"/>

      <field name="mDayOff">false</field>
      <property name="dayOff">
        <getter><![CDATA[
            return this.mDayOff;
        ]]></getter>
        <setter><![CDATA[
            this.mDayOff = val;
            return val;
        ]]></setter>
      </property>

      <!-- mEventInfos -->
      <field name="mSelectedChunks">[]</field>

      <method name="selectOccurrence">
        <parameter name="aOccurrence"/>
        <body><![CDATA[
            if (aOccurrence) {
                this.mSelectedItemIds[aOccurrence.hashId] = true;
                let chunk = this.findChunkForOccurrence(aOccurrence);
                if (!chunk) {
                    return;
                }
                chunk.selected = true;
                this.mSelectedChunks.push(chunk);
            }
        ]]></body>
      </method>

      <method name="unselectOccurrence">
        <parameter name="aOccurrence"/>
        <body><![CDATA[
            if (aOccurrence) {
                delete this.mSelectedItemIds[aOccurrence.hashId];
                let chunk = this.findChunkForOccurrence(aOccurrence);
                if (!chunk) {
                    return;
                }
                chunk.selected = false;
                let index = this.mSelectedChunks.indexOf(chunk);
                this.mSelectedChunks.splice(index, 1);
            }
        ]]></body>
      </method>

      <method name="findChunkForOccurrence">
        <parameter name="aOccurrence"/>
        <body><![CDATA[
            for (let chunk of this.mEventBoxes) {
                if (chunk.occurrence.hashId == aOccurrence.hashId) {
                    return chunk;
                }
            }

            return null;
        ]]></body>
      </method>

      <method name="startLayoutBatchChange">
        <body><![CDATA[
            this.mLayoutBatchCount++;
        ]]></body>
      </method>
      <method name="endLayoutBatchChange">
        <body><![CDATA[
            this.mLayoutBatchCount--;
            if (this.mLayoutBatchCount == 0) {
                this.relayout();
            }
        ]]></body>
      </method>

      <method name="setAttribute">
        <parameter name="aAttr"/>
        <parameter name="aVal"/>
        <body><![CDATA[
            // this should be done using lookupMethod(), see bug 286629
            let ret = XULElement.prototype.setAttribute.call(this, aAttr, aVal);

            if (aAttr == "orient" && this.getAttribute("orient") != aVal) {
                this.relayout();
            }

            return ret;
        ]]></body>
      </method>

      <method name="internalDeleteEvent">
        <parameter name="aOccurrence"/>
        <body><![CDATA[
            let itemIndex = -1;
            let occ;
            for (let i in this.mEventInfos) {
                occ = this.mEventInfos[i].event;
                if (occ.hashId == aOccurrence.hashId) {
                    itemIndex = i;
                    break;
                }
            }

            if (itemIndex == -1) {
                return false;
            } else {
                delete this.mSelectedItemIds[occ.hashId];
                this.mSelectedChunks = this.mSelectedChunks.filter((item) => {
                    return !item.occurrence || (item.occurrence.hashId != aOccurrence.hashId);
                });
                this.mEventInfos.splice(itemIndex, 1);
                return true;
            }
        ]]></body>
      </method>

      <method name="recalculateStartEndMinutes">
        <body><![CDATA[
            for (let chunk of this.mEventInfos) {
                let mins = this.getStartEndMinutesForOccurrence(chunk.event);
                chunk.startMinute = mins.start;
                chunk.endMinute = mins.end;
            }

            this.relayout();
        ]]></body>
      </method>

      <!-- This function returns the start and end minutes of the occurrence
           part in the day of this column, moreover, the real start and end
           minutes of the whole occurrence (which could span multiple days)
           relative to the time 0:00 of the day in this column -->
      <method name="getStartEndMinutesForOccurrence">
        <parameter name="aOccurrence"/>
        <body><![CDATA[
            let stdate = aOccurrence.startDate || aOccurrence.entryDate || aOccurrence.dueDate;
            let enddate = aOccurrence.endDate || aOccurrence.dueDate || aOccurrence.entryDate;

            if (!cal.data.compareObjects(stdate.timezone, this.mTimezone)) {
                stdate = stdate.getInTimezone(this.mTimezone);
            }

            if (!cal.data.compareObjects(enddate.timezone, this.mTimezone)) {
                enddate = enddate.getInTimezone(this.mTimezone);
            }

            let startHour = stdate.hour;
            let startMinute = stdate.minute;
            let endHour = enddate.hour;
            let endMinute = enddate.minute;

            // Handle cases where an event begins or ends on a day other than this
            if (stdate.compare(this.mDate) == -1) {
                startHour = 0;
                startMinute = 0;
            }
            if (enddate.compare(this.mDate) == 1) {
                endHour = 24;
                endMinute = 0;
            }

            // For occurrences that span multiple days, we figure out the real
            // occurrence start and end minutes relative to the date of this
            // column and time 0:00
            let durend = enddate.subtractDate(this.mDate);
            let durstart = stdate.subtractDate(this.mDate);
            // 'durend' is always positive, instead 'durstart' might be negative
            // if the event starts one or more days before the date of this column
            let realStart_ = (durstart.days * 24 + durstart.hours) * 60 + durstart.minutes;
            realStart_ = durstart.isNegative ? -1 * realStart_ : realStart_;
            let realEnd_ = (durend.days * 24 + durend.hours) * 60 + durend.minutes;

            return {
                start: startHour * 60 + startMinute,
                end: endHour * 60 + endMinute,
                realStart: realStart_,
                realEnd: realEnd_
            };
        ]]></body>
      </method>

      <method name="createChunk">
        <parameter name="aOccurrence"/>
        <body><![CDATA[
            let mins = this.getStartEndMinutesForOccurrence(aOccurrence);

            let chunk = {
                startMinute: mins.start,
                endMinute: mins.end,
                event: aOccurrence
            };
            return chunk;
        ]]></body>
      </method>

      <method name="addEvent">
        <parameter name="aOccurrence"/>
        <body><![CDATA[
            this.internalDeleteEvent(aOccurrence);

            let chunk = this.createChunk(aOccurrence);
            this.mEventInfos.push(chunk);
            if (this.mEventMapTimeout) {
                clearTimeout(this.mEventMapTimeout);
            }

            if (this.mCreatedNewEvent) {
                this.mEventToEdit = aOccurrence;
            }

            this.mEventMapTimeout = setTimeout(() => this.relayout(), 5);
        ]]></body>
      </method>

      <method name="deleteEvent">
        <parameter name="aOccurrence"/>
        <body><![CDATA[
            if (this.internalDeleteEvent(aOccurrence)) {
                this.relayout();
            }
        ]]></body>
      </method>

      <method name="clear">
        <body><![CDATA[
            while (this.bgbox && this.bgbox.hasChildNodes()) {
                this.bgbox.lastChild.remove();
            }
            while (this.topbox && this.topbox.hasChildNodes()) {
                this.topbox.lastChild.remove();
            }
            for (let handler of this.mHandlersToRemove) {
                this.calendarView.viewBroadcaster.removeEventListener(this.calendarView.getAttribute("type") + "viewresized", handler, true);
            }
            this.mHandlersToRemove = [];
            this.mSelectedChunks = [];
        ]]></body>
      </method>

      <method name="relayout">
        <body><![CDATA[
            if (this.mLayoutBatchCount > 0) {
                return;
            }
            this.clear();

            let orient = this.getAttribute("orient");
            this.bgbox.setAttribute("orient", orient);

            // bgbox is used mainly for drawing the grid.  at some point it may
            // also be used for all-day events.
            let otherorient = getOtherOrientation(orient);
            let configBox = document.getAnonymousElementByAttribute(this, "anonid", "config-box");
            configBox.removeAttribute("hidden");
            let minSize = configBox.getOptimalMinSize();
            configBox.setAttribute("hidden", "true");
            this.mMinDuration = Cc["@mozilla.org/calendar/duration;1"]
                                  .createInstance(Ci.calIDuration);
            this.mMinDuration.minutes = Math.trunc(minSize / this.mPixPerMin);

            let theMin = this.mStartMin;
            while (theMin < this.mEndMin) {
                let dur = theMin % 60;
                theMin += dur;
                if (dur == 0) {
                    dur = 60;
                }

                let box = document.createXULElement("spacer");
                // we key off this in a CSS selector
                box.setAttribute("orient", orient);
                box.setAttribute("class", "calendar-event-column-linebox");

                if (this.mSelected) {
                    box.setAttribute("selected", "true");
                }
                if (this.mDayOff) {
                    box.setAttribute("weekend", "true");
                }
                if (theMin < this.mDayStartMin || theMin >= this.mDayEndMin) {
                    box.setAttribute("off-time", "true");
                }

                // Carry forth the day relation
                box.setAttribute("relation", this.getAttribute("relation"));

                // calculate duration pixel as the difference between
                // start pixel and end pixel to avoid rounding errors.
                let startPix = Math.round(theMin * this.mPixPerMin);
                let endPix = Math.round((theMin + dur) * this.mPixPerMin);
                let durPix = endPix - startPix;
                if (orient == "vertical") {
                    box.setAttribute("height", durPix);
                } else {
                    box.setAttribute("width", durPix);
                }

                box.setAttribute("style", "min-width: 1px; min-height: 1px;");

                this.bgbox.appendChild(box);
                theMin += 60;
            }

            // fgbox is used for dragging events
            this.fgboxes.box.setAttribute("orient", orient);
            document.getAnonymousElementByAttribute(this, "anonid", "fgdragspacer").setAttribute("orient", orient);

            // this one is set to otherorient, since it will contain
            // child boxes set to "orient" (one for each set of
            // overlapping event areas)
            this.topbox.setAttribute("orient", otherorient);

            this.mEventMap = this.computeEventMap();
            this.mEventBoxes = [];

            if (!this.mEventMap.length) {
                return;
            }

            // First of all we create a xul:stack which
            // will hold all events for this event column.
            // The stack will be grouped below .../calendar-event-column/stack/topbox.
            let stack = document.createXULElement("stack");
            stack.setAttribute("flex", "1");
            this.topbox.appendChild(stack);

            let boxToEdit;
            let columnCount = 1;
            let spanTotal = 0;

            for (let layer of this.mEventMap) {
                // The event-map (this.mEventMap) contains an array of layers.
                // For each layer we create a box below the stack just created above.
                // So each different layer lives in a box that's contained in the stack.
                let xulColumn = document.createXULElement("box");
                xulColumn.setAttribute("orient", otherorient);
                xulColumn.setAttribute("flex", "1");
                xulColumn.setAttribute("style", "min-width: 1px; min-height: 1px;");
                stack.appendChild(xulColumn);

                let numBlocksInserted = 0;

                // column count determined by layer with no special span columns
                if (layer.every(e => !e.specialSpan)) {
                    columnCount = layer.length;
                }
                spanTotal = 0;

                // Each layer contains a list of the columns that
                // need to be created for a span.
                for (let column of layer) {
                    let innerColumn = document.createXULElement("box");
                    innerColumn.setAttribute("orient", orient);

                    let colFlex = column.specialSpan ? columnCount * column.specialSpan : 1;
                    innerColumn.setAttribute("flex", colFlex);
                    spanTotal += colFlex;

                    innerColumn.style.minWidth = "1px";
                    innerColumn.style.minHeight = "1px";
                    innerColumn.style.width = colFlex + "px";
                    innerColumn.style.height = colFlex + "px";

                    xulColumn.appendChild(innerColumn);
                    let duration;
                    for (let chunk of column) {
                        duration = chunk.duration;
                        if (!duration) {
                            continue;
                        }

                        if (chunk.event) {
                            let chunkBox = document.createXULElement("calendar-event-box");
                            let durMinutes = duration.inSeconds / 60;
                            let size = Math.max(durMinutes * this.mPixPerMin, minSize);
                            if (orient == "vertical") {
                                chunkBox.setAttribute("height", size);
                            } else {
                                chunkBox.setAttribute("width", size);
                            }
                            chunkBox.setAttribute("context",
                                                  this.getAttribute("item-context") ||
                                                    this.getAttribute("context"));
                            chunkBox.setAttribute("orient", orient);

                            // Set the gripBars visibility in the chunk. Keep it
                            // hidden for tasks with only entry date OR due date.
                            if ((chunk.event.entryDate || !chunk.event.dueDate) &&
                                (!chunk.event.entryDate || chunk.event.dueDate)) {
                                let startGripVisible = (chunk.event.startDate || chunk.event.entryDate)
                                                           .compare(chunk.startDate) == 0;
                                let endGripVisible = (chunk.event.endDate || chunk.event.dueDate)
                                                         .compare(chunk.endDate) <= 0;
                                if (startGripVisible && endGripVisible) {
                                    chunkBox.setAttribute("gripBars", "both");
                                } else if (endGripVisible) {
                                    chunkBox.setAttribute("gripBars", "end");
                                } else if (startGripVisible) {
                                    chunkBox.setAttribute("gripBars", "start");
                                }
                            }

                            innerColumn.appendChild(chunkBox);
                            chunkBox.calendarView = this.calendarView;
                            chunkBox.occurrence = chunk.event;
                            chunkBox.parentColumn = this;
                            if (chunk.event.hashId in this.mSelectedItemIds) {
                                chunkBox.selected = true;
                                this.mSelectedChunks.push(chunkBox);
                            }

                            this.mEventBoxes.push(chunkBox);

                            if (this.mEventToEdit &&
                                chunkBox.occurrence.hashId == this.mEventToEdit.hashId) {
                                boxToEdit = chunkBox;
                            }
                        } else {
                            let chunkBox = document.createXULElement("spacer");
                            chunkBox.setAttribute("context", this.getAttribute("context"));
                            chunkBox.setAttribute("style", "min-width: 1px; min-height: 1px;");
                            chunkBox.setAttribute("orient", orient);
                            chunkBox.setAttribute("class", "calendar-empty-space-box");
                            innerColumn.appendChild(chunkBox);

                            let durMinutes = duration.inSeconds / 60;
                            if (orient == "vertical") {
                                chunkBox.setAttribute("height", durMinutes * this.mPixPerMin);
                            } else {
                                chunkBox.setAttribute("width", durMinutes * this.mPixPerMin);
                            }
                        }
                    }

                    numBlocksInserted++;
                }

                // add last empty column if necessary
                if (spanTotal < columnCount) {
                    let lastColumn = document.createXULElement("box");
                    lastColumn.setAttribute("orient", orient);
                    lastColumn.setAttribute("flex", columnCount - spanTotal);
                    lastColumn.style.minWidth = "1px";
                    lastColumn.style.minHeight = "1px";
                    lastColumn.style.width = (columnCount - spanTotal) + "px";
                    lastColumn.style.height = (columnCount - spanTotal) + "px";

                    xulColumn.appendChild(lastColumn);
                }

                if (boxToEdit) {
                    this.mCreatedNewEvent = false;
                    this.mEventToEdit = null;
                    boxToEdit.startEditing();
                }

                if (numBlocksInserted == 0) {
                    // if we didn't insert any blocks, then
                    // forget about this column
                    xulColumn.remove();
                }
            }
        ]]></body>
      </method>

      <method name="computeEventMap">
        <body><![CDATA[
            /* We're going to create a series of 'blobs'.  A blob is a series of
             * events that create a continuous block of busy time.  In other
             * words, a blob ends when there is some time such that no events
             * occupy that time.
             *
             * Each blob will be an array of objects with the following properties:
             *    item:     the event/task
             *    startCol: the starting column to display the event in (0-indexed)
             *    colSpan:  the number of columns the item spans
             *
             * An item with no conflicts will have startCol: 0 and colSpan: 1.
             */
            let blobs = [];
            let currentBlob = [];
            function sortByStart(aEventInfo, bEventInfo) {
                // If you pass in tasks without both entry and due dates, I will
                // kill you
                let startComparison = aEventInfo.layoutStart.compare(bEventInfo.layoutStart);
                if (startComparison == 0) {
                    // If the items start at the same time, return the longer one
                    // first
                    return bEventInfo.layoutEnd.compare(aEventInfo.layoutEnd);
                } else {
                    return startComparison;
                }
            }
            this.mEventInfos.forEach((aEventInfo) => {
                let item = aEventInfo.event.clone();
                let start = item.startDate || item.entryDate || item.dueDate;
                start = start.getInTimezone(this.mTimezone);
                aEventInfo.layoutStart = start;
                let end = item.endDate || item.dueDate || item.entryDate;
                end = end.getInTimezone(this.mTimezone);
                let secEnd = start.clone();
                secEnd.addDuration(this.mMinDuration);
                if (secEnd.nativeTime > end.nativeTime) {
                    aEventInfo.layoutEnd = secEnd;
                } else {
                    aEventInfo.layoutEnd = end;
                }
                return aEventInfo;
            });
            this.mEventInfos.sort(sortByStart);

            // The end time of the last ending event in the entire blob
            let latestItemEnd;

            // This array keeps track of the last (latest ending) item in each of
            // the columns of the current blob. We could reconstruct this data at
            // any time by looking at the items in the blob, but that would hurt
            // perf.
            let colEndArray = [];

            /* Go through a 3 step process to try and place each item.
             * Step 1: Look for an existing column with room for the item.
             * Step 2: Look for a previously placed item that can be shrunk in
             *         width to make room for the item.
             * Step 3: Give up and create a new column for the item.
             *
             * (The steps are explained in more detail as we come to them)
             */
            for (let i in this.mEventInfos) {
                let curItemInfo = {
                    event: this.mEventInfos[i].event,
                    layoutStart: this.mEventInfos[i].layoutStart,
                    layoutEnd: this.mEventInfos[i].layoutEnd
                };
                if (!latestItemEnd) {
                    latestItemEnd = curItemInfo.layoutEnd;
                }
                if (currentBlob.length && latestItemEnd &&
                    curItemInfo.layoutStart.compare(latestItemEnd) != -1) {
                    // We're done with this current blob because item starts
                    // after the last event in the current blob ended.
                    blobs.push({ blob: currentBlob, totalCols: colEndArray.length });

                    // Reset our variables
                    currentBlob = [];
                    colEndArray = [];
                }

                // Place the item in its correct place in the blob
                let placedItem = false;

                // Step 1
                // Look for a possible column in the blob that has been left open. This
                // would happen if we already have multiple columns but some of
                // the cols have events before latestItemEnd.  For instance
                //       |      |      |
                //       |______|      |
                //       |ev1   |______|
                //       |      |ev2   |
                //       |______|      |
                //       |      |      |
                //       |OPEN! |      |<--Our item's start time might be here
                //       |      |______|
                //       |      |      |
                //
                // Remember that any time we're starting a new blob, colEndArray
                // will be empty, but that's ok.
                for (let j = 0; j < colEndArray.length; ++j) {
                    let colEnd = colEndArray[j].layoutEnd;
                    if (colEnd.compare(curItemInfo.layoutStart) != 1) {
                        // Yay, we can jump into this column
                        colEndArray[j] = curItemInfo;

                        // Check and see if there are any adjacent columns we can
                        // jump into as well.
                        let lastCol = Number(j) + 1;
                        while (lastCol < colEndArray.length) {
                            let nextColEnd = colEndArray[lastCol].layoutEnd;
                            // If the next column's item ends after we start, we
                            // can't expand any further
                            if (nextColEnd.compare(curItemInfo.layoutStart) == 1) {
                                break;
                            }
                            colEndArray[lastCol] = curItemInfo;
                            lastCol++;
                        }
                        // Now construct the info we need to push into the blob
                        currentBlob.push({
                            itemInfo: curItemInfo,
                            startCol: j,
                            colSpan: lastCol - j
                        });

                        // Update latestItemEnd
                        if (latestItemEnd &&
                            curItemInfo.layoutEnd.compare(latestItemEnd) == 1) {
                            latestItemEnd = curItemInfo.layoutEnd;
                        }
                        placedItem = true;
                        break; // Stop iterating through colEndArray
                    }
                }

                if (placedItem) {
                    // Go get the next item
                    continue;
                }

                // Step 2
                // OK, all columns (if there are any) overlap us.  Look if the
                // last item in any of the last items in those columns is taking
                // up 2 or more cols. If so, shrink it and stick the item in the
                // created space. For instance
                //       |______|______|______|
                //       |ev1   |ev3   |ev4   |
                //       |      |      |      |
                //       |      |______|      |
                //       |      |      |______|
                //       |      |_____________|
                //       |      |ev2          |
                //       |______|             |<--If our item's start time is
                //       |      |_____________|   here, we can shrink ev2 and jump
                //       |      |      |      |   in column #3
                //
                for (let j = 1; j < colEndArray.length; ++j) {
                    if (colEndArray[j].event.hashId == colEndArray[j - 1].event.hashId) {
                        // Good we found a item that spanned multiple columns.
                        // Find it in the blob so we can modify its properties
                        for (let blobKey in currentBlob) {
                            if (currentBlob[blobKey].itemInfo.event.hashId == colEndArray[j].event.hashId) {
                                // Take all but the first spot that the item spanned
                                let spanOfShrunkItem = currentBlob[blobKey].colSpan;
                                currentBlob.push({
                                    itemInfo: curItemInfo,
                                    startCol: Number(currentBlob[blobKey].startCol) + 1,
                                    colSpan: spanOfShrunkItem - 1
                                });

                                // Update colEndArray
                                for (let k = j; k < j + spanOfShrunkItem - 1; k++) {
                                    colEndArray[k] = curItemInfo;
                                }

                                // Modify the data on the old item
                                currentBlob[blobKey] = {
                                    itemInfo: currentBlob[blobKey].itemInfo,
                                    startCol: currentBlob[blobKey].startCol,
                                    colSpan: 1
                                };
                                // Update latestItemEnd
                                if (latestItemEnd &&
                                    curItemInfo.layoutEnd.compare(latestItemEnd) == 1) {
                                    latestItemEnd = curItemInfo.layoutEnd;
                                }
                                break; // Stop iterating through currentBlob
                            }
                        }
                        placedItem = true;
                        break; // Stop iterating through colEndArray
                    }
                }

                if (placedItem) {
                    // Go get the next item
                    continue;
                }

                // Step 3
                // Guess what? We still haven't placed the item.  We need to
                // create a new column for it.

                // All the items in the last column, except for the one* that
                // conflicts with the item we're trying to place, need to have
                // their span extended by 1, since we're adding the new column
                //
                // * Note that there can only be one, because we sorted our
                //   events by start time, so this event must start later than
                //   the start of any possible conflicts.
                let lastColNum = colEndArray.length;
                for (let blobKey in currentBlob) {
                    let blobKeyEnd = currentBlob[blobKey].itemInfo.layoutEnd;
                    if (currentBlob[blobKey].startCol + currentBlob[blobKey].colSpan == lastColNum &&
                        blobKeyEnd.compare(curItemInfo.layoutStart) != 1) {
                        currentBlob[blobKey] = {
                            itemInfo: currentBlob[blobKey].itemInfo,
                            startCol: currentBlob[blobKey].startCol,
                            colSpan: currentBlob[blobKey].colSpan + 1
                        };
                    }
                }
                currentBlob.push({
                    itemInfo: curItemInfo,
                    startCol: colEndArray.length,
                    colSpan: 1
                });
                colEndArray.push(curItemInfo);

                // Update latestItemEnd
                if (latestItemEnd && curItemInfo.layoutEnd.compare(latestItemEnd) == 1) {
                    latestItemEnd = curItemInfo.layoutEnd;
                }
                // Go get the next item
            }
            // Add the last blob
            blobs.push({
                blob: currentBlob,
                totalCols: colEndArray.length
            });
            return this.setupBoxStructure(blobs);
        ]]></body>
      </method>

      <method name="setupBoxStructure">
        <parameter name="aBlobs"/>
        <body><![CDATA[
            // This is actually going to end up being a 3-d array
            // 1st dimension: "layers", sets of columns of events that all
            //                should have equal width*
            // 2nd dimension: "columns", individual columns of non-conflicting
            //                items
            // 3rd dimension: "chunks", individual items or placeholders for
            //                the blank time in between them
            //
            // * Note that 'equal width' isn't strictly correct.  If we're
            //   oriented differently, it will be height (and we'll have rows
            //   not columns).  What's more, in the 'specialSpan' case, the
            //   columns won't actually have the same size, but will only all
            //   be multiples of a common size.  See the note in the relayout
            //   function for more info on this (fairly rare) case.
            let layers = [];

            // When we start a new blob, move to a new set of layers
            let layerOffset = 0;
            for (let glob of aBlobs) {
                let layerArray = [];
                let layerCounter = 1;

                for (let data of glob.blob) {
                    // from the item at hand we need to figure out on which
                    // layer and on which column it should go.
                    let layerIndex;
                    let specialSpan = null;

                    // each blob receives its own layer, that's the first part of the story. within
                    // a given blob we need to distribute the items on different layers depending on
                    // the number of columns each item spans. if each item just spans a single column
                    // the blob will cover *one* layer. if the blob contains items that span more than
                    // a single column, this blob will cover more than one layer. the algorithm places
                    // the items on the first layer in the case an item covers a single column. new layers
                    // are introduced based on the start column and number of spanning columns of an item.
                    if (data.colSpan == 1) {
                        layerIndex = 0;
                    } else {
                        let index = glob.totalCols * data.colSpan + data.startCol;
                        layerIndex = layerArray[index];
                        if (!layerIndex) {
                            layerIndex = layerCounter++;
                            layerArray[index] = layerIndex;
                        }
                        let offset = (glob.totalCols - data.colSpan) % glob.totalCols;
                        if (offset != 0) {
                            specialSpan = data.colSpan / glob.totalCols;
                        }
                    }
                    layerIndex += layerOffset;

                    // Make sure there's room to insert stuff
                    while (layerIndex >= layers.length) {
                        layers.push([]);
                    }

                    while (data.startCol >= layers[layerIndex].length) {
                        layers[layerIndex].push([]);
                        if (specialSpan) {
                            layers[layerIndex][layers[layerIndex].length - 1].specialSpan = 1 / glob.totalCols;
                        }
                    }

                    // we now retrieve the column from 'layerIndex' and 'startCol'.
                    let col = layers[layerIndex][data.startCol];
                    if (specialSpan) {
                        col.specialSpan = specialSpan;
                    }

                    // take into account that items can span several days.
                    // that's why i'm clipping the start- and end-time to the
                    // timespan of this column.
                    let start = data.itemInfo.layoutStart;
                    let end = data.itemInfo.layoutEnd;
                    if (start.year != this.date.year ||
                        start.month != this.date.month ||
                        start.day != this.date.day) {
                        start = start.clone();
                        start.resetTo(this.date.year,
                                      this.date.month,
                                      this.date.day,
                                      0, this.mStartMin, 0,
                                      start.timezone);
                    }
                    if (end.year != this.date.year ||
                        end.month != this.date.month ||
                        end.day != this.date.day) {
                        end = end.clone();
                        end.resetTo(this.date.year,
                                    this.date.month,
                                    this.date.day,
                                    0, this.mEndMin, 0,
                                    end.timezone);
                    }
                    let prevEnd;
                    if (col.length > 0) {
                        // Fill in time gaps with a placeholder
                        prevEnd = col[col.length - 1].endDate.clone();
                    } else {
                        // First event in the column, add a placeholder for the
                        // blank time from this.mStartMin to the event's start
                        prevEnd = start.clone();
                        prevEnd.hour = 0;
                        prevEnd.minute = this.mStartMin;
                    }
                    prevEnd.timezone = cal.dtz.floating;
                    // the reason why we need to calculate time durations
                    // based on floating timezones is that we need avoid
                    // dst gaps in this case. converting the date/times to
                    // floating conveys this idea in a natural way. note that
                    // we explicitly don't use getInTimezone() as it would
                    // be slightly more expensive in terms of performance.
                    let floatstart = start.clone();
                    floatstart.timezone = cal.dtz.floating;
                    let dur = floatstart.subtractDate(prevEnd);
                    if (dur.inSeconds) {
                        col.push({ duration: dur });
                    }
                    let floatend = end.clone();
                    floatend.timezone = cal.dtz.floating;
                    col.push({
                        event: data.itemInfo.event,
                        endDate: end,
                        startDate: start,
                        duration: floatend.subtractDate(floatstart)
                    });
                }
                layerOffset = layers.length;
            }
            return layers;
        ]]></body>
      </method>

      <method name="getShadowElements">
        <parameter name="aStart"/>
        <parameter name="aEnd"/>
        <body><![CDATA[
            // aStart and aEnd are start and end minutes of the occurrence
            // from time 0:00 of the dragging column
            let shadows = 1;
            let offset = 0;
            let startMin;
            if (aStart < 0) {
                shadows += Math.ceil(Math.abs(aStart) / this.mEndMin);
                offset = shadows - 1;
                let reminder = Math.abs(aStart) % this.mEndMin;
                startMin = this.mEndMin - (reminder ? reminder : this.mEndMin);
            } else {
                startMin = aStart;
            }
            shadows += Math.floor(aEnd / this.mEndMin);

            // return values needed to build the shadows while dragging
            return {
                shadows: shadows,             // number of shadows
                offset: offset,               // Offset first<->selected shadows
                startMin: startMin,           // First shadow start minute
                endMin: aEnd % this.mEndMin   // Last shadow end minute
            };
        ]]></body>
      </method>

      <method name="firstLastShadowColumns">
        <parameter name="aOffset"/>
        <parameter name="aShadows"/>
        <body><![CDATA[
            let firstCol = this; // eslint-disable-line consistent-this
            let lastCol = this; // eslint-disable-line consistent-this
            let firstIndex = aOffset == null ? this.mDragState.offset : aOffset;
            let lastIndex = firstIndex;
            while (firstCol.previousSibling && firstIndex > 0) {
                firstCol = firstCol.previousSibling;
                firstIndex--;
            }
            let lastShadow = aShadows == null ? this.mDragState.shadows : aShadows;
            while (lastCol.nextSibling && lastIndex < lastShadow - 1) {
                lastCol = lastCol.nextSibling;
                lastIndex++;
            }

            // returns first and last column with shadows that are visible in the
            // week and the positions of these (visible) columns in the set of
            // columns shadows of the occurrence
            return {
                firstCol: firstCol,
                firstIndex: firstIndex,
                lastCol: lastCol,
                lastIndex: lastIndex
            };
        ]]></body>
      </method>

      <method name="updateShadowsBoxes">
        <parameter name="aStart"/>
        <parameter name="aEnd"/>
        <parameter name="aCurrentOffset"/>
        <parameter name="aCurrentShadows"/>
        <parameter name="aSizeattr"/>
        <body><![CDATA[
            let lateralColumns = this.firstLastShadowColumns(aCurrentOffset, aCurrentShadows);
            let firstCol = lateralColumns.firstCol;
            let firstIndex = lateralColumns.firstIndex;
            let lastCol = lateralColumns.lastCol;
            let lastIndex = lateralColumns.lastIndex;

            // remove the first/last shadow when start/end time goes in the
            // next/previous day. This happens when current offset is different
            // from offset stored in mDragState
            if (aCurrentOffset != null) {
                if (this.mDragState.offset > aCurrentOffset && firstCol.previousSibling) {
                    firstCol.previousSibling.fgboxes.dragbox.removeAttribute("dragging");
                    firstCol.previousSibling.fgboxes.box.removeAttribute("dragging");
                }
                let currentOffsetEndSide = aCurrentShadows - 1 - aCurrentOffset;
                if ((this.mDragState.shadows - 1 - this.mDragState.offset) > currentOffsetEndSide &&
                     lastCol.nextSibling) {
                    lastCol.nextSibling.fgboxes.dragbox.removeAttribute("dragging");
                    lastCol.nextSibling.fgboxes.box.removeAttribute("dragging");
                }
            }

            // set shadow boxes size for every part of the occurrence
            let firstShadowSize = (aCurrentShadows == 1 ? aEnd : this.mEndMin) - aStart;
            let column = firstCol;
            for (let i = firstIndex; column && i <= lastIndex; i++) {
                column.fgboxes.box.setAttribute("dragging", "true");
                column.fgboxes.dragbox.setAttribute("dragging", "true");
                if (i == 0) {
                    // first shadow
                    column.fgboxes.dragspacer.setAttribute(aSizeattr, aStart * column.mPixPerMin);
                    column.fgboxes.dragbox.setAttribute(aSizeattr, firstShadowSize * column.mPixPerMin);
                } else if (i == (aCurrentShadows - 1)) {
                    // last shadow
                    column.fgboxes.dragspacer.setAttribute(aSizeattr, 0);
                    column.fgboxes.dragbox.setAttribute(aSizeattr, aEnd * column.mPixPerMin);
                } else {
                    // an intermediate shadow (full day)
                    column.fgboxes.dragspacer.setAttribute(aSizeattr, 0);
                    column.fgboxes.dragbox.setAttribute(aSizeattr, this.mEndMin * column.mPixPerMin);
                }
                column = column.nextSibling;
            }
        ]]></body>
      </method>

      <method name="onEventSweepKeypress">
        <parameter name="event"/>
        <body><![CDATA[
            let col = document.calendarEventColumnDragging;
            if (col && event.key == "Escape") {
                window.removeEventListener("mousemove", col.onEventSweepMouseMove);
                window.removeEventListener("mouseup", col.onEventSweepMouseUp);
                window.removeEventListener("keypress", col.onEventSweepKeypress);

                let lateralColumns = col.firstLastShadowColumns();
                let column = lateralColumns.firstCol;
                let index = lateralColumns.firstIndex;
                while (column && index < col.mDragState.shadows) {
                    column.fgboxes.dragbox.removeAttribute("dragging");
                    column.fgboxes.box.removeAttribute("dragging");
                    column = column.nextSibling;
                    index++;
                }

                col.mDragState = null;
                document.calendarEventColumnDragging = null;
            }
        ]]></body>
      </method>

      <method name="clearMagicScroll">
        <body><![CDATA[
            if (this.mMagicScrollTimer) {
                clearTimeout(this.mMagicScrollTimer);
                this.mMagicScrollTimer = null;
            }
        ]]></body>
      </method>

      <method name="setupMagicScroll">
        <parameter name="event"/>
        <body><![CDATA[
            this.clearMagicScroll();

            // If we are at the bottom or top of the view (or left/right when
            // rotated), calculate the difference and start accelerating the
            // scrollbar.
            let diffStart, diffEnd;
            let orient = event.target.getAttribute("orient");
            let scrollbox = document.getAnonymousElementByAttribute(
                           event.target, "anonid", "scrollbox");
            if (orient == "vertical") {
                diffStart = event.clientY - scrollbox.getBoundingClientRect().y;
                diffEnd = scrollbox.getBoundingClientRect().y + scrollbox.getBoundingClientRect().height - event.clientY;
            } else {
                diffStart = event.clientX - scrollbox.getBoundingClientRect().x;
                diffEnd = scrollbox.getBoundingClientRect().x + scrollbox.getBoundingClientRect().width - event.clientX;
            }

            const SCROLLZONE = 55;     // Size (pixels) of the top/bottom view where the scroll starts.
            const MAXTIMEOUT = 250;    // Max and min time interval (ms) between
            const MINTIMEOUT = 30;     // two consecutive scrolls.
            const SCROLLBYHOUR = 0.33; // Part of hour to move for each scroll.
            let insideScrollZone = 0;
            let pxPerHr = event.target.mPixPerMin * 60;
            let scrollBy = Math.floor(pxPerHr * SCROLLBYHOUR);
            if (diffStart < SCROLLZONE) {
                insideScrollZone = SCROLLZONE - diffStart;
                scrollBy *= -1;
            } else if (diffEnd < SCROLLZONE) {
                insideScrollZone = SCROLLZONE - diffEnd;
            }

            if (insideScrollZone) {
                let sbo = scrollbox.boxObject;
                let timeout = MAXTIMEOUT - insideScrollZone * (MAXTIMEOUT - MINTIMEOUT) / SCROLLZONE;
                this.mMagicScrollTimer = setTimeout(() => {
                    sbo.scrollBy(orient == "horizontal" && scrollBy,
                                 orient == "vertical" && scrollBy);
                    this.onEventSweepMouseMove(event);
                }, timeout);
            }
        ]]></body>
      </method>

      <!--
         - Event sweep handlers
        -->
      <method name="onEventSweepMouseMove">
        <parameter name="event"/>
        <body><![CDATA[
            let col = document.calendarEventColumnDragging;
            if (!col) {
                return;
            }

            col.setupMagicScroll(event);

            let dragState = col.mDragState;

            let lateralColumns = col.firstLastShadowColumns();
            let firstCol = lateralColumns.firstCol;
            let firstIndex = lateralColumns.firstIndex;

            // If we leave the view, then stop our internal sweeping and start a
            // real drag session. Someday we need to fix the sweep to soely be a
            // drag session, no sweeping.
            if (event.clientX < (event.target.getBoundingClientRect().x) ||
                event.clientX > (event.target.getBoundingClientRect().x + event.target.getBoundingClientRect().width) ||
                event.clientY < (event.target.getBoundingClientRect().y) ||
                event.clientY > (event.target.getBoundingClientRect().y + event.target.getBoundingClientRect().height)) {
                // Remove the drag state
                for (let column = firstCol, i = firstIndex;
                     column && i < col.mDragState.shadows;
                     column = column.nextSibling, i++) {
                    column.fgboxes.dragbox.removeAttribute("dragging");
                    column.fgboxes.box.removeAttribute("dragging");
                }

                window.removeEventListener("mousemove", col.onEventSweepMouseMove);
                window.removeEventListener("mouseup", col.onEventSweepMouseUp);
                window.removeEventListener("keypress", col.onEventSweepKeypress);
                document.calendarEventColumnDragging = null;
                col.mDragState = null;

                var item = dragState.dragOccurrence;

                // the multiday view currently exhibits a less than optimal strategy
                // in terms of item selection. items don't get automatically selected
                // when clicked and dragged, as to differentiate inline editing from
                // the act of selecting an event. but the application internal drop
                // targets will ask for selected items in order to pull the data from
                // the packets. that's why we need to make sure at least the currently
                // dragged event is contained in the set of selected items.
                let selectedItems = this.getSelectedItems({});
                if (!selectedItems.some(aItem => aItem.hashId == item.hashId)) {
                    col.calendarView.setSelectedItems(1,
                        [event.ctrlKey ? item.parentItem : item]);
                }
                invokeEventDragSession(dragState.dragOccurrence, col);
                return;
            }

            col.fgboxes.box.setAttribute("dragging", "true");
            col.fgboxes.dragbox.setAttribute("dragging", "true");
            let minutesInDay = col.mEndMin - col.mStartMin;

            // check if we need to jump a column
            let jumpedColumns;
            let newcol = col.calendarView.findColumnForClientPoint(event.screenX, event.screenY);
            if (newcol && newcol != col) {
                // Find how many columns we are jumping by subtracting the dates.
                let dur = newcol.mDate.subtractDate(col.mDate);
                jumpedColumns = dur.days;
                jumpedColumns *= dur.isNegative ? -1 : 1;
                if (dragState.dragType == "modify-start") {
                    // prevent dragging the start date after the end date in a new column
                    if ((dragState.limitEndMin - minutesInDay * jumpedColumns) < 0) {
                        return;
                    }
                    dragState.limitEndMin -= minutesInDay * jumpedColumns;
                } else if (dragState.dragType == "modify-end") {
                    // prevent dragging the end date before the start date in a new column
                    if ((dragState.limitStartMin - minutesInDay * jumpedColumns) > minutesInDay) {
                        return;
                    }
                    dragState.limitStartMin -= minutesInDay * jumpedColumns;
                } else if (dragState.dragType == "new") {
                    dragState.limitEndMin -= minutesInDay * jumpedColumns;
                    dragState.limitStartMin -= minutesInDay * jumpedColumns;
                    dragState.jumpedColumns += jumpedColumns;
                }
                // kill our drag state
                for (let column = firstCol, i = firstIndex;
                     column && i < col.mDragState.shadows;
                     column = column.nextSibling, i++) {
                    column.fgboxes.dragbox.removeAttribute("dragging");
                    column.fgboxes.box.removeAttribute("dragging");
                }

                // jump ship
                newcol.acceptInProgressSweep(dragState);

                // restart event handling
                col.onEventSweepMouseMove(event);

                return;
            }

            let mousePos;
            let sizeattr;
            if (col.getAttribute("orient") == "vertical") {
                mousePos = event.screenY - col.parentNode.screenY;
                sizeattr = "height";
            } else {
                mousePos = event.screenX - col.parentNode.screenX;
                sizeattr = "width";
            }
            // don't let mouse position go outside the window edges
            let pos = Math.max(0, mousePos) - dragState.mouseOffset;

            // snap interval: 15 minutes or 1 minute if modifier key is pressed
            let snapIntMin = (event.shiftKey &&
                              !event.ctrlKey &&
                              !event.altKey &&
                              !event.metaKey) ? 1 : 15;
            let interval = col.mPixPerMin * snapIntMin;
            let curmin = Math.floor(pos / interval) * snapIntMin;
            let deltamin = curmin - dragState.origMin;

            let shadowElements;
            if (dragState.dragType == "new") {
                // Extend deltamin in a linear way over the columns
                deltamin += minutesInDay * dragState.jumpedColumns;
                if (deltamin < 0) {
                    // create a new event modifying the start. End time is fixed
                    shadowElements = {
                        shadows: 1 - dragState.jumpedColumns,
                        offset: 0,
                        startMin: curmin,
                        endMin: dragState.origMin
                    };
                } else {
                    // create a new event modifying the end. Start time is fixed
                    shadowElements = {
                        shadows: dragState.jumpedColumns + 1,
                        offset: dragState.jumpedColumns,
                        startMin: dragState.origMin,
                        endMin: curmin
                    };
                }
                dragState.startMin = shadowElements.startMin;
                dragState.endMin = shadowElements.endMin;
            } else if (dragState.dragType == "move") {
                // if we're moving, we modify startMin and endMin of the shadow.
                shadowElements = col.getShadowElements(dragState.origMinStart + deltamin,
                                                       dragState.origMinEnd + deltamin);
                dragState.startMin = shadowElements.startMin;
                dragState.endMin = shadowElements.endMin;
                // Keep track of the last start position because it will help to
                // build the event at the end of the drag session.
                dragState.lastStart = dragState.origMinStart + deltamin;
            } else if (dragState.dragType == "modify-start") {
                // if we're modifying the start, the end time is fixed.
                shadowElements = col.getShadowElements(dragState.origMin + deltamin, dragState.limitEndMin);
                dragState.startMin = shadowElements.startMin;
                dragState.endMin = shadowElements.endMin;

                // but we need to not go past the end; if we hit
                // the end, then we'll clamp to the previous snap interval minute
                if (dragState.startMin >= dragState.limitEndMin) {
                    dragState.startMin = Math.ceil((dragState.limitEndMin - snapIntMin) / snapIntMin) * snapIntMin;
                }
            } else if (dragState.dragType == "modify-end") {
                // if we're modifying the end, the start time is fixed.
                shadowElements = col.getShadowElements(dragState.limitStartMin, dragState.origMin + deltamin);
                dragState.startMin = shadowElements.startMin;
                dragState.endMin = shadowElements.endMin;

                // but we need to not go past the start; if we hit
                // the start, then we'll clamp to the next snap interval minute
                if (dragState.endMin <= dragState.limitStartMin) {
                    dragState.endMin = Math.floor((dragState.limitStartMin + snapIntMin) / snapIntMin) * snapIntMin;
                }
            }
            let currentOffset = shadowElements.offset;
            let currentShadows = shadowElements.shadows;

            // now we can update the shadow boxes position and size
            col.updateShadowsBoxes(dragState.startMin, dragState.endMin,
                                   currentOffset, currentShadows,
                                   sizeattr);

            // update the labels
            lateralColumns = col.firstLastShadowColumns(currentOffset, currentShadows);
            col.updateDragLabels(lateralColumns.firstCol, lateralColumns.lastCol);

            col.mDragState.offset = currentOffset;
            col.mDragState.shadows = currentShadows;
        ]]></body>
      </method>

      <method name="onEventSweepMouseUp">
        <parameter name="event"/>
        <body><![CDATA[
            let col = document.calendarEventColumnDragging;
            if (!col) {
                return;
            }

            let dragState = col.mDragState;

            let lateralColumns = col.firstLastShadowColumns();
            let column = lateralColumns.firstCol;
            let index = lateralColumns.firstIndex;
            while (column && index < dragState.shadows) {
                column.fgboxes.dragbox.removeAttribute("dragging");
                column.fgboxes.box.removeAttribute("dragging");
                column = column.nextSibling;
                index++;
            }

            col.clearMagicScroll();

            window.removeEventListener("mousemove", col.onEventSweepMouseMove);
            window.removeEventListener("mouseup", col.onEventSweepMouseUp);
            window.removeEventListener("keypress", col.onEventSweepKeypress);

            document.calendarEventColumnDragging = null;

            // if the user didn't sweep out at least a few pixels, ignore
            // unless we're in a different column
            if (dragState.origColumn == col) {
                let ignore = false;
                let orient = col.getAttribute("orient");
                let position = orient == "vertical" ? event.screenY : event.screenX;
                if (Math.abs(position - dragState.origLoc) < 3) {
                    ignore = true;
                }

                if (ignore) {
                    col.mDragState = null;
                    return;
                }
            }

            let newStart;
            let newEnd;
            let startTZ;
            let endTZ;
            let dragDay = col.mDate;
            if (dragState.dragType != "new") {
                let oldStart = dragState.dragOccurrence.startDate ||
                               dragState.dragOccurrence.entryDate ||
                               dragState.dragOccurrence.dueDate;
                let oldEnd = dragState.dragOccurrence.endDate ||
                             dragState.dragOccurrence.dueDate ||
                             dragState.dragOccurrence.entryDate;
                newStart = oldStart.clone();
                newEnd = oldEnd.clone();

                // Our views are pegged to the default timezone.  If the event
                // isn't also in the timezone, we're going to need to do some
                // tweaking. We could just do this for every event but
                // getInTimezone is slow, so it's much better to only do this
                // when the timezones actually differ from the view's.
                if (col.mTimezone != newStart.timezone ||
                    col.mTimezone != newEnd.timezone) {
                    startTZ = newStart.timezone;
                    endTZ = newEnd.timezone;
                    newStart = newStart.getInTimezone(col.calendarView.mTimezone);
                    newEnd = newEnd.getInTimezone(col.calendarView.mTimezone);
                }
            }

            if (dragState.dragType == "modify-start") {
                newStart.resetTo(dragDay.year, dragDay.month, dragDay.day,
                                 0, dragState.startMin + col.mStartMin, 0,
                                 newStart.timezone);
            } else if (dragState.dragType == "modify-end") {
                newEnd.resetTo(dragDay.year, dragDay.month, dragDay.day,
                               0, dragState.endMin + col.mStartMin, 0,
                               newEnd.timezone);
            } else if (dragState.dragType == "new") {
                let startDay = dragState.origColumn.mDate;
                let draggedForward = (dragDay.compare(startDay) > 0);
                newStart = draggedForward ? startDay.clone() : dragDay.clone();
                newEnd = draggedForward ? dragDay.clone() : startDay.clone();
                newStart.isDate = false;
                newEnd.isDate = false;
                newStart.resetTo(newStart.year, newStart.month, newStart.day,
                                 0, dragState.startMin + col.mStartMin, 0,
                                 newStart.timezone);
                newEnd.resetTo(newEnd.year, newEnd.month, newEnd.day,
                               0, dragState.endMin + col.mStartMin, 0,
                               newEnd.timezone);

                // Edit the event title on the first of the new event's occurrences
                if (draggedForward) {
                    dragState.origColumn.mCreatedNewEvent = true;
                } else {
                    col.mCreatedNewEvent = true;
                }
            } else if (dragState.dragType == "move") {
                // Figure out the new date-times of the event by adding the duration
                // of the total movement (days and minutes) to the old dates.
                let duration = dragDay.subtractDate(dragState.origColumn.mDate);
                let minutes = dragState.lastStart - dragState.realStart;

                // Since both boxDate and beginMove are dates (note datetimes),
                // subtractDate will only give us a non-zero number of hours on
                // DST changes. While strictly speaking, subtractDate's behavior
                // is correct, we need to move the event a discrete number of
                // days here. There is no need for normalization here, since
                // addDuration does the job for us. Also note, the duration used
                // here is only used to move over multiple days. Moving on the
                // same day uses the minutes from the dragState.
                if (duration.hours == 23) {
                    // entering DST
                    duration.hours++;
                } else if (duration.hours == 1) {
                    // leaving DST
                    duration.hours--;
                }

                if (duration.isNegative) {
                    // Adding negative minutes to a negative duration makes the
                    // duration more positive, but we want more negative, and
                    // vice versa.
                    minutes *= -1;
                }
                duration.minutes = minutes;
                duration.normalize();

                newStart.addDuration(duration);
                newEnd.addDuration(duration);
            }

            // If we tweaked tzs, put times back in their original ones
            if (startTZ) {
                newStart = newStart.getInTimezone(startTZ);
            }
            if (endTZ) {
                newEnd = newEnd.getInTimezone(endTZ);
            }

            if (dragState.dragType == "new") {
                // We won't pass a calendar, since the display calendar is the
                // composite anyway. createNewEvent() will use the selected
                // calendar.
                // TODO We might want to get rid of the extra displayCalendar
                // member.
                col.calendarView.controller.createNewEvent(null,
                                                           newStart,
                                                           newEnd);
            } else if (dragState.dragType == "move" ||
                       dragState.dragType == "modify-start" ||
                       dragState.dragType == "modify-end") {
                col.calendarView.controller.modifyOccurrence(dragState.dragOccurrence,
                                                             newStart, newEnd);
            }
            document.calendarEventColumnDragging = null;
            col.mDragState = null;
        ]]></body>
      </method>

      <!-- This is called by an event box when a grippy on either side is dragged,
         - or when the middle is pressed to drag the event to move it.  We create
         - the same type of view that we use to sweep out a new event, but we
         - initialize it based on the event's values and what type of dragging
         - we're doing.  In addition, we constrain things like not being able to
         - drag the end before the start and vice versa.
        -->
      <method name="startSweepingToModifyEvent">
        <parameter name="aEventBox"/>
        <parameter name="aOccurrence"/>
        <!-- "start", "end", "middle" -->
        <parameter name="aGrabbedElement"/>
        <!-- mouse screenX/screenY from the event -->
        <parameter name="aMouseX"/>
        <parameter name="aMouseY"/>
        <parameter name="aSnapInt"/>
        <body><![CDATA[
            if (!cal.acl.isCalendarWritable(aOccurrence.calendar) ||
                !cal.acl.userCanModifyItem(aOccurrence) ||
                (aOccurrence.calendar instanceof Ci.calISchedulingSupport && aOccurrence.calendar.isInvitation(aOccurrence)) ||
                aOccurrence.calendar.getProperty("capabilities.events.supported") === false) {
                return;
            }

            this.mDragState = {
                origColumn: this,
                dragOccurrence: aOccurrence,
                mouseOffset: 0,
                offset: null,
                shadows: null,
                limitStartMin: null,
                lastStart: 0,
                jumpedColumns: 0
            };

            // snap interval: 15 minutes or 1 minute if modifier key is pressed
            let snapIntMin = aSnapInt || 15;
            let sizeattr;
            if (this.getAttribute("orient") == "vertical") {
                this.mDragState.origLoc = aMouseY;
                sizeattr = "height";
            } else {
                this.mDragState.origLoc = aMouseX;
                sizeattr = "width";
            }

            let mins = this.getStartEndMinutesForOccurrence(aOccurrence);

            // these are only used to compute durations or to compute UI
            // sizes, so offset by this.mStartMin for sanity here (at the
            // expense of possible insanity later)
            mins.start -= this.mStartMin;
            mins.end -= this.mStartMin;

            if (aGrabbedElement == "start") {
                this.mDragState.dragType = "modify-start";
                // we have to use "realEnd" as fixed end value
                this.mDragState.limitEndMin = mins.realEnd;

                // snap start
                this.mDragState.origMin = Math.floor(mins.start / snapIntMin) * snapIntMin;

                // show the shadows and drag labels when clicking on gripbars
                let shadowElements = this.getShadowElements(this.mDragState.origMin,
                                                            this.mDragState.limitEndMin);
                this.mDragState.startMin = shadowElements.startMin;
                this.mDragState.endMin = shadowElements.endMin;
                this.mDragState.shadows = shadowElements.shadows;
                this.mDragState.offset = shadowElements.offset;
                this.updateShadowsBoxes(this.mDragState.origMin, this.mDragState.endMin,
                                        0, this.mDragState.shadows,
                                        sizeattr);

                // update drag labels
                let lastCol = this.firstLastShadowColumns().lastCol;
                this.updateDragLabels(this, lastCol);
            } else if (aGrabbedElement == "end") {
                this.mDragState.dragType = "modify-end";
                // we have to use "realStart" as fixed end value
                this.mDragState.limitStartMin = mins.realStart;

                // snap end
                this.mDragState.origMin = Math.floor(mins.end / snapIntMin) * snapIntMin;

                // show the shadows and drag labels when clicking on gripbars
                let shadowElements = this.getShadowElements(this.mDragState.limitStartMin,
                                                            this.mDragState.origMin);
                this.mDragState.startMin = shadowElements.startMin;
                this.mDragState.endMin = shadowElements.endMin;
                this.mDragState.shadows = shadowElements.shadows;
                this.mDragState.offset = shadowElements.offset;
                this.updateShadowsBoxes(this.mDragState.startMin, this.mDragState.endMin,
                                        shadowElements.offset, this.mDragState.shadows,
                                        sizeattr);

                // update drag labels
                let firstCol = this.firstLastShadowColumns().firstCol;
                this.updateDragLabels(firstCol, this);
            } else if (aGrabbedElement == "middle") {
                this.mDragState.dragType = "move";
                // in a move, origMin will be the start minute of the element where
                // the drag occurs. Along with mouseOffset, it allows to track the
                // shadow position. origMinStart and origMinEnd allow to figure out
                // the real shadow size.
                // We snap to the start and add the real duration to find the end
                let limitDurationMin = mins.realEnd - mins.realStart;
                this.mDragState.origMin = Math.floor(mins.start / snapIntMin) * snapIntMin;
                this.mDragState.origMinStart = Math.floor(mins.realStart / snapIntMin) * snapIntMin;
                this.mDragState.origMinEnd = this.mDragState.origMinStart + limitDurationMin;
                // Keep also track of the real Start, it will be used at the end
                // of the drag session to calculate the new start and end datetimes.
                this.mDragState.realStart = mins.realStart;

                let shadowElements = this.getShadowElements(this.mDragState.origMinStart,
                                                            this.mDragState.origMinEnd);
                this.mDragState.shadows = shadowElements.shadows;
                this.mDragState.offset = shadowElements.offset;
                // we need to set a mouse offset, since we're not dragging from
                // one end of the element
                if (aEventBox) {
                    if (this.getAttribute("orient") == "vertical") {
                        this.mDragState.mouseOffset = aMouseY - aEventBox.screenY;
                    } else {
                        this.mDragState.mouseOffset = aMouseX - aEventBox.screenX;
                    }
                }
            } else {
                // Invalid grabbed element.
            }

            document.calendarEventColumnDragging = this;

            window.addEventListener("mousemove", this.onEventSweepMouseMove);
            window.addEventListener("mouseup", this.onEventSweepMouseUp);
            window.addEventListener("keypress", this.onEventSweepKeypress);
        ]]></body>
      </method>

      <!-- called by sibling columns to tell us to take over the sweeping
         - of an event.
        -->
      <method name="acceptInProgressSweep">
        <parameter name="aDragState"/>
        <body><![CDATA[
            this.mDragState = aDragState;
            document.calendarEventColumnDragging = this;

            this.fgboxes.box.setAttribute("dragging", "true");
            this.fgboxes.dragbox.setAttribute("dragging", "true");

            // the same event handlers are still valid,
            // because they use document.calendarEventColumnDragging.
            // So we really don't have anything to do here.
        ]]></body>
      </method>

      <method name="updateDragLabels">
        <parameter name="aFirstColumn"/>
        <parameter name="aLastColumn"/>
        <body><![CDATA[
            const { cal } = ChromeUtils.import("resource://calendar/modules/calUtils.jsm");
            if (!this.mDragState) {
                return;
            }

            let firstColumn = aFirstColumn || this;
            let lastColumn = aLastColumn || this;
            let realstartmin = this.mDragState.startMin + this.mStartMin;
            let realendmin = this.mDragState.endMin + this.mStartMin;
            let starthr = Math.floor(realstartmin / 60);
            let startmin = realstartmin % 60;

            let endhr = Math.floor(realendmin / 60);
            let endmin = realendmin % 60;

            let timeFormatter = cal.getDateFormatter();

            let jsTime = new Date();
            jsTime.setHours(starthr, startmin);
            let startstr = timeFormatter.formatTime(cal.dtz.jsDateToDateTime(jsTime, cal.dtz.floating));
            jsTime.setHours(endhr, endmin);
            let endstr = timeFormatter.formatTime(cal.dtz.jsDateToDateTime(jsTime, cal.dtz.floating));

            // Tasks without Entry or Due date have a string as first label
            // instead of the time.
            if (cal.item.isToDo(this.mDragState.dragOccurrence)) {
                if (!this.mDragState.dragOccurrence.dueDate) {
                    startstr = cal.l10n.getCalString("dragLabelTasksWithOnlyEntryDate");
                } else if (!this.mDragState.dragOccurrence.entryDate) {
                    startstr = cal.l10n.getCalString("dragLabelTasksWithOnlyDueDate");
                }
            }
            firstColumn.fgboxes.startlabel.setAttribute("value", startstr);
            lastColumn.fgboxes.endlabel.setAttribute("value", endstr);

        ]]></body>
      </method>

      <method name="setDayStartEndMinutes">
        <parameter name="aDayStartMin"/>
        <parameter name="aDayEndMin"/>
        <body><![CDATA[
            if (aDayStartMin < this.mStartMin || aDayStartMin > aDayEndMin ||
                aDayEndMin > this.mEndMin) {
                throw Cr.NS_ERROR_INVALID_ARG;
            }
            if (this.mDayStartMin != aDayStartMin || this.mDayEndMin != aDayEndMin) {
                this.mDayStartMin = aDayStartMin;
                this.mDayEndMin = aDayEndMin;
            }
        ]]></body>
      </method>

      <method name="getClickedDateTime">
        <parameter name="event"/>
        <body><![CDATA[
            let newStart = this.date.clone();
            newStart.isDate = false;
            newStart.hour = 0;

            const ROUND_INTERVAL = 15;

            let interval = this.mPixPerMin * ROUND_INTERVAL;
            let pos;
            if (this.getAttribute("orient") == "vertical") {
                pos = event.screenY - this.parentNode.screenY;
            } else {
                pos = event.screenX - this.parentNode.screenX;
            }
            newStart.minute = (Math.round(pos / interval) * ROUND_INTERVAL) + this.mStartMin;
            event.stopPropagation();
            return newStart;
        ]]></body>
      </method>
    </implementation>

    <handlers>
      <handler event="dblclick" button="0"><![CDATA[
          if (this.calendarView.controller) {
              let newStart = this.getClickedDateTime(event);
              this.calendarView.controller.createNewEvent(null, newStart, null);
          }
      ]]></handler>

      <handler event="click" button="0"><![CDATA[
          if (!(event.ctrlKey || event.metaKey)) {
              this.calendarView.setSelectedItems(0, []);
              this.focus();
          }
      ]]></handler>

      <handler event="click" button="2"><![CDATA[
          let newStart = this.getClickedDateTime(event);
          this.calendarView.selectedDateTime = newStart;
      ]]></handler>

      <!-- mouse down handler, in empty event column regions.  Starts sweeping out a new
         - event.
        -->
      <handler event="mousedown"><![CDATA[
          // select this column
          this.calendarView.selectedDay = this.mDate;

          // If the selected calendar is readOnly, we don't want any sweeping.
          let calendar = getSelectedCalendar();
          if (!cal.acl.isCalendarWritable(calendar) ||
              calendar.getProperty("capabilities.events.supported") === false) {
              return;
          }

          // Only start sweeping out an event if the left button was clicked
          if (event.button != 0) {
              return;
          }

          this.mDragState = {
              origColumn: this,
              dragType: "new",
              mouseOffset: 0,
              offset: null,
              shadows: null,
              limitStartMin: null,
              limitEndMin: null,
              jumpedColumns: 0
          };

          // snap interval: 15 minutes or 1 minute if modifier key is pressed
          let snapIntMin = (event.shiftKey &&
                            !event.ctrlKey &&
                            !event.altKey &&
                            !event.metaKey) ? 1 : 15;
          let interval = this.mPixPerMin * snapIntMin;

          if (this.getAttribute("orient") == "vertical") {
              this.mDragState.origLoc = event.screenY;
              this.mDragState.origMin = Math.floor((event.screenY - this.parentNode.screenY) / interval) * snapIntMin;
              this.mDragState.limitEndMin = this.mDragState.origMin;
              this.mDragState.limitStartMin = this.mDragState.origMin;
              this.fgboxes.dragspacer.setAttribute("height", this.mDragState.origMin * this.mPixPerMin);
          } else {
              this.mDragState.origLoc = event.screenX;
              this.mDragState.origMin = Math.floor((event.screenX - this.parentNode.screenX) / interval) * snapIntMin;
              this.fgboxes.dragspacer.setAttribute("width", this.mDragState.origMin * this.mPixPerMin);
          }

          document.calendarEventColumnDragging = this;

          window.addEventListener("mousemove", this.onEventSweepMouseMove);
          window.addEventListener("mouseup", this.onEventSweepMouseUp);
          window.addEventListener("keypress", this.onEventSweepKeypress);
      ]]></handler>
    </handlers>
  </binding>

  <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"
                 xbl:inherits="orient,readonly,flashing,alarm,allday,priority,progress,
                               status,calendar,categories,calendar-uri,calendar-id,todoType"
                 flex="1">
          <xul:box class="calendar-event-selection" orient="horizontal" flex="1">
            <xul:stack anonid="eventbox"
                       align="stretch"
                       class="calendar-event-box-container"
                       flex="1"
                       xbl:inherits="context,parentorient=orient,readonly,flashing,alarm,allday,priority,progress,status,calendar,categories">
              <xul:hbox class="calendar-event-details"
                        anonid="calendar-event-details"
                        align="start">
                <xul:image anonid="item-icon"
                           class="calendar-item-image"
                           xbl:inherits="progress,allday,itemType,todoType"/>
                <xul:vbox flex="1">
                  <xul:label anonid="event-name" class="calendar-event-details-core title-desc" crop="end"/>
                  <xul:textbox anonid="event-name-textbox"
                               class="plain calendar-event-details-core calendar-event-name-textbox"
                               hidden="true"
                               wrap="true"/>
                  <xul:label anonid="event-location" class="calendar-event-details-core location-desc" crop="end"/>
                </xul:vbox>
                <xul:hbox anonid="alarm-icons-box"
                          class="alarm-icons-box"
                          align="top"
                          xbl:inherits="flashing"/>
                <xul:image anonid="item-classification-box"
                           class="item-classification-box"/>
              </xul:hbox>
              <xul:stack mousethrough="always">
                <xul:calendar-category-box anonid="category-box" xbl:inherits="categories" pack="end" />
              </xul:stack>
              <xul:box xbl:inherits="orient">
                <xul:calendar-event-gripbar anonid="gripbar1"
                                            class="calendar-event-box-grippy-top"
                                            mousethrough="never"
                                            whichside="start"
                                            xbl:inherits="parentorient=orient"/>
                <xul:spacer mousethrough="always" flex="1"/>
                <xul:calendar-event-gripbar anonid="gripbar2"
                                            class="calendar-event-box-grippy-bottom"
                                            mousethrough="never"
                                            whichside="end"
                                            xbl:inherits="parentorient=orient"/>
              </xul:box>
              <!-- Do not insert anything here, otherwise the event boxes will
                   not be resizable using the gripbars. If you want to insert
                   additional elements, do so above the box with the gripbars. -->
            </xul:stack>
          </xul:box>
        </xul:box>
      </xul:box>
    </content>

    <implementation>
      <constructor><![CDATA[
          this.orient = this.getAttribute("orient");
      ]]></constructor>

      <!-- fields -->
      <field name="mParentColumn">null</field>

      <!-- methods/properties -->
      <method name="setAttribute">
        <parameter name="aAttr"/>
        <parameter name="aVal"/>
        <body><![CDATA[
            let needsrelayout = false;
            if (aAttr == "orient") {
                if (this.getAttribute("orient") != aVal) {
                    needsrelayout = true;
                }
            }

            // this should be done using lookupMethod(), see bug 286629
            let ret = XULElement.prototype.setAttribute.call(this, aAttr, aVal);

            if (needsrelayout) {
                let eventbox = document.getAnonymousElementByAttribute(this, "anonid", "eventbox");
                eventbox.setAttribute("orient", aVal);
                let gb1 = document.getAnonymousElementByAttribute(this, "anonid", "gripbar1");
                gb1.parentorient = aVal;
                let gb2 = document.getAnonymousElementByAttribute(this, "anonid", "gripbar2");
                gb2.parentorient = aVal;
            }

            return ret;
        ]]></body>
      </method>

      <method name="getOptimalMinSize">
        <body><![CDATA[
            if (this.getAttribute("orient") == "vertical") {
                let minHeight = getOptimalMinimumHeight(this.eventNameLabel) +
                                getSummarizedStyleValues(document.getAnonymousElementByAttribute(this, "anonid", "eventbox"), ["margin-bottom", "margin-top"]) +
                                getSummarizedStyleValues(this, ["border-bottom-width", "border-top-width"]);
                this.setAttribute("minheight", minHeight);
                this.setAttribute("minwidth", "1");
                return minHeight;
            } else {
                this.eventNameLabel.setAttribute("style", "min-width: 2em");
                let minWidth = getOptimalMinimumWidth(this.eventNameLabel);
                this.setAttribute("minwidth", minWidth);
                this.setAttribute("minheight", "1");
                return minWidth;
            }
        ]]></body>
      </method>

      <property name="parentColumn"
        onget="return this.mParentColumn;"
        onset="return (this.mParentColumn = val);"/>

      <property name="startMinute" readonly="true">
        <getter><![CDATA[
            if (!this.mOccurrence) {
                return 0;
            }
            let startDate = this.mOccurrence.startDate || this.mOccurrence.entryDate;
            return startDate.hour * 60 + startDate.minute;
        ]]></getter>
      </property>

      <property name="endMinute" readonly="true">
        <getter><![CDATA[
            if (!this.mOccurrence) {
                return 0;
            }
            let endDate = this.mOccurrence.endDate || this.mOccurrence.dueDate;
            return endDate.hour * 60 + endDate.minute;
        ]]></getter>
      </property>

      <method name="setEditableLabel">
        <body><![CDATA[
            let evl = this.eventNameLabel;
            let item = this.mOccurrence;

            if (item.title && item.title != "") {
                // Use <description> textContent so it can wrap.
                evl.textContent = item.title;
            } else {
                evl.textContent = cal.l10n.getCalString("eventUntitled");
            }

            let gripbar = document.getAnonymousElementByAttribute(this, "anonid", "gripbar1").getBoundingClientRect().height;
            let height = document.getAnonymousElementByAttribute(this, "anonid", "eventbox").getBoundingClientRect().height;
            evl.setAttribute("style", "max-height: " + Math.max(0, height-gripbar * 2) + "px");
        ]]></body>
      </method>
    </implementation>

    <handlers>
      <handler event="mousedown" button="0"><![CDATA[
          event.stopPropagation();

          if (this.mEditing) {
              return;
          }

          this.parentColumn.calendarView.selectedDay = this.parentColumn.mDate;
          this.mMouseX = event.screenX;
          this.mMouseY = event.screenY;

          let whichside = event.whichside;
          if (whichside) {
              this.calendarView.setSelectedItems(1,
                  [event.ctrlKey ? this.mOccurrence.parentItem : this.mOccurrence]);

              let snapIntMin = (event.shiftKey &&
                                !event.ctrlKey &&
                                !event.altKey &&
                                !event.metaKey) ? 1 : 15;
              // start edge resize drag
              this.parentColumn.startSweepingToModifyEvent(this, this.mOccurrence, whichside,
                                                           event.screenX, event.screenY,
                                                           snapIntMin);
          } else {
              // may be click or drag,
              // so wait for mousemove (or mouseout if fast) to start item move drag
              this.mInMouseDown = true;
          }
      ]]></handler>

      <handler event="mousemove"><![CDATA[
          if (!this.mInMouseDown) {
              return;
          }

          let deltaX = Math.abs(event.screenX - this.mMouseX);
          let deltaY = Math.abs(event.screenY - this.mMouseY);
          // more than a 3 pixel move?
          if ((deltaX * deltaX + deltaY * deltaY) > 9) {
              if (this.parentColumn) {
                  if (this.editingTimer) {
                      clearTimeout(this.editingTimer);
                      this.editingTimer = null;
                  }

                  this.calendarView.setSelectedItems(1, [this.mOccurrence]);

                  this.mEditing = false;

                  this.parentColumn.startSweepingToModifyEvent(this, this.mOccurrence, "middle", this.mMouseX, this.mMouseY);
                  this.mInMouseDown = false;
              }
          }
      ]]></handler>

      <handler event="mouseout"><![CDATA[
          if (!this.mEditing && this.mInMouseDown && this.parentColumn) {
              if (this.editingTimer) {
                  clearTimeout(this.editingTimer);
                  this.editingTimer = null;
              }

              this.calendarView.setSelectedItems(1, [this.mOccurrence]);

              this.mEditing = false;

              this.parentColumn.startSweepingToModifyEvent(this, this.mOccurrence, "middle", this.mMouseX, this.mMouseY);
              this.mInMouseDown = false;
          }
      ]]></handler>

      <handler event="mouseup"><![CDATA[
          if (this.mEditing) {
              return;
          }

          this.mInMouseDown = false;
      ]]></handler>

      <handler event="mouseover"><![CDATA[
          if (this.calendarView && this.calendarView.controller) {
              event.stopPropagation();
              onMouseOverItem(event);
          }
      ]]></handler>
    </handlers>
  </binding>

  <binding id="calendar-multiday-view" extends="chrome://calendar/content/calendar-base-view.xml#calendar-base-view">
    <content flex="1" orient="vertical" xbl:inherits="context,item-context">
      <xul:box anonid="mainbox" class="multiday-view-main-box" flex="1">
        <!-- these boxes are tricky: width or height in CSS depend on orient -->
        <xul:box anonid="labelbox" class="multiday-view-label-box">
          <xul:box anonid="labeltimespacer" class="multiday-view-label-time-spacer"/>
          <xul:box anonid="labeldaybox"
                   class="multiday-view-label-day-box"
                   flex="1"
                   equalsize="always"/>
          <xul:box anonid="labelscrollbarspacer" class="multiday-labelscrollbarspacer"/>
        </xul:box>
        <xul:box anonid="headerbox" class="multiday-view-header-box">
          <xul:box anonid="headertimespacer" class="multiday-view-header-time-spacer"/>
          <xul:box anonid="headerdaybox" class="multiday-view-header-day-box" flex="1" equalsize="always" />
          <xul:box anonid="headerscrollbarspacer" class="multiday-headerscrollbarspacer"/>
        </xul:box>
        <xul:scrollbox anonid="scrollbox" flex="1"
                       onoverflow="adjustScrollBarSpacers();" onunderflow="adjustScrollBarSpacers();">
          <!-- the orient of the calendar-time-bar needs to be the opposite of the parent -->
          <xul:calendar-time-bar xbl:inherits="orient" anonid="timebar"/>
          <xul:box anonid="daybox" class="multiday-view-day-box" flex="1"
                   equalsize="always"/>
        </xul:scrollbox>
      </xul:box>
    </content>

    <implementation implements="calICalendarView">
      <constructor><![CDATA[
          // get day start/end hour from prefs and set on the view
          this.setDayStartEndMinutes(Services.prefs.getIntPref("calendar.view.daystarthour", 8) * 60,
                                     Services.prefs.getIntPref("calendar.view.dayendhour", 17) * 60);

          // initially scroll to the day start hour in the view
          this.scrollToMinute(this.mDayStartMin);

          // get visible hours from prefs and set on the view
          let visibleMinutes = Services.prefs.getIntPref("calendar.view.visiblehours", 9) * 60;
          this.setVisibleMinutes(visibleMinutes);

          // set the time interval for the time indicator timer
          this.setTimeIndicatorInterval(Services.prefs.getIntPref("calendar.view.timeIndicatorInterval", 15));
          this.enableTimeIndicator();

          this.reorient();
      ]]></constructor>

      <property name="daysInView" readonly="true">
        <getter><![CDATA[
            return this.labeldaybox.childNodes && this.labeldaybox.childNodes.length;
        ]]></getter>
      </property>

      <property name="supportsZoom" readonly="true"
                onget="return true;"/>
      <property name="supportsRotation" readonly="true"
                onget="return true"/>

      <method name="setTimeIndicatorInterval">
        <parameter name="aPrefInterval"/>
        <body><![CDATA[
            // If the preference just edited by the user is outside the valid
            // range [0, 1440], we change it into the nearest limit (0 or 1440).
            let newTimeInterval = Math.max(0, Math.min(1440, aPrefInterval));
            if (newTimeInterval != aPrefInterval) {
                Services.prefs.setIntPref("calendar.view.timeIndicatorInterval", newTimeInterval);
            }

            if (newTimeInterval != this.mTimeIndicatorInterval) {
                this.mTimeIndicatorInterval = newTimeInterval;
            }
            if (this.mTimeIndicatorInterval == 0) {
                timeIndicator.cancel();
            }
        ]]></body>
      </method>

      <method name="enableTimeIndicator">
        <body><![CDATA[
            // Hide or show the time indicator if the preference becomes 0 or greater than 0.
            let hideIndicator = this.mTimeIndicatorInterval == 0;
            setBooleanAttribute(this.timeBarTimeIndicator, "hidden", hideIndicator);
            let todayColumn = this.findColumnForDate(this.today());
            if (todayColumn) {
                setBooleanAttribute(todayColumn.column.timeIndicatorBox, "hidden", hideIndicator);
            }
            // Update the timer but only under some circumstances, otherwise
            // it will update the wrong view or it will start without need.
            let currentMode = document.getElementById("modeBroadcaster").getAttribute("mode");
            let currView = currentView().type;
            if (currentMode == "calendar" && currView == this.type && !hideIndicator &&
                (currView == "day" || currView == "week")) {
                this.updateTimeIndicatorPosition(true);
            }
        ]]></body>
      </method>

      <method name="updateTimeIndicatorPosition">
        <parameter name="aUpdateTheTimer"/>
        <parameter name="aPpmChanged"/>
        <parameter name="aViewChanged"/>
        <body><![CDATA[
            let now = cal.dtz.now();
            let nowMinutes = now.hour * 60 + now.minute;
            if (aUpdateTheTimer) {
                let prefInt = this.mTimeIndicatorInterval;
                if (prefInt == 0) {
                    timeIndicator.cancel();
                    return;
                }

                // Increase the update interval if pixels per minute is small.
                let oldPrefInt = prefInt;
                if (aPpmChanged && this.mPixPerMin < 0.6) {
                    prefInt = Math.round(prefInt / this.mPixPerMin);
                }
                if (!aPpmChanged || aViewChanged || oldPrefInt != prefInt) {
                    // Synchronize the timer with a multiple of the interval.
                    let firstInterval = (prefInt - nowMinutes % prefInt) * 60 - now.second;
                    if (timeIndicator.timer) {
                        timeIndicator.cancel();
                    }
                    timeIndicator.lastView = this.id;
                    timeIndicator.timer = setTimeout(() => {
                        this.updateTimeIndicatorPosition(false);
                        timeIndicator.start(prefInt * 60, this);
                    }, firstInterval * 1000);

                    // Set the time for the first positioning of the indicator.
                    let time = Math.floor(nowMinutes / prefInt) * prefInt;
                    document.getElementById("day-view").mTimeIndicatorMinutes = time;
                    document.getElementById("week-view").mTimeIndicatorMinutes = time;
                }
            } else if (aUpdateTheTimer === false) {
                // Set the time for every positioning after the first
                document.getElementById("day-view").mTimeIndicatorMinutes = nowMinutes;
                document.getElementById("week-view").mTimeIndicatorMinutes = nowMinutes;
            }
            // Update the position of the indicator.
            let position = Math.round(this.mPixPerMin * this.mTimeIndicatorMinutes) - 1;
            let posAttr = (this.orient == "vertical" ? "top: " : "left: ");

            if (this.timeBarTimeIndicator) {
                this.timeBarTimeIndicator.setAttribute("style", posAttr + position + "px;");
            }

            let todayColumn = this.findColumnForDate(this.today());
            if (todayColumn) {
                todayColumn.column.timeIndicatorBox.setAttribute("style", "margin-" + posAttr + position + "px;");
            }
        ]]></body>
      </method>

      <method name="handlePreference">
        <parameter name="aSubject"/>
        <parameter name="aTopic"/>
        <parameter name="aPreference"/>
        <body><![CDATA[
            aSubject.QueryInterface(Ci.nsIPrefBranch);
            switch (aPreference) {
                case "calendar.view.daystarthour":
                    this.setDayStartEndMinutes(aSubject.getIntPref(aPreference) * 60,
                                               this.mDayEndMin);
                    this.refreshView();
                    break;

                case "calendar.view.dayendhour":
                    this.setDayStartEndMinutes(this.mDayStartMin,
                                               aSubject.getIntPref(aPreference) * 60);
                    this.refreshView();
                    break;

                case "calendar.view.visiblehours":
                    this.setVisibleMinutes(aSubject.getIntPref(aPreference) * 60);
                    this.refreshView();
                    break;

                case "calendar.view.timeIndicatorInterval":
                    this.setTimeIndicatorInterval(aSubject.getIntPref(aPreference));
                    this.enableTimeIndicator();
                    break;

                default:
                    this.handleCommonPreference(aSubject, aTopic, aPreference);
                    break;
            }
        ]]></body>
      </method>

      <method name="onResize">
        <parameter name="aRealSelf"/>
        <body><![CDATA[
            let self = aRealSelf || this; // eslint-disable-line consistent-this
            let isARelayout = !aRealSelf;
            let scrollbox = document.getAnonymousElementByAttribute(self, "anonid", "scrollbox");
            let size;
            if (self.orient == "horizontal") {
                size = scrollbox.getBoundingClientRect().width;
            } else {
                size = scrollbox.getBoundingClientRect().height;
            }
            let ppm = size / self.mVisibleMinutes;
            ppm = Math.floor(ppm * 1000) / 1000;
            if (ppm < self.mMinPixelsPerMinute) {
                ppm = self.mMinPixelsPerMinute;
            }
            let ppmChanged = (self.pixelsPerMinute != ppm);
            self.pixelsPerMinute = ppm;
            setTimeout(() => self.scrollToMinute(self.mFirstVisibleMinute), 0);

            // Fit the weekday labels while scrolling.
            self.adjustWeekdayLength(self.getAttribute("orient") == "horizontal");

            // Adjust the time indicator position and the related timer.
            if (this.mTimeIndicatorInterval != 0) {
                let viewChanged = isARelayout && (timeIndicator.lastView != this.id);
                let currentMode = document.getElementById("modeBroadcaster").getAttribute("mode");
                if (currentMode == "calendar" && (!timeIndicator.timer || ppmChanged || viewChanged)) {
                    self.updateTimeIndicatorPosition(true, ppmChanged, viewChanged);
                }
            }
        ]]></body>
      </method>

      <!-- mDateList will always be sorted before being set -->
      <field name="mDateList">null</field>
      <!-- array of { date: calIDatetime, column: colbox, header: hdrbox }  -->
      <field name="mDateColumns">null</field>
      <field name="mPixPerMin">0.6</field>
      <field name="mMinPixelsPerMinute">0.1</field>
      <field name="mSelectedDayCol">null</field>
      <field name="mSelectedDay">null</field>
      <field name="mStartMin">0</field>
      <field name="mEndMin">24 * 60</field>
      <field name="mDayStartMin">0</field>
      <field name="mDayEndMin">0</field>
      <field name="mVisibleMinutes">9 * 60</field>
      <field name="mClickedTime">null</field>
      <field name="mTimeIndicatorInterval">15</field>
      <field name="mModeHandler">null</field>
      <field name="mTimeIndicatorMinutes">0</field>

      <field name="mTimezoneObserver"><![CDATA[
        ({
            observe: () => {
                this.timezone = cal.dtz.defaultTimezone;
                this.refreshView();
                this.updateTimeIndicatorPosition(true);
            }
        })
      ]]></field>

      <method name="flashAlarm">
        <parameter name="aAlarmItem"/>
        <parameter name="aStop"/>
        <body><![CDATA[
            // Helper function to save some duplicate code
            function setFlashingAttribute(aBox) {
                if (aStop) {
                    aBox.removeAttribute("flashing");
                } else {
                    aBox.setAttribute("flashing", "true");
                }
            }

            let showIndicator = Services.prefs.getBoolPref("calendar.alarms.indicator.show", true);
            let totaltime = Services.prefs.getIntPref("calendar.alarms.indicator.totaltime", 3600);

            if (!aStop && (!showIndicator || totaltime < 1)) {
                // No need to animate if the indicator should not be shown.
                return;
            }


            // Make sure the flashing attribute is set or reset on all visible
            // boxes.
            let columns = this.findColumnsForItem(aAlarmItem);
            for (let col of columns) {
                let box = col.column.findChunkForOccurrence(aAlarmItem);
                if (box && box.eventbox) {
                    setFlashingAttribute(box.eventbox);
                }
                box = col.header.findBoxForItem(aAlarmItem);
                if (box) {
                    setFlashingAttribute(box);
                }
            }

            if (aStop) {
                // We are done flashing, prevent newly created event boxes from flashing.
                delete this.mFlashingEvents[aAlarmItem.hashId];
            } else {
                // Set up a timer to stop the flashing after the total time.
                this.mFlashingEvents[aAlarmItem.hashId] = aAlarmItem;
                setTimeout(() => this.flashAlarm(aAlarmItem, true), totaltime);
            }
        ]]></body>
      </method>

      <!-- calICalendarView -->
      <property name="supportsDisjointDates"
        onget="return true"/>
      <property name="hasDisjointDates"
        onget="return (this.mDateList != null);"/>

      <property name="startDate">
        <getter><![CDATA[
            if (this.mStartDate) {
                return this.mStartDate;
            } else if (this.mDateList && this.mDateList.length > 0) {
                return this.mDateList[0];
            } else {
                return null;
            }
        ]]></getter>
      </property>

      <property name="endDate">
        <getter><![CDATA[
            if (this.mEndDate) {
                return this.mEndDate;
            } else if (this.mDateList && this.mDateList.length > 0) {
                return this.mDateList[this.mDateList.length - 1];
            } else {
                return null;
            }
        ]]></getter>
      </property>

      <method name="showDate">
        <parameter name="aDate"/>
        <body><![CDATA[
            let targetDate = aDate.getInTimezone(this.mTimezone);
            targetDate.isDate = true;

            if (this.mStartDate && this.mEndDate) {
                if (this.mStartDate.compare(targetDate) <= 0 &&
                    this.mEndDate.compare(targetDate) >= 0) {
                    return;
                }
            } else if (this.mDateList) {
                for (let date of this.mDateList) {
                    // if date is already visible, nothing to do
                    if (date.compare(targetDate) == 0) {
                        return;
                    }
                }
            }

            // if we're only showing one date, then continue
            // to only show one date; otherwise, show the week.
            if (this.numVisibleDates == 1) {
                this.setDateRange(aDate, aDate);
            } else {
                this.setDateRange(aDate.startOfWeek, aDate.endOfWeek);
            }

            this.selectedDay = targetDate;
        ]]></body>
      </method>

      <method name="setDateRange">
        <parameter name="aStartDate"/>
        <parameter name="aEndDate"/>
        <body><![CDATA[
            this.rangeStartDate = aStartDate;
            this.rangeEndDate = aEndDate;

            let viewStart = aStartDate.getInTimezone(this.mTimezone);
            let viewEnd = aEndDate.getInTimezone(this.mTimezone);

            viewStart.isDate = true;
            viewStart.makeImmutable();
            viewEnd.isDate = true;
            viewEnd.makeImmutable();
            this.mStartDate = viewStart;
            this.mEndDate = viewEnd;

            // goToDay are called when toggle the values below. The attempt to fix
            // Bug 872063 has modified the behavior of setDateRange, which doesn't
            // always refresh the view anymore. That is not the expected behavior
            // by goToDay. Add checks here to determine if the view need to be
            // refreshed.

            // First, check values of tasksInView, workdaysOnly, showCompleted.
            // Their status will determine the value of toggleStatus, which is
            // saved to this.mToggleStatus during last call to relayout()
            let toggleStatus = 0;

            if (this.mTasksInView) {
                toggleStatus |= this.mToggleStatusFlag.TasksInView;
            }
            if (this.mWorkdaysOnly) {
                toggleStatus |= this.mToggleStatusFlag.WorkdaysOnly;
            }
            if (this.mShowCompleted) {
                toggleStatus |= this.mToggleStatusFlag.ShowCompleted;
            }

            // Update the navigation bar only when changes are related to the current view.
            if (this.isVisible()) {
                cal.navigationBar.setDateRange(viewStart, viewEnd);
            }

            // Check whether view range has been changed since last call to
            // relayout()
            if (!this.mViewStart || !this.mViewEnd ||
                this.mViewEnd.compare(viewEnd) != 0 ||
                this.mViewStart.compare(viewStart) != 0 ||
                this.mToggleStatus != toggleStatus) {
                this.refresh();
            }
        ]]></body>
      </method>

      <method name="getDateList">
        <parameter name="aCount"/>
        <body><![CDATA[
            let dates = [];
            if (this.mStartDate && this.mEndDate) {
                let date = this.mStartDate.clone();
                while (date.compare(this.mEndDate) <= 0) {
                    dates.push(date.clone());
                    date.day += 1;
                }
            } else if (this.mDateList) {
                for (let date of this.mDateList) {
                    dates.push(date.clone());
                }
            }

            aCount.value = dates.length;
            return dates;
        ]]></body>
      </method>

      <property name="selectedDateTime">
        <getter><![CDATA[
            return this.mClickedTime;
        ]]></getter>
        <setter><![CDATA[
            this.mClickedTime = val;
        ]]></setter>
      </property>

      <property name="selectedDay">
        <getter><![CDATA[
            let selected;
            if (this.numVisibleDates == 1) {
                selected = this.mDateColumns[0].date;
            } else if (this.mSelectedDay) {
                selected = this.mSelectedDay;
            } else if (this.mSelectedDayCol) {
                selected = this.mSelectedDayCol.date;
            }

            // TODO Make sure the selected day is valid
            // TODO select now if it is in the range?
            return selected;
        ]]></getter>
        <setter><![CDATA[
            // ignore if just 1 visible, it's always selected,
            // but we don't indicate it
            if (this.numVisibleDates == 1) {
                this.fireEvent("dayselect", val);
                return val;
            }

            if (this.mSelectedDayCol) {
                this.mSelectedDayCol.column.selected = false;
                this.mSelectedDayCol.header.removeAttribute("selected");
            }

            if (val) {
                this.mSelectedDayCol = this.findColumnForDate(val);
                if (this.mSelectedDayCol) {
                    this.mSelectedDay = this.mSelectedDayCol.date;
                    this.mSelectedDayCol.column.selected = true;
                    this.mSelectedDayCol.header.setAttribute("selected", "true");
                } else {
                    this.mSelectedDay = val;
                }
            }
            this.fireEvent("dayselect", val);
            return val;
        ]]></setter>
      </property>

      <method name="getSelectedItems">
        <parameter name="aCount"/>
        <body><![CDATA[
            aCount.value = this.mSelectedItems.length;
            return this.mSelectedItems;
        ]]></body>
      </method>
      <method name="setSelectedItems">
        <parameter name="aCount"/>
        <parameter name="aItems"/>
        <parameter name="aSuppressEvent"/>
        <body><![CDATA[
            if (this.mSelectedItems) {
                for (let item of this.mSelectedItems) {
                    for (let occ of this.getItemOccurrencesInView(item)) {
                        let cols = this.findColumnsForItem(occ);
                        for (let col of cols) {
                            col.header.unselectOccurrence(occ);
                            col.column.unselectOccurrence(occ);
                        }
                    }
                }
            }
            this.mSelectedItems = aItems || [];

            for (let item of this.mSelectedItems) {
                for (let occ of this.getItemOccurrencesInView(item)) {
                    let cols = this.findColumnsForItem(occ);
                    if (cols.length > 0) {
                        let start = item.startDate || item.entryDate || item.dueDate;
                        for (let col of cols) {
                            if (start.isDate) {
                                col.header.selectOccurrence(occ);
                            } else {
                                col.column.selectOccurrence(occ);
                            }
                        }
                    }
                }
            }

            if (!aSuppressEvent) {
                this.fireEvent("itemselect", this.mSelectedItems);
            }
        ]]></body>
      </method>

      <method name="getItemOccurrencesInView">
        <parameter name="aItem"/>
        <body><![CDATA[
            if (aItem.recurrenceInfo && aItem.recurrenceStartDate) {
                // if selected a parent item, show occurrence(s) in view range
                return aItem.getOccurrencesBetween(this.startDate, this.queryEndDate, {}, 0);
            } else if (aItem.recurrenceStartDate) {
                return [aItem];
            } else { // undated todo
                return [];
            }
        ]]></body>
      </method>

      <method name="centerSelectedItems">
        <body><![CDATA[
            let displayTZ = cal.dtz.defaultTimezone;
            let lowMinute = 24 * 60;
            let highMinute = 0;

            for (let item of this.mSelectedItems) {
                let startDateProperty = cal.dtz.startDateProp(item);
                let endDateProperty = cal.dtz.endDateProp(item);

                let occs = [];
                if (item.recurrenceInfo) {
                    // if selected a parent item, show occurrence(s) in view range
                    occs = item.getOccurrencesBetween(this.startDate, this.queryEndDate, {}, 0);
                } else {
                    occs = [item];
                }

                for (let occ of occs) {
                    let occStart = occ[startDateProperty];
                    let occEnd = occ[endDateProperty];
                    // must have at least one of start or end
                    if (!occStart && !occEnd) {
                        continue; // task with no dates
                    }

                    // if just has single datetime, treat as zero duration item
                    // (such as task with due datetime or start datetime only)
                    occStart = occStart || occEnd;
                    occEnd = occEnd || occStart;
                    // Now both occStart and occEnd are datetimes.

                    // skip occurrence if all-day: it won't show in time view.
                    if (occStart.isDate || occEnd.isDate) {
                        continue;
                    }

                    // Trim dates to view.  (Not mutated so just reuse view dates)
                    if (this.startDate.compare(occStart) > 0) {
                        occStart = this.startDate;
                    }
                    if (this.queryEndDate.compare(occEnd) < 0) {
                        occEnd = this.queryEndDate;
                    }

                    // Convert to display timezone if different
                    if (occStart.timezone != displayTZ) {
                        occStart = occStart.getInTimezone(displayTZ);
                    }
                    if (occEnd.timezone != displayTZ) {
                        occEnd = occEnd.getInTimezone(displayTZ);
                    }
                    // If crosses midnite in current TZ, set end just
                    // before midnite after start so start/title usually visible.
                    if (!cal.dtz.sameDay(occStart, occEnd)) {
                        occEnd = occStart.clone();
                        occEnd.day = occStart.day;
                        occEnd.hour = 23;
                        occEnd.minute = 59;
                    }

                    // Ensure range shows occ
                    lowMinute = Math.min(occStart.hour * 60 + occStart.minute,
                                         lowMinute);
                    highMinute = Math.max(occEnd.hour * 60 + occEnd.minute,
                                          highMinute);
                }
            }

            let displayDuration = highMinute - lowMinute;
            if (this.mSelectedItems.length &&
                displayDuration >= 0) {
                let minute;
                if (displayDuration <= this.mVisibleMinutes) {
                    minute = lowMinute + (displayDuration - this.mVisibleMinutes) / 2;
                } else if (this.mSelectedItems.length == 1) {
                    // If the displayDuration doesn't fit into the visible
                    // minutes, but only one event is selected, then go ahead and
                    // center the event start.

                    minute = Math.max(0, lowMinute - (this.mVisibleMinutes / 2));
                }
                this.scrollToMinute(minute);
            }
        ]]></body>
      </method>

      <property name="pixelsPerMinute">
        <getter><![CDATA[
            return this.mPixPerMin;
        ]]></getter>
        <setter><![CDATA[
            this.mPixPerMin = val;

            let timebar = document.getAnonymousElementByAttribute(this, "anonid", "timebar");
            timebar.pixelsPerMinute = val;

            if (!this.mDateColumns) {
                return val;
            }
            for (let col of this.mDateColumns) {
                col.column.pixelsPerMinute = val;
            }
            return val;
        ]]></setter>
      </property>

      <!-- private -->

      <property name="numVisibleDates" readonly="true">
        <getter><![CDATA[
            if (this.mDateList) {
                return this.mDateList.length;
            }

            let count = 0;

            if (!this.mStartDate || !this.mEndDate) {
                // The view has not been initialized, so there are 0 visible dates.
                return count;
            }

            let date = this.mStartDate.clone();
            while (date.compare(this.mEndDate) <= 0) {
                count++;
                date.day += 1;
            }

            return count;
        ]]></getter>
      </property>

      <property name="orient">
        <getter><![CDATA[
            return this.getAttribute("orient") || "vertical";
        ]]></getter>
        <setter><![CDATA[
            this.setAttribute("orient", val);
            return val;
        ]]></setter>
      </property>

      <property name="timebar" readonly="true">
        <getter><![CDATA[
            return document.getAnonymousElementByAttribute(this, "anonid", "timebar");
        ]]></getter>
      </property>

      <property name="timeBarTimeIndicator" readonly="true">
        <getter><![CDATA[
            return document.getAnonymousElementByAttribute(this.timebar, "anonid", "timeIndicatorBoxTimeBar");
        ]]></getter>
      </property>

      <method name="setAttribute">
        <parameter name="aAttr"/>
        <parameter name="aVal"/>
        <body><![CDATA[
            let needsreorient = false;
            let needsrelayout = false;
            if (aAttr == "orient") {
                if (this.getAttribute("orient") != aVal) {
                    needsreorient = true;
                }
            }

            if (aAttr == "context" || aAttr == "item-context") {
                needsrelayout = true;
            }

            // this should be done using lookupMethod(), see bug 286629
            let ret = XULElement.prototype.setAttribute.call(this, aAttr, aVal);

            if (needsrelayout && !needsreorient) {
                this.relayout();
            }

            if (needsreorient) {
                this.reorient();
            }

            return ret;
        ]]></body>
      </method>

      <method name="reorient">
        <body><![CDATA[
            let orient = this.getAttribute("orient") || "horizontal";
            let otherorient = (orient == "vertical" ? "horizontal" : "vertical");

            if (orient == "horizontal") {
                this.pixelsPerMinute = 1.5;
            } else {
                this.pixelsPerMinute = 0.6;
            }

            let normalelems = ["mainbox", "timebar"];
            let otherelems = [
                "labelbox", "labeldaybox", "headertimespacer", "headerbox",
                "headerdaybox", "scrollbox", "daybox"
            ];

            for (let id of normalelems) {
                document.getAnonymousElementByAttribute(this, "anonid", id).setAttribute("orient", orient);
            }
            for (let id of otherelems) {
                document.getAnonymousElementByAttribute(this, "anonid", id).setAttribute("orient", otherorient);
            }

            let scrollbox = document.getAnonymousElementByAttribute(
                           this, "anonid", "scrollbox");
            let mainbox = document.getAnonymousElementByAttribute(
                          this, "anonid", "mainbox");

            if (orient == "vertical") {
                scrollbox.setAttribute(
                    "style", "overflow-x: hidden; overflow-y: auto;");
                mainbox.setAttribute(
                    "style", "overflow-x: auto; overflow-y: hidden;");
            } else {
                scrollbox.setAttribute(
                    "style", "overflow-x: auto; overflow-y: hidden;");
                mainbox.setAttribute(
                    "style", "overflow-x: hidden; overflow-y: auto;");
            }

            let boxes = ["daybox", "headerdaybox"];
            for (let boxname of boxes) {
                let box = document.getAnonymousElementByAttribute(this, "anonid", boxname);
                setAttributeToChildren(box, "orient", orient);
            }

            setAttributeToChildren(this.labeldaybox, "orient", otherorient);

            // Refresh
            this.refresh();
        ]]></body>
      </method>

      <method name="relayout">
        <body><![CDATA[
            if (!this.mStartDate || !this.mEndDate) {
                return;
            }

            let orient = this.getAttribute("orient") || "horizontal";
            let otherorient = getOtherOrientation(orient);

            let computedDateList = [];
            let startDate = this.mStartDate.clone();
            while (startDate.compare(this.mEndDate) <= 0) {
                let workday = startDate.clone();
                workday.makeImmutable();
                if (this.mDisplayDaysOff) {
                    computedDateList.push(workday);
                } else if (!this.mDaysOffArray.includes(startDate.weekday)) {
                    computedDateList.push(workday);
                }
                startDate.day += 1;
            }
            this.mDateList = computedDateList;

            // deselect previous selected event upon switch views, otherwise those
            // events will stay selected forever, if select other events after
            // change week view.
            this.setSelectedItems(0, [], true);

            let daybox = document.getAnonymousElementByAttribute(this, "anonid", "daybox");
            let headerdaybox = document.getAnonymousElementByAttribute(this, "anonid", "headerdaybox");

            let dayStartMin = this.mDayStartMin;
            let dayEndMin = this.mDayEndMin;
            let setUpDayEventsBox = (aDayBox, date) => {
                aDayBox.setAttribute("class", "calendar-event-column-" + (counter % 2 == 0 ? "even" : "odd"));
                aDayBox.setAttribute("context", this.getAttribute("context"));
                aDayBox.setAttribute("item-context", this.getAttribute("item-context") || this.getAttribute("context"));
                aDayBox.startLayoutBatchChange();
                aDayBox.date = date;
                aDayBox.setAttribute("orient", orient);
                aDayBox.calendarView = this;
                aDayBox.setDayStartEndMinutes(dayStartMin, dayEndMin);
            };

            let setUpDayHeaderBox = (aDayBox, date) => {
                aDayBox.date = date;
                aDayBox.calendarView = this;
                aDayBox.setAttribute("orient", "vertical");
                // Since the calendar-header-container boxes have the same vertical
                // orientation for normal and rotated views, it needs an attribute
                // "rotated" in order to have different css rules.
                setBooleanAttribute(aDayBox, "rotated", orient == "horizontal");
            };

            this.mDateColumns = [];


            // get today's date
            let today = this.today();
            let counter = 0;
            let dayboxkids = daybox.childNodes;
            let headerboxkids = headerdaybox.childNodes;
            let labelboxkids = this.labeldaybox.childNodes;
            let updateTimeIndicator = false;

            for (let date of computedDateList) {
                let dayEventsBox;
                if (counter < dayboxkids.length) {
                    dayEventsBox = dayboxkids[counter];
                    dayEventsBox.removeAttribute("relation");
                    dayEventsBox.mEventInfos = [];
                } else {
                    dayEventsBox = document.createXULElement("calendar-event-column");
                    dayEventsBox.setAttribute("flex", "1");
                    daybox.appendChild(dayEventsBox);
                }
                setUpDayEventsBox(dayEventsBox, date);

                let dayHeaderBox;
                if (counter < headerboxkids.length) {
                    dayHeaderBox = headerboxkids[counter];
                    // Delete backwards to make sure we get them all
                    // and delete until no more elements are left.
                    while (dayHeaderBox.mItemBoxes.length != 0) {
                        let num = dayHeaderBox.mItemBoxes.length;
                        dayHeaderBox.deleteEvent(dayHeaderBox.mItemBoxes[num-1].occurrence);
                    }
                } else {
                    dayHeaderBox = document.createXULElement("calendar-header-container");
                    dayHeaderBox.setAttribute("flex", "1");
                    headerdaybox.appendChild(dayHeaderBox);
                }
                setUpDayHeaderBox(dayHeaderBox, date);

                if (this.mDaysOffArray.includes(date.weekday)) {
                    dayEventsBox.dayOff = true;
                    dayHeaderBox.setAttribute("weekend", "true");
                } else {
                    dayEventsBox.dayOff = false;
                    dayHeaderBox.removeAttribute("weekend");
                }
                let labelbox;
                if (counter < labelboxkids.length) {
                    labelbox = labelboxkids[counter];
                    labelbox.date = date;
                } else {
                    labelbox = document.createXULElement("calendar-day-label");
                    labelbox.setAttribute("orient", otherorient);
                    this.labeldaybox.appendChild(labelbox);
                    labelbox.date = date;
                }
                // Set attributes for date relations and for the time indicator.
                let headerDayBox = document.getAnonymousElementByAttribute(
                                       this, "anonid", "headerdaybox");
                headerDayBox.removeAttribute("todaylastinview");
                dayEventsBox.timeIndicatorBox.setAttribute("hidden", "true");
                switch (date.compare(today)) {
                    case -1: {
                        dayHeaderBox.setAttribute("relation", "past");
                        dayEventsBox.setAttribute("relation", "past");
                        labelbox.setAttribute("relation", "past");
                        break;
                    }
                    case 0: {
                        let relation_ = this.numVisibleDates == 1 ? "today1day" : "today";
                        dayHeaderBox.setAttribute("relation", relation_);
                        dayEventsBox.setAttribute("relation", relation_);
                        labelbox.setAttribute("relation", relation_);
                        setBooleanAttribute(dayEventsBox.timeIndicatorBox, "hidden", this.mTimeIndicatorInterval == 0);
                        updateTimeIndicator = true;

                        // Due to equalsize=always being set on the dayboxes
                        // parent, there are a few issues showing the border of
                        // the last daybox correctly. To work around this, we're
                        // setting an attribute we can use in CSS. For more
                        // information about this hack, see bug 455045
                        if (dayHeaderBox == headerdaybox.childNodes[headerdaybox.childNodes.length - 1] &&
                            this.numVisibleDates > 1) {
                            headerDayBox.setAttribute("todaylastinview", "true");
                        }
                        break;
                    }
                    case 1: {
                        dayHeaderBox.setAttribute("relation", "future");
                        dayEventsBox.setAttribute("relation", "future");
                        labelbox.setAttribute("relation", "future");
                        break;
                    }
                }
                // We don't want to actually mess with our original dates, plus
                // they're likely to be immutable.
                let date2 = date.clone();
                date2.isDate = true;
                date2.makeImmutable();
                this.mDateColumns.push({ date: date2, column: dayEventsBox, header: dayHeaderBox });
                counter++;
            }

            // Remove any extra columns that may have been hanging around
            function removeExtraKids(elem) {
                while (counter < elem.childNodes.length) {
                    elem.childNodes[counter].remove();
                }
            }
            removeExtraKids(daybox);
            removeExtraKids(headerdaybox);
            removeExtraKids(this.labeldaybox);

            if (updateTimeIndicator) {
                this.updateTimeIndicatorPosition();
            }

            // fix pixels-per-minute
            this.onResize();
            if (this.mDateColumns) {
                for (let col of this.mDateColumns) {
                    col.column.endLayoutBatchChange();
                }
            }

            // Adjust scrollbar spacers
            this.adjustScrollBarSpacers();

            // Store the start and end of current view. Next time when
            // setDateRange is called, it will use mViewStart and mViewEnd to
            // check if view range has been changed.
            this.mViewStart = this.mStartDate;
            this.mViewEnd = this.mEndDate;

            let toggleStatus = 0;

            if (this.mTasksInView) {
                toggleStatus |= this.mToggleStatusFlag.TasksInView;
            }
            if (this.mWorkdaysOnly) {
                toggleStatus |= this.mToggleStatusFlag.WorkdaysOnly;
            }
            if (this.mShowCompleted) {
                toggleStatus |= this.mToggleStatusFlag.ShowCompleted;
            }

            this.mToggleStatus = toggleStatus;
        ]]></body>
      </method>

      <method name="findColumnForDate">
        <parameter name="aDate"/>
        <body><![CDATA[
            if (!this.mDateColumns) {
                return null;
            }
            for (let col of this.mDateColumns) {
                if (col.date.compare(aDate) == 0) {
                    return col;
                }
            }
            return null;
        ]]></body>
      </method>

      <method name="findDayBoxForDate">
        <parameter name="aDate"/>
        <body><![CDATA[
            let col = this.findColumnForDate(aDate);
            return (col && col.header);
        ]]></body>
      </method>

      <method name="selectColumnHeader">
        <parameter name="aDate"/>
        <body><![CDATA[
            let child = this.labeldaybox.firstChild;
            while (child) {
                if (child.date.compare(aDate) == 0) {
                    child.setAttribute("selected", "true");
                } else {
                    child.removeAttribute("selected");
                }
                child = child.nextSibling;
            }
        ]]></body>
      </method>

      <method name="findColumnsForOccurrences">
        <parameter name="aOccurrences"/>
        <body><![CDATA[
            if (!this.mDateColumns || !this.mDateColumns.length) {
                return [];
            }

            let occMap = {};
            for (let occ of aOccurrences) {
                let startDate = occ[cal.dtz.startDateProp(occ)]
                                .getInTimezone(this.mStartDate.timezone);
                let endDate = occ[cal.dtz.endDateProp(occ)]
                                .getInTimezone(this.mEndDate.timezone) || startDate;
                if (startDate.compare(this.mStartDate) >= 0 &&
                    endDate.compare(this.mEndDate) <= 0) {
                    for (let i = startDate.day; i <= endDate.day; i++) {
                        occMap[i] = true;
                    }
                }
            }

            return this.mDateColumns.filter(col => col.date.day in occMap);
        ]]></body>
      </method>

      <method name="findColumnsForItem">
        <parameter name="aItem"/>
        <body><![CDATA[
            let columns = [];

            if (!this.mDateColumns) {
                return columns;
            }

            // Note that these may be dates or datetimes
            let startDate = aItem.startDate || aItem.entryDate || aItem.dueDate;
            if (!startDate) {
                return columns;
            }
            let timezone = this.mDateColumns[0].date.timezone;
            let targetDate = startDate.getInTimezone(timezone);
            let finishDate = (aItem.endDate || aItem.dueDate || aItem.entryDate || startDate)
                                 .getInTimezone(timezone);

            if (targetDate.compare(this.mStartDate) < 0) {
                targetDate = this.mStartDate.clone();
            }

            if (finishDate.compare(this.mEndDate) > 0) {
                finishDate = this.mEndDate.clone();
                finishDate.day++;
            }

            if (!targetDate.isDate) {
                // Set the time to 00:00 so that we get all the boxes
                targetDate.hour = 0;
                targetDate.minute = 0;
                targetDate.second = 0;
            }

            if (targetDate.compare(finishDate) == 0) {
                // We have also to handle zero length events in particular for
                // tasks without entry or due date.
                let col = this.findColumnForDate(targetDate);
                if (col) {
                    columns.push(col);
                }
            }

            while (targetDate.compare(finishDate) == -1) {
                let col = this.findColumnForDate(targetDate);

                // This might not exist if the event spans the view start or end
                if (col) {
                    columns.push(col);
                }
                targetDate.day += 1;
            }

            return columns;
        ]]></body>
      </method>

      <!-- for the given client-coord-system point, return
         - the calendar-event-column that contains it.  If
         - no column contains it, return null.
        -->
      <method name="findColumnForClientPoint">
        <parameter name="aClientX"/>
        <parameter name="aClientY"/>
        <body><![CDATA[
            if (!this.mDateColumns) {
                return null;
            }
            for (let col of this.mDateColumns) {
                let element = document.getAnonymousElementByAttribute(col.column, "anonid", "boxstack");
                if (aClientX >= element.screenX &&
                    aClientX <= (element.screenX + element.getBoundingClientRect().width) &&
                    aClientY >= element.screenY &&
                    aClientY <= (element.screenY + element.getBoundingClientRect().height)) {
                    return col.column;
                }
            }
            return null;
        ]]></body>
      </method>

      <method name="adjustScrollbarSpacersForAlldayEvents">
        <parameter name="aEvent"/>
        <body><![CDATA[
            let startDate = aEvent[cal.dtz.startDateProp(aEvent)];
            let endDate = aEvent[cal.dtz.endDateProp(aEvent)];
            if ((startDate && startDate.isDate) ||
                (endDate && endDate.isDate)) {
                // If this is an all day event, then the header with allday
                // events could possibly get a scrollbar. Readjust them.
                this.adjustScrollBarSpacers();
            }
        ]]></body>
      </method>

      <method name="doAddItem">
        <parameter name="aEvent"/>
        <body><![CDATA[
            let cols = this.findColumnsForItem(aEvent);
            if (!cols.length) {
                return;
            }

            for (let col of cols) {
                let column = col.column;
                let header = col.header;

                let estart = aEvent.startDate || aEvent.entryDate || aEvent.dueDate;
                if (estart.isDate) {
                    header.addEvent(aEvent);
                } else {
                    column.addEvent(aEvent);
                }
            }

            this.adjustScrollbarSpacersForAlldayEvents(aEvent);
        ]]></body>
      </method>

      <method name="doDeleteItem">
        <parameter name="aEvent"/>
        <body><![CDATA[
            let cols = this.findColumnsForItem(aEvent);
            if (!cols.length) {
                return;
            }

            let oldLength = this.mSelectedItems.length;
            this.mSelectedItems = this.mSelectedItems.filter((item) => {
                return item.hashId != aEvent.hashId;
            });

            for (let col of cols) {
                let column = col.column;
                let header = col.header;

                let estart = aEvent.startDate || aEvent.entryDate || aEvent.dueDate;
                if (estart.isDate) {
                    header.deleteEvent(aEvent);
                } else {
                    column.deleteEvent(aEvent);
                }
            }

            // If a deleted event was selected, we need to announce that the
            // selection changed.
            if (oldLength != this.mSelectedItems.length) {
                this.fireEvent("itemselect", this.mSelectedItems);
            }

            this.adjustScrollbarSpacersForAlldayEvents(aEvent);
        ]]></body>
      </method>

      <method name="deleteItemsFromCalendar">
        <parameter name="aCalendar"/>
        <body><![CDATA[
            if (!this.mDateColumns) {
                return;
            }
            for (let col of this.mDateColumns) {
                // get all-day events in column header and events within the column
                let colEvents = col.header.mItemBoxes.map(box => box.occurrence)
                  .concat(col.column.mEventInfos.map(info => info.event));

                for (let event of colEvents) {
                    if (event.calendar.id == aCalendar.id) {
                        this.doDeleteItem(event);
                    }
                }
            }
        ]]></body>
      </method>

      <method name="adjustScrollBarSpacers">
        <body><![CDATA[
            // get the view's orientation
            let propertyName;
            if (this.getAttribute("orient") == "vertical") {
                propertyName = "width";
            } else {
                propertyName = "height";
            }

            // get the width/height of the scrollbox scrollbar
            let scrollbox = document.getAnonymousElementByAttribute(
                           this, "anonid", "scrollbox");
            let propertyValue = scrollbox.boxObject.firstChild.boxObject[propertyName];
            // Check if we need to show the headerScrollbarSpacer at all
            let headerPropertyValue = propertyValue;
            let headerDayBox = document.getAnonymousElementByAttribute(
                               this, "anonid", "headerdaybox");
            if (headerDayBox) {
                // Only do this when there are multiple days
                let headerDayBoxMaxHeight = parseInt(document.defaultView.getComputedStyle(headerDayBox)
                                                             .getPropertyValue("max-height"), 10);
                if (this.getAttribute("orient") == "vertical" &&
                    headerDayBox.getBoundingClientRect().height >= headerDayBoxMaxHeight) {
                    // If the headerDayBox is just as high as the max-height, then
                    // there is already a scrollbar and we don't need to show the
                    // headerScrollbarSpacer. This is only valid for the non-rotated
                    // view.
                    headerPropertyValue = 0;
                }
            }

            // set the same width/height for the label and header box spacers
            let headerScrollBarSpacer = document.getAnonymousElementByAttribute(
                                        this, "anonid", "headerscrollbarspacer");
            headerScrollBarSpacer.setAttribute(propertyName, headerPropertyValue);
            let labelScrollBarSpacer = document.getAnonymousElementByAttribute(
                                       this, "anonid", "labelscrollbarspacer");
            labelScrollBarSpacer.setAttribute(propertyName, propertyValue);
        ]]></body>
      </method>

      <field name="mFirstVisibleMinute">0</field>
      <method name="scrollToMinute">
        <parameter name="aMinute"/>
        <body><![CDATA[
            let scrollbox = document.getAnonymousElementByAttribute(this, "anonid", "scrollbox");
            // 'aMinute' will be the first minute showed in the view, so it must
            // belong to the range 0 <-> (24*60 - minutes_showed_in_the_view) but
            // we consider 25 hours instead of 24 to let the view scroll until
            // showing events that start just before 0.00
            let maxFirstMin = 25 * 60 - Math.round(scrollbox.getBoundingClientRect().height / this.mPixPerMin);
            aMinute = Math.min(maxFirstMin, Math.max(0, aMinute));

            if (scrollbox.scrollHeight > 0) {
                let pos = Math.round(aMinute * this.mPixPerMin);
                if (scrollbox.getAttribute("orient") == "horizontal") {
                    scrollbox.scrollTo(scrollbox.scrollLeft, pos);
                } else {
                    scrollbox.scrollTo(pos, scrollbox.scrollTop);
                }
            }

            // Set the first visible minute in any case, we want to move to the
            // right minute as soon as possible if we couldn't do so above.
            this.mFirstVisibleMinute = aMinute;
        ]]></body>
      </method>

      <method name="setDayStartEndMinutes">
        <parameter name="aDayStartMin"/>
        <parameter name="aDayEndMin"/>
        <body><![CDATA[
            if (!("setDayStartEndHours" in this.timebar)) {
                this.timebar.addEventListener(
                  "bindingattached", () => this.setDayStartEndMinutes(aDayStartMin, aDayEndMin), { once: true }
                );
                return;
            }
            if (aDayStartMin < this.mStartMin || aDayStartMin > aDayEndMin ||
                aDayEndMin > this.mEndMin) {
                throw Cr.NS_ERROR_INVALID_ARG;
            }
            if (this.mDayStartMin != aDayStartMin ||
                this.mDayEndMin != aDayEndMin) {
                this.mDayStartMin = aDayStartMin;
                this.mDayEndMin = aDayEndMin;

                // Also update on the time-bar
                this.timebar.setDayStartEndHours(this.mDayStartMin / 60,
                                                 this.mDayEndMin / 60);
            }

        ]]></body>
      </method>

      <method name="setVisibleMinutes">
        <parameter name="aVisibleMinutes"/>
        <body><![CDATA[
            if (aVisibleMinutes <= 0 ||
                aVisibleMinutes > (this.mEndMin - this.mStartMin)) {
                throw Cr.NS_ERROR_INVALID_ARG;
            }
            if (this.mVisibleMinutes != aVisibleMinutes) {
                this.mVisibleMinutes = aVisibleMinutes;
            }
            return this.mVisibleMinutes;
        ]]></body>
      </method>

      <method name="zoomIn">
        <parameter name="aLevel"/>
        <body><![CDATA[
            let visibleHours = Services.prefs.getIntPref("calendar.view.visiblehours", 9);
            visibleHours += (aLevel || 1);

            Services.prefs.setIntPref("calendar.view.visiblehours", Math.min(visibleHours, 24));
        ]]></body>
      </method>
      <method name="zoomOut">
        <parameter name="aLevel"/>
        <body><![CDATA[
            let visibleHours = Services.prefs.getIntPref("calendar.view.visiblehours", 9);
            visibleHours -= (aLevel || 1);

            Services.prefs.setIntPref("calendar.view.visiblehours", Math.max(1, visibleHours));
        ]]></body>
      </method>
      <method name="zoomReset">
        <body><![CDATA[
            Services.prefs.setIntPref("calendar.view.visiblehours", 9);
        ]]></body>
      </method>
    </implementation>

    <handlers>
      <handler event="click" button="2"><![CDATA[
          this.selectedDateTime = null;
      ]]></handler>
      <handler event="wheel" phase="bubbling"><![CDATA[
          if (!event.ctrlKey && !event.shiftKey &&
              !event.altKey && !event.metaKey) {
              // Only shift hours if no modifier is pressed.

              let minute = this.mFirstVisibleMinute;
              if (event.deltaMode == event.DOM_DELTA_LINE) {
                  if (this.rotated && event.deltaX != 0) {
                      minute += event.deltaX < 0 ? -60 : 60;
                  } else if (!this.rotated && event.deltaY != 0) {
                      minute += event.deltaY < 0 ? -60 : 60;
                  }
              } else if (event.deltaMode == event.DOM_DELTA_PIXEL) {
                  if (this.rotated && event.deltaX != 0) {
                      minute += Math.ceil(event.deltaX / this.mPixPerMin);
                  } else if (!this.rotated && event.deltaY != 0) {
                      minute += Math.ceil(event.deltaY / this.mPixPerMin);
                  }
              }
              this.scrollToMinute(minute);
          }

          // We are taking care of scrolling, so prevent the default
          // action in any case.
          event.preventDefault();
      ]]></handler>

      <handler event="scroll" phase="bubbling"><![CDATA[
          let scrollbox = document.getAnonymousElementByAttribute(this, "anonid", "scrollbox");
          if (scrollbox.scrollHeight > 0) {
              // We need to update the first visible minute, but only if the
              // scrollbox has been sized.
              if (scrollbox.getAttribute("orient") == "horizontal") {
                  this.mFirstVisibleMinute = Math.round(scrollbox.scrollTop / this.mPixPerMin);
              } else {
                  this.mFirstVisibleMinute = Math.round(scrollbox.scrollLeft / this.mPixPerMin);
              }
          }
      ]]></handler>
    </handlers>
  </binding>
</bindings>