Revision control
Copy as Markdown
Other Tools
# 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
<vbox id="calendarTabPanel">
<hbox id="calendarContent" flex="1">
<vbox id="calSidebar"
persist="collapsed width">
<html:div id="primaryButtonSidePanel"
<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"
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>
<li draggable="true" role="option">
<div class="calendar-color"></div>
<div class="calendar-name"></div>
<img class="calendar-readstatus calendar-list-icon"
alt="" />
<img class="calendar-mute-status calendar-list-icon"
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>
<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="refreshUnifinderFilterInterval()">
<menuitem id="event-filter-today"
value="today"
data-l10n-id="calendar-event-listing-interval-today"/>
<menuitem id="event-filter-next7days"
value="P7D"
data-l10n-id="calendar-event-listing-interval-next-7-days"/>
<menuitem id="event-filter-next14Days"
value="P14D"
data-l10n-id="calendar-event-listing-interval-next-14-days"/>
<menuitem id="event-filter-next31Days"
value="P31D"
data-l10n-id="calendar-event-listing-interval-next-31-days"/>
<!-- The next three intervals use iCalendar duration values
for their value, but these durations don't support values
in month units, so we don't use standard notation for the
next two. -->
<menuitem id="event-filter-next6Months"
value="next6Months"
data-l10n-id="calendar-event-listing-interval-next-6-months"/>
<menuitem id="event-filter-next12Months"
value="next12Months"
data-l10n-id="calendar-event-listing-interval-next-12-months"/>
<menuitem id="event-filter-thisCalendarMonth"
value="thisCalendarMonth"
data-l10n-id="calendar-event-listing-interval-calendar-month"/>
<menuitem id="event-filter-current"
value="current"
data-l10n-id="calendar-event-listing-interval-selected-day"/>
<menuitem id="event-filter-currentview"
value="currentview"
data-l10n-id="calendar-event-listing-interval-current-view"/>
</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"
flex="1"/>
</box>
<toolbarbutton id="unifinder-closer"
class="unifinder-closebutton close-icon"
command="calendar_show_unifinder_command"
data-l10n-id="calendar-event-listing-close"/>
</hbox>
<tree id="unifinder-search-results-tree" flex="1"
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"
data-l10n-id="calendar-event-listing-column-title"/>
<splitter class="tree-splitter"/>
<treecol id="unifinder-search-results-tree-col-startdate"
persist="hidden ordinal width"
style="flex: 1 auto"
closemenu="none"
itemproperty="startDate"
data-l10n-id="calendar-event-listing-column-start-date"/>
<splitter class="tree-splitter"/>
<treecol id="unifinder-search-results-tree-col-enddate"
persist="hidden ordinal width"
style="flex: 1 auto"
closemenu="none"
itemproperty="endDate"
data-l10n-id="calendar-event-listing-column-end-date"/>
<splitter class="tree-splitter"/>
<treecol id="unifinder-search-results-tree-col-categories"
persist="hidden ordinal width"
style="flex: 1 auto"
closemenu="none"
itemproperty="categories"
data-l10n-id="calendar-event-listing-column-category"/>
<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"
data-l10n-id="calendar-event-listing-column-location"/>
<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"
data-l10n-id="calendar-event-listing-column-status"/>
<treecol id="unifinder-search-results-tree-col-calendarname"
persist="hidden ordinal width"
style="flex: 1 auto"
closemenu="none"
hidden="true"
itemproperty="calendar"
data-l10n-id="calendar-event-listing-column-calendar-name"/>
</treecols>
<!-- on mousedown here happens before onclick above -->
<treechildren tooltip="eventTreeTooltip"
ondblclick="unifinderDoubleClick(event)"/>
</tree>
</vbox>
<splitter id="calendar-view-splitter"
resizebefore="closest"
resizeafter="farthest"
persist="state"
class="chromeclass-extrachrome sidebar-splitter calendar-splitter"
orient="vertical"/>
<!-- Calendar Navigation Control Bar -->
<html:div id="calendarViewHeader"
<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"
class="calendar-splitter"
collapse="none"
persist="state"
orient="vertical"/>
<vbox id="calendar-task-details-container"
style="height: 50%"
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"
command="calendar_task_category_command"
class="toolbarbutton-1 message-header-view-button"
data-l10n-id="calendar-event-listing-column-category">
<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("ignorekeys");"
onfocus="this.parentNode.setAttribute("ignorekeys", "true");"
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. -->
<form id="calendar-print">
<link rel="localization" href="calendar/calendar-print.ftl"/>
<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>