path: root/comm/calendar/base/content/calendar-tab-panels.inc.xhtml

# 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/.

<vbox id="calendarTabPanel">
  <hbox id="calendarContent" flex="1">
    <vbox id="calSidebar"
          persist="collapsed width">
      <html:div id="primaryButtonSidePanel"
                xmlns="http://www.w3.org/1999/xhtml">
        <button id="sidePanelNewEvent"
                data-l10n-id="calendar-new-event-primary-button"
                class="button button-primary icon-button"
                onclick="goDoCommand('calendar_new_event_command')"
                hidden="hidden"
                type="button">
        </button>
        <button id="sidePanelNewTask"
                data-l10n-id="calendar-new-task-primary-button"
                class="button button-primary icon-button"
                onclick="goDoCommand('calendar_new_todo_command')"
                hidden="hidden"
                type="button">
        </button>
      </html:div>
      <calendar-modevbox id="minimonth-pane"
                         mode="calendar,task"
                         refcontrol="calendar_toggle_minimonthpane_command">
        <vbox align="center">
          <hbox id="calMinimonthBox" pack="center">
            <calendar-minimonth id="calMinimonth" onchange="minimonthPick(this.value);"/>
          </hbox>
        </vbox>
      </calendar-modevbox>
      <separator id="minimonth-splitter" style="min-width:100px;"/>
      <vbox id="calendar-panel" flex="1">
        <calendar-modevbox id="task-filter-pane"
                           mode="task"
                           refcontrol="calendar_toggle_filter_command">
          <checkbox id="task-tree-filter-header"
                           checked="true"
                           class="treenode-checkbox"
                           label="&calendar.task.filter.title.label;"/>
          <calendar-modevbox id="task-filtertree-pane"
                             flex="1"
                             mode="task"
                             refcontrol="task-tree-filter-header">
            <radiogroup id="task-tree-filtergroup" class="task-tree-subpane"
                        persist="value">
              <radio id="opt_throughcurrent_filter" label="&calendar.task.filter.current.label;" value="throughcurrent" command="calendar_task_filter_command"/>
              <radio id="opt_today_filter" label="&calendar.task.filter.today.label;" value="throughtoday" command="calendar_task_filter_command"/>
              <radio id="opt_next7days_filter" label="&calendar.task.filter.next7days.label;" value="throughsevendays" command="calendar_task_filter_command"/>
              <radio id="opt_notstarted_filter" label="&calendar.task.filter.notstarted.label;" value="notstarted" command="calendar_task_filter_command"/>
              <radio id="opt_overdue_filter" label="&calendar.task.filter.overdue.label;" value="overdue" command="calendar_task_filter_command"/>
              <radio id="opt_completed_filter" label="&calendar.task.filter.completed.label;" value="completed" command="calendar_task_filter_command"/>
              <radio id="opt_open_filter" label="&calendar.task.filter.open.label;" value="open" command="calendar_task_filter_command"/>
              <radio id="opt_all_filter" label="&calendar.task.filter.all.label;" value="all" command="calendar_task_filter_command"/>
            </radiogroup>
          </calendar-modevbox>
        </calendar-modevbox>
        <calendar-modevbox id="calendar-list-pane"
                           flex="1"
                           mode="calendar,task"
                           refcontrol="calendar_toggle_calendarlist_command">
          <html:button id="calendarListHeader"
                       class="calendar-list-header button-flat"
                       onclick="toggleVisibilityCalendarsList(event);">
            <html:span data-l10n-id="calendar-list-header"></html:span>
            <html:img id="toggleCalendarIcon"
                      src="chrome://messenger/skin/icons/new/nav-down-sm.svg"
                      alt="" />
              </html:button>
          <calendar-modevbox id="calendar-list-inner-pane"
                             flex="1"
                             mode="calendar,task"
                             refcontrol="calendarListHeader"
                             oncontextmenu="openCalendarListItemContext(event);">
            <html:ol id="calendar-list" is="orderable-tree-listbox"
                     role="listbox"></html:ol>
            <template id="calendar-list-item" xmlns="http://www.w3.org/1999/xhtml">
              <li draggable="true" role="option">
                <div class="calendar-color"></div>
                <div class="calendar-name"></div>
                <img class="calendar-readstatus calendar-list-icon"
                     src="chrome://messenger/skin/icons/new/compact/lock.svg"
                     alt="" />
                <img class="calendar-mute-status calendar-list-icon"
                     src="chrome://messenger/skin/icons/new/bell-disabled.svg"
                     alt="" />
                <button class="calendar-enable-button"></button>
                <input type="checkbox"
                       class="calendar-displayed" />
                <button class="calendar-more-button button icon-button icon-only"
                        onclick="openCalendarListItemContext(event);"
                        type="button">
                </button>
              </li>
            </template>
          </calendar-modevbox>
          <html:div id="sideButtonsBottom" xmlns="http://www.w3.org/1999/xhtml">
            <button id="newCalendarSidebarButton"
                    class="button button-flat icon-button"
                    data-l10n-id="calendar-import-new-calendar"
                    onclick="goDoCommand('calendar_new_calendar_command')"
                    type="button">
            </button>
            <button id="refreshCalendar"
                    class="button button-flat icon-button icon-only"
                    data-l10n-id="calendar-refresh-calendars"
                    onclick="goDoCommand('calendar_reload_remote_calendars')"
                    type="button">
            </button>
          </html:div>
        </calendar-modevbox>
      </vbox>
    </vbox>

    <splitter id="calsidebar_splitter"
              collapse="before"
              persist="state"
              class="calendar-sidebar-splitter"/>

    <hbox id="calendarDisplayBox" flex="1">
      <!-- Events View ("Unifinder") -->
      <vbox id="calendar-view-box"
            flex="1"
            context="calendar-view-context-menu"
            collapsed="true">
        <vbox id="calendar-deactivated-notification-location-events">
          <!-- Calendar deactivated notificationbox for events will be added here lazily. -->
        </vbox>
        <vbox id="bottom-events-box" persist="height">
          <hbox id="unifinder-searchBox" class="themeable-brighttext" persist="collapsed">
            <box align="center">
              <menulist id="event-filter-menulist" value="P7D" persist="value">
                <menupopup id="event-filter-menupopup" oncommand="refreshEventTree()">
                  <menuitem id="event-filter-all"
                            label="&calendar.events.filter.all.label;"
                            value="all"/>
                  <menuitem id="event-filter-today"
                            label="&calendar.events.filter.today.label;"
                            value="today"/>
                  <menuitem id="event-filter-next7days"
                            label="&calendar.events.filter.next7Days.label;"
                            value="P7D"/>
                  <menuitem id="event-filter-next14Days"
                            label="&calendar.events.filter.next14Days.label;"
                            value="P14D"/>
                  <menuitem id="event-filter-next31Days"
                            label="&calendar.events.filter.next31Days.label;"
                            value="P31D"/>
                  <menuitem id="event-filter-thisCalendarMonth"
                            label="&calendar.events.filter.thisCalendarMonth.label;"
                            value="thisCalendarMonth"/>
                  <menuitem id="event-filter-future"
                            label="&calendar.events.filter.future.label;"
                            value="future"/>
                  <menuitem id="event-filter-current"
                            label="&calendar.events.filter.current.label;"
                            value="current"/>
                  <menuitem id="event-filter-currentview"
                            label="&calendar.events.filter.currentview.label;"
                            value="currentview"/>
                </menupopup>
              </menulist>
            </box>
            <box align="center" flex="1">
              <label control="unifinder-search-field" value="&calendar.search.options.searchfor;"/>
              <search-textbox id="unifinder-search-field"
                              class="themeableSearchBox"
                              oncommand="refreshEventTree();"
                              flex="1"/>
            </box>
            <toolbarbutton id="unifinder-closer"
                           class="unifinder-closebutton close-icon"
                           command="calendar_show_unifinder_command"
                           tooltiptext="&calendar.unifinder.close.tooltip;"/>
          </hbox>
          <tree id="unifinder-search-results-tree" flex="1"
                onselect="unifinderSelect(event); calendarController.onSelectionChanged()"
                onkeypress="unifinderKeyPress(event)"
                _selectDelay="500"
                persist="sort-active sort-direction"
                enableColumnDrag="true">
            <treecols id="unifinder-search-results-tree-cols">
              <treecol id="unifinder-search-results-tree-col-title"
                       persist="hidden ordinal width"
                       style="flex: 1 auto"
                       closemenu="none"
                       itemproperty="title"
                       label="&calendar.unifinder.tree.title.label;"
                       tooltiptext="&calendar.unifinder.tree.title.tooltip2;"/>
              <splitter class="tree-splitter"/>
              <treecol id="unifinder-search-results-tree-col-startdate"
                       persist="hidden ordinal width"
                       style="flex: 1 auto"
                       closemenu="none"
                       itemproperty="startDate"
                       label="&calendar.unifinder.tree.startdate.label;"
                       tooltiptext="&calendar.unifinder.tree.startdate.tooltip2;"/>
              <splitter class="tree-splitter"/>
              <treecol id="unifinder-search-results-tree-col-enddate"
                       persist="hidden ordinal width"
                       style="flex: 1 auto"
                       closemenu="none"
                       itemproperty="endDate"
                       label="&calendar.unifinder.tree.enddate.label;"
                       tooltiptext="&calendar.unifinder.tree.enddate.tooltip2;"/>
              <splitter class="tree-splitter"/>
              <treecol id="unifinder-search-results-tree-col-categories"
                       persist="hidden ordinal width"
                       style="flex: 1 auto"
                       closemenu="none"
                       itemproperty="categories"
                       label="&calendar.unifinder.tree.categories.label;"
                       tooltiptext="&calendar.unifinder.tree.categories.tooltip2;"/>
              <splitter class="tree-splitter"/>
              <treecol id="unifinder-search-results-tree-col-location"
                       persist="hidden ordinal width"
                       style="flex: 1 auto"
                       closemenu="none"
                       hidden="true"
                       itemproperty="location"
                       label="&calendar.unifinder.tree.location.label;"
                       tooltiptext="&calendar.unifinder.tree.location.tooltip2;"/>
              <splitter class="tree-splitter"/>
              <treecol id="unifinder-search-results-tree-col-status"
                       persist="hidden ordinal width"
                       style="flex: 1 auto"
                       closemenu="none"
                       hidden="true"
                       itemproperty="status"
                       label="&calendar.unifinder.tree.status.label;"
                       tooltiptext="&calendar.unifinder.tree.status.tooltip2;"/>
              <treecol id="unifinder-search-results-tree-col-calendarname"
                       persist="hidden ordinal width"
                       style="flex: 1 auto"
                       closemenu="none"
                       hidden="true"
                       itemproperty="calendar"
                       label="&calendar.unifinder.tree.calendarname.label;"
                       tooltiptext="&calendar.unifinder.tree.calendarname.tooltip2;"/>
            </treecols>

            <!-- on mousedown here happens before onclick above -->
            <treechildren tooltip="eventTreeTooltip"
                          context="calendar-item-context-menu"
                          onkeypress="if (event.key == 'Enter') { unifinderEditCommand(); }"
                          ondragenter="return false;"
                          ondblclick="unifinderDoubleClick(event)"
                          onfocus="focusFirstItemIfNoSelection();"/>
          </tree>
        </vbox>
        <splitter id="calendar-view-splitter"
                  resizebefore="closest"
                  resizeafter="farthest"
                  persist="state"
                  class="chromeclass-extrachrome sidebar-splitter calendar-splitter"
                  orient="vertical"
                  onmouseup="setTimeout(refreshEventTree, 10);"/>

        <!-- Calendar Navigation Control Bar -->
        <html:div id="calendarViewHeader"
                  xmlns="http://www.w3.org/1999/xhtml">
          <div class="navigation-inner-box" >
            <!-- If you are extending a view, add attributes to these
                  nodes for your view. i.e if your view has the id
                  "foobar-view", then you need to add the attribute
                  tooltiptext-foobar="..." -->
            <div id="calendarControls">
              <div class="button-group">
                <button id="previousViewButton"
                        class="button icon-button icon-only"
                        onclick="goDoCommand('calendar_view_prev_command')"
                        type="button">
                </button>
                <button id="todayViewButton"
                        class="button icon-button icon-only"
                        data-l10n-id="calendar-today-button-tooltip"
                        onclick="currentView().moveView()"
                        type="button">
                </button>
                <button id="nextViewButton"
                        class="button icon-button icon-only"
                        onclick="goDoCommand('calendar_view_next_command')"
                        type="button">
                </button>
              </div>
            </div>
            <span id="intervalDescription" class="view-header"/>
          </div>
          <div class="navigation-inner-box">
            <span id="calendarWeek" class="view-header"/>
            <div id="viewToggle" role="tablist" class="calview-toggle">
              <button id="calTabDay"
                      class="calview-toggle-item"
                      onclick="goDoCommand('calendar_day-view_command')"
                      role="tab"
                      aria-controls="day-view"
                      aria-selected="false"
                      data-l10n-id="calendar-view-toggle-day"></button>
              <button id="calTabWeek"
                      class="calview-toggle-item"
                      onclick="goDoCommand('calendar_week-view_command')"
                      role="tab"
                      aria-controls="week-view"
                      aria-selected="false"
                      data-l10n-id="calendar-view-toggle-week"></button>
              <button id="calTabMultiweek"
                      class="calview-toggle-item"
                      onclick="goDoCommand('calendar_multiweek-view_command')"
                      role="tab"
                      aria-controls="multiweek-view"
                      aria-selected="false"
                      data-l10n-id="calendar-view-toggle-multiweek"></button>
              <button id="calTabMonth"
                      class="calview-toggle-item"
                      onclick="goDoCommand('calendar_month-view_command')"
                      role="tab"
                      aria-controls="month-view"
                      aria-selected="false"
                      data-l10n-id="calendar-view-toggle-month"></button>
            </div>
            <button id="calendarControlBarMenu"
                    class="button button-flat icon-button icon-only"
                    onclick="showCalControlBarMenuPopup(event)"
                    data-l10n-id="calendar-control-bar-menu-button"
                    type="button">
            </button>
          </div>
        </html:div>
        <vbox flex="1"
              id="view-box"
              persist="selectedIndex">
          <!-- Note: the "id" attributes of the calendar panes **must** follow the
               notation 'type + "-" + "view"', where "type" should refer to the
               displayed time period as described in base/public/calICalendarView.idl -->
          <calendar-day-view id="day-view"
                             context="calendar-view-context-menu"
                             item-context="calendar-item-context-menu"/>
          <calendar-week-view id="week-view"
                              context="calendar-view-context-menu"
                              item-context="calendar-item-context-menu"/>
          <calendar-multiweek-view id="multiweek-view" flex="1"
                                   context="calendar-view-context-menu"
                                   item-context="calendar-item-context-menu"/>
          <calendar-month-view id="month-view" flex="1"
                               context="calendar-view-context-menu"
                               item-context="calendar-item-context-menu"/>
        </vbox>
      </vbox>
      <!-- Tasks View -->
      <vbox id="calendar-task-box" flex="1"
            collapsed="true">
        <vbox id="calendar-deactivated-notification-location-tasks">
          <!-- Calendar deactivated notificationbox for tasks will be added here lazily. -->
        </vbox>
        <hbox id="task-addition-box" class="themeable-brighttext" align="center">
          <box align="center" flex="1">
            <toolbarbutton id="calendar-add-task-button"
                           label="&calendar.newtask.button.label;"
                           tooltiptext="&calendar.newtask.button.tooltip;"
                           command="calendar_new_todo_command"/>
            <hbox align="center" flex="1" class="input-container">
              <html:input id="view-task-edit-field"
                          class="task-edit-field themeableSearchBox"
                          onfocus="taskEdit.onFocus(event)"
                          onblur="taskEdit.onBlur(event)"
                          onkeypress="taskEdit.onKeyPress(event)"/>
            </hbox>
          </box>
          <box align="center" flex="1">
            <search-textbox id="task-text-filter-field"
                            class="themeableSearchBox"
                            flex="1"
                            placeholder=""
                            emptytextbase="&calendar.task.text-filter.textbox.emptytext.base1;"
                            keyLabelNonMac="&calendar.task.text-filter.textbox.emptytext.keylabel.nonmac;"
                            keyLabelMac="&calendar.task.text-filter.textbox.emptytext.keylabel.mac;"
                            oncommand="taskViewUpdate();"/>
          </box>
        </hbox>
        <vbox flex="1">
          <tree is="calendar-task-tree" id="calendar-task-tree"
                flex="1"
                visible-columns="completed priority title entryDate dueDate"
                persist="visible-columns ordinals widths sort-active sort-direction height"
                context="taskitem-context-menu"
                onselect="taskDetailsView.onSelect(event);"/>
          <splitter id="calendar-task-view-splitter" collapse="none" persist="state" class="calendar-splitter"/>
          <vbox id="calendar-task-details-container"
                flex="1"
                persist="height"
                hidden="true">
            <hbox id="calendar-task-details">
              <hbox id="other-actions-box">
                <vbox id="task-actions-toolbox" class="inline-toolbox">
                  <hbox id="task-actions-toolbar" class="themeable-brighttext">
                    <toolbarbutton id="task-actions-category"
                                   type="menu"
                                   wantdropmarker="true"
                                   label="&calendar.unifinder.tree.categories.label;"
                                   tooltiptext="&calendar.task.category.button.tooltip;"
                                   command="calendar_task_category_command"
                                   class="toolbarbutton-1 message-header-view-button">
                      <menupopup id="task-actions-category-popup"
                                 onpopupshowing="taskDetailsView.loadCategories(event);"
                                 onpopuphiding="return taskDetailsView.saveCategories(event);">
                        <html:input id="task-actions-category-textbox"
                                    placeholder="&event.categories.textbox.label;"
                                    onblur="this.parentNode.removeAttribute(&quot;ignorekeys&quot;);"
                                    onfocus="this.parentNode.setAttribute(&quot;ignorekeys&quot;, &quot;true&quot;);"
                                    onkeypress="taskDetailsView.categoryTextboxKeypress(event);"/>
                        <menuseparator/>
                      </menupopup>
                    </toolbarbutton>
                    <toolbarbutton is="toolbarbutton-menu-button" id="task-actions-markcompleted"
                                   type="menu"
                                   label="&calendar.context.markcompleted.label;"
                                   tooltiptext="&calendar.task.complete.button.tooltip;"
                                   command="calendar_toggle_completed_command"
                                   class="toolbarbutton-1 message-header-view-button">
                      <menupopup is="calendar-task-progress-menupopup" id="task-actions-markcompleted-menupopup"/>
                    </toolbarbutton>
                    <toolbarbutton id="task-actions-priority"
                                   type="menu"
                                   wantdropmarker="true"
                                   label="&calendar.context.priority.label;"
                                   tooltiptext="&calendar.task.priority.button.tooltip;"
                                   command="calendar_general-priority_command"
                                   class="toolbarbutton-1 message-header-view-button">
                      <menupopup is="calendar-task-priority-menupopup" id="task-actions-priority-menupopup"/>
                    </toolbarbutton>
                    <toolbarbutton id="calendar-delete-task-button"
                                   class="toolbarbutton-1 message-header-view-button"
                                   label="&calendar.taskview.delete.label;"
                                   tooltiptext="&calendar.context.deletetask.label;"
                                   command="calendar_delete_todo_command"/>
                  </hbox>
                </vbox>
              </hbox>
              <hbox id ="calendar-task-details-box">
                <html:table id="calendar-task-details-grid">
                  <html:tr id="calendar-task-details-title-row"
                           hidden="hidden">
                    <html:th class="task-details-name">
                      &calendar.task-details.title.label;
                    </html:th>
                    <html:td id="calendar-task-details-title"
                             class="task-details-value">
                    </html:td>
                  </html:tr>
                  <html:tr id="calendar-task-details-priority-row"
                           hidden="hidden">
                    <html:th id="calendar-task-details-priority-label"
                             class="task-details-name">
                      &calendar.task-details.priority.label;
                    </html:th>
                    <html:td id="calendar-task-details-priority-td">
                      <label id="calendar-task-details-priority-low"
                             value="&calendar.task-details.priority.low.label;"
                             class="task-details-value"
                             hidden="true"/>
                      <label id="calendar-task-details-priority-normal"
                             value="&calendar.task-details.priority.normal.label;"
                             class="task-details-value"
                             hidden="true"/>
                      <label id="calendar-task-details-priority-high"
                             value="&calendar.task-details.priority.high.label;"
                             class="task-details-value"
                             hidden="true"/>
                    </html:td>
                  </html:tr>
                  <html:tr id="calendar-task-details-organizer-row"
                           hidden="hidden">
                    <html:th class="task-details-name">
                      &calendar.task-details.organizer.label;
                    </html:th>
                    <html:td id="calendar-task-details-organizer"
                             class="task-details-value text-link"
                             onclick="sendMailToOrganizer()">
                    </html:td>
                  </html:tr>
                  <html:tr id="calendar-task-details-status-row"
                           hidden="hidden">
                    <html:th class="task-details-name">
                      &calendar.task-details.status.label;
                    </html:th>
                    <html:td id="calendar-task-details-status"
                             class="task-details-value">
                    </html:td>
                  </html:tr>
                  <html:tr id="calendar-task-details-category-row"
                           hidden="hidden">
                    <html:th class="task-details-name">
                      &calendar.task-details.category.label;
                    </html:th>
                    <html:td id="calendar-task-details-category"
                             class="task-details-value">
                    </html:td>
                  </html:tr>
                  <html:tr id="task-start-row"
                           class="item-date-row"
                           hidden="hidden">
                    <html:th class="headline">
                      &calendar.task-details.start.label;
                    </html:th>
                    <html:td id="task-start-date">
                    </html:td>
                  </html:tr>
                  <html:tr id="task-due-row"
                           class="item-date-row"
                           hidden="hidden">
                    <html:th class="headline">
                      &calendar.task-details.due.label;
                    </html:th>
                    <html:td id="task-due-date">
                    </html:td>
                  </html:tr>
                  <html:tr id="calendar-task-details-repeat-row"
                           hidden="hidden">
                    <html:th class="task-details-name">
                      &calendar.task-details.repeat.label;
                    </html:th>
                    <html:td id="calendar-task-details-repeat"
                             class="task-details-value">
                    </html:td>
                  </html:tr>
                </html:table>
              </hbox>
            </hbox>
            <hbox id="calendar-task-details-description-wrapper" flex="1">
              <iframe id="calendar-task-details-description" type="content"/>
            </hbox>
            <hbox id="calendar-task-details-attachment-row"
                  align="start"
                  hidden="true">
              <hbox pack="end">
                <label value="&calendar.task-details.attachments.label;"
                       class="task-details-name"/>
              </hbox>
              <vbox id="calendar-task-details-attachment-rows"
                    align="start"
                    flex="1"
                    style="overflow: auto;"
                    hidden="true">
              </vbox>
            </hbox>
          </vbox>
        </vbox>
      </vbox>
    </hbox>
  </hbox>

  <!-- This form is injected into the printing options page (by calendar-print.js)
       if we are printing the calendar. The script for the form is also in
       calendar-print.js and CSS in calendar-print.css. -->
  <template xmlns="http://www.w3.org/1999/xhtml" id="calendarPrintForm">
    <form id="calendar-print">
      <link rel="localization" href="calendar/calendar-print.ftl"/>
      <link rel="stylesheet" href="chrome://calendar/skin/shared/calendar-print.css"/>

      <section class="body-container">
        <section class="section-block">
          <label for="layout" class="block-label" data-l10n-id="calendar-print-layout-label"></label>
          <div class="layout-wrapper">
            <select id="layout" autocomplete="off">
              <option value="list" data-l10n-id="calendar-print-layout-list"></option>
              <option value="monthGrid" data-l10n-id="calendar-print-layout-month-grid"></option>
              <option value="weekPlanner" data-l10n-id="calendar-print-layout-week-planner"></option>
            </select>
          </div>
        </section>

        <section class="section-block">
          <label class="block-label" data-l10n-id="calendar-print-filter-label"></label>
          <label class="row cols-2">
            <input type="checkbox" id="events" checked="checked" autocomplete="off" />
            <span data-l10n-id="calendar-print-filter-events"></span>
          </label>
          <label class="row cols-2">
            <input type="checkbox" id="tasks" checked="checked" autocomplete="off" />
            <span data-l10n-id="calendar-print-filter-tasks"></span>
          </label>
          <label class="row cols-2 indent">
            <input type="checkbox" id="completed-tasks" checked="checked" autocomplete="off" />
            <span data-l10n-id="calendar-print-filter-completedtasks"></span>
          </label>
          <label class="row cols-2 indent">
            <input type="checkbox" id="tasks-with-no-due-date" checked="checked" autocomplete="off" />
            <span data-l10n-id="calendar-print-filter-taskswithnoduedate"></span>
          </label>
        </section>

        <fieldset class="section-block">
          <legend class="block-label" data-l10n-id="calendar-print-range-from"></legend>
          <xul:calendar-minimonth id="from-minimonth"></xul:calendar-minimonth>
          <select id="from-month"></select>
          <input id="from-year" type="number" size="1"/>
          <select id="from-date"></select>
        </fieldset>
        <fieldset class="section-block">
          <legend class="block-label" data-l10n-id="calendar-print-range-to"></legend>
          <xul:calendar-minimonth id="to-minimonth"></xul:calendar-minimonth>
          <select id="to-month"></select>
          <input id="to-year" type="number" size="1"/>
          <select id="to-date"></select>
        </fieldset>
      </section>

      <hr />

      <footer class="footer-container" role="none">
        <section id="next-button-container" class="section-block">
          <button id="next-button"
                  class="primary"
                  type="submit"
                  showfocus=""
                  autocomplete="off"
                  data-l10n-id="calendar-print-next-button"></button>
          <button is="cancel-button"
                  type="button"
                  data-l10n-id="printui-cancel-button"
                  data-close-l10n-id="printui-close-button"
                  data-cancel-l10n-id="printui-cancel-button"></button>
        </section>
      </footer>

      <!-- This section will be added to the footer of the original form. -->
      <section id="back-button-container" class="section-block">
        <button id="back-button"
                type="button"
                autocomplete="off"
                data-l10n-id="calendar-print-back-button"></button>
      </section>
    </form>
  </template>
</vbox>

<!-- Menus -->

<menupopup id="calControlBarMenuPopup" position="bottomleft topleft">
  <menuitem id="findEventsButton"
            data-l10n-id="calendar-find-events-menu-option"
            type="checkbox"
            checked="true"
            command="calendar_show_unifinder_command"/>
  <menuseparator id="separatorBeforeHideWeekends"/>
  <menuitem id="hideWeekendsButton"
            data-l10n-id="calendar-hide-weekends-option"
            type="checkbox"
            command="calendar_toggle_workdays_only_command"/>
  <menuitem id="defineWorkweekButton"
            data-l10n-id="calendar-define-workweek-option"
            oncommand="showCalendarWeekPreferences();"/>
  <menuseparator id="separatorBeforeTasks"/>
  <menuitem id="showTasksInCalendarButton"
            data-l10n-id="calendar-show-tasks-calendar-option"
            type="checkbox"
            command="calendar_toggle_tasks_in_view_command"/>
</menupopup>