calendar/base/content/dialogs/calendar-event-dialog-recurrence.xhtml
author Mozilla Releng Treescript <release+treescript@mozilla.org>
Fri, 11 Jul 2025 18:52:03 +0000 (7 hours ago)
changeset 45458 4031593033c0833fd362eb8e1c04f9aac163d5a2
parent 43784 7a94400ed8f1f60282283a0b32b15c64d34291af
permissions -rw-r--r--
no bug - Bumping Thunderbird l10n changesets r=release a=l10n-bump DONTBUILD af -> 566eb51108b1fc42316fd4e25ceb91db7718e979 ar -> 566eb51108b1fc42316fd4e25ceb91db7718e979 ast -> 566eb51108b1fc42316fd4e25ceb91db7718e979 be -> 566eb51108b1fc42316fd4e25ceb91db7718e979 bg -> 566eb51108b1fc42316fd4e25ceb91db7718e979 br -> 566eb51108b1fc42316fd4e25ceb91db7718e979 ca -> 566eb51108b1fc42316fd4e25ceb91db7718e979 cak -> 566eb51108b1fc42316fd4e25ceb91db7718e979 cs -> 566eb51108b1fc42316fd4e25ceb91db7718e979 cy -> 566eb51108b1fc42316fd4e25ceb91db7718e979 da -> 566eb51108b1fc42316fd4e25ceb91db7718e979 de -> 566eb51108b1fc42316fd4e25ceb91db7718e979 dsb -> 566eb51108b1fc42316fd4e25ceb91db7718e979 el -> 566eb51108b1fc42316fd4e25ceb91db7718e979 en-CA -> 566eb51108b1fc42316fd4e25ceb91db7718e979 en-GB -> 566eb51108b1fc42316fd4e25ceb91db7718e979 es-AR -> 566eb51108b1fc42316fd4e25ceb91db7718e979 es-ES -> 566eb51108b1fc42316fd4e25ceb91db7718e979 es-MX -> 566eb51108b1fc42316fd4e25ceb91db7718e979 et -> 566eb51108b1fc42316fd4e25ceb91db7718e979 eu -> 566eb51108b1fc42316fd4e25ceb91db7718e979 fi -> 566eb51108b1fc42316fd4e25ceb91db7718e979 fr -> 566eb51108b1fc42316fd4e25ceb91db7718e979 fy-NL -> 566eb51108b1fc42316fd4e25ceb91db7718e979 ga-IE -> 566eb51108b1fc42316fd4e25ceb91db7718e979 gd -> 566eb51108b1fc42316fd4e25ceb91db7718e979 gl -> 566eb51108b1fc42316fd4e25ceb91db7718e979 he -> 566eb51108b1fc42316fd4e25ceb91db7718e979 hr -> 566eb51108b1fc42316fd4e25ceb91db7718e979 hsb -> 566eb51108b1fc42316fd4e25ceb91db7718e979 hu -> 566eb51108b1fc42316fd4e25ceb91db7718e979 hy-AM -> 566eb51108b1fc42316fd4e25ceb91db7718e979 id -> 566eb51108b1fc42316fd4e25ceb91db7718e979 is -> 566eb51108b1fc42316fd4e25ceb91db7718e979 it -> 566eb51108b1fc42316fd4e25ceb91db7718e979 ja -> 566eb51108b1fc42316fd4e25ceb91db7718e979 ja-JP-mac -> 566eb51108b1fc42316fd4e25ceb91db7718e979 ka -> 566eb51108b1fc42316fd4e25ceb91db7718e979 kab -> 566eb51108b1fc42316fd4e25ceb91db7718e979 kk -> 566eb51108b1fc42316fd4e25ceb91db7718e979 ko -> 566eb51108b1fc42316fd4e25ceb91db7718e979 lt -> 566eb51108b1fc42316fd4e25ceb91db7718e979 lv -> 566eb51108b1fc42316fd4e25ceb91db7718e979 mk -> 566eb51108b1fc42316fd4e25ceb91db7718e979 ms -> 566eb51108b1fc42316fd4e25ceb91db7718e979 nb-NO -> 566eb51108b1fc42316fd4e25ceb91db7718e979 nl -> 566eb51108b1fc42316fd4e25ceb91db7718e979 nn-NO -> 566eb51108b1fc42316fd4e25ceb91db7718e979 pa-IN -> 566eb51108b1fc42316fd4e25ceb91db7718e979 pl -> 566eb51108b1fc42316fd4e25ceb91db7718e979 pt-BR -> 566eb51108b1fc42316fd4e25ceb91db7718e979 pt-PT -> 566eb51108b1fc42316fd4e25ceb91db7718e979 rm -> 566eb51108b1fc42316fd4e25ceb91db7718e979 ro -> 566eb51108b1fc42316fd4e25ceb91db7718e979 ru -> 566eb51108b1fc42316fd4e25ceb91db7718e979 sk -> 566eb51108b1fc42316fd4e25ceb91db7718e979 sl -> 566eb51108b1fc42316fd4e25ceb91db7718e979 sq -> 566eb51108b1fc42316fd4e25ceb91db7718e979 sr -> 566eb51108b1fc42316fd4e25ceb91db7718e979 sv-SE -> 566eb51108b1fc42316fd4e25ceb91db7718e979 th -> 566eb51108b1fc42316fd4e25ceb91db7718e979 tr -> 566eb51108b1fc42316fd4e25ceb91db7718e979 uk -> 566eb51108b1fc42316fd4e25ceb91db7718e979 uz -> 566eb51108b1fc42316fd4e25ceb91db7718e979 vi -> 566eb51108b1fc42316fd4e25ceb91db7718e979 zh-CN -> 566eb51108b1fc42316fd4e25ceb91db7718e979 zh-TW -> 566eb51108b1fc42316fd4e25ceb91db7718e979
<?xml version="1.0"?>
<!-- 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/. -->

<!DOCTYPE html [ <!ENTITY % dialogDTD SYSTEM "chrome://calendar/locale/calendar-event-dialog.dtd">
%dialogDTD; ]>
<html
  id="calendar-event-dialog-recurrence"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  xmlns:html="http://www.w3.org/1999/xhtml"
  windowtype="Calendar:EventDialog:Recurrence"
  persist="screenX screenY width height"
  lightweightthemes="true"
  scrolling="false"
>
  <head>
    <title>&recurrence.title.label;</title>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src chrome:; script-src chrome: 'unsafe-inline'; style-src chrome: 'unsafe-inline'"
    />
    <link rel="stylesheet" href="chrome://messenger/skin/colors.css" />
    <link rel="stylesheet" href="chrome://messenger/skin/messenger.css" />
    <link rel="stylesheet" href="chrome://calendar/skin/calendar-daypicker.css" />
    <link rel="stylesheet" href="chrome://calendar/skin/shared/widgets/minimonth.css" />
    <link rel="stylesheet" href="chrome://calendar/skin/calendar-event-dialog.css" />
    <link rel="stylesheet" href="chrome://calendar/skin/shared/dialogs/calendar-event-dialog.css" />
    <link rel="stylesheet" href="chrome://calendar/skin/shared/datetimepickers.css" />
    <link rel="stylesheet" href="chrome://messenger/skin/contextMenu.css" />
    <link rel="stylesheet" href="chrome://messenger/skin/input-fields.css" />
    <link rel="stylesheet" href="chrome://messenger/skin/themeableDialog.css" />
    <link rel="localization" href="calendar/calendar.ftl" />
    <link rel="localization" href="calendar/calendar-recurrence-dialog.ftl" />
    <script defer="defer" src="chrome://messenger/content/dialogShadowDom.js"></script>
    <script defer="defer" src="chrome://calendar/content/calendar-dialog-utils.js"></script>
    <script defer="defer" src="chrome://calendar/content/calendar-ui-utils.js"></script>
    <script defer="defer" src="chrome://calendar/content/calendar-statusbar.js"></script>
    <script defer="defer" src="chrome://calendar/content/widgets/calendar-minimonth.js"></script>
    <script defer="defer" src="chrome://calendar/content/widgets/datetimepickers.js"></script>
    <script
      defer="defer"
      src="chrome://calendar/content/calendar-event-dialog-recurrence.js"
    ></script>
  </head>
  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <dialog>
      <!-- recurrence pattern -->
      <html:fieldset id="recurrence-pattern-groupbox">
        <html:legend id="recurrence-pattern-caption">&event.recurrence.pattern.label;</html:legend>
        <hbox flex="1" id="recurrence-pattern-hbox">
          <vbox>
            <label
              value="&event.recurrence.occurs.label;"
              class="recurrence-pattern-hbox-label"
              disable-on-readonly="true"
              disable-on-occurrence="true"
              control="period-list"
            />
          </vbox>
          <vbox flex="1">
            <menulist
              id="period-list"
              oncommand="updateRecurrenceBox();"
              disable-on-readonly="true"
              disable-on-occurrence="true"
            >
              <menupopup id="period-list-menupopup">
                <menuitem
                  id="period-list-day-menuitem"
                  label="&event.recurrence.day.label;"
                  value="0"
                />
                <menuitem
                  id="period-list-week-menuitem"
                  label="&event.recurrence.week.label;"
                  value="1"
                />
                <menuitem
                  id="period-list-month-menuitem"
                  label="&event.recurrence.month.label;"
                  value="2"
                />
                <menuitem
                  id="period-list-year-menuitem"
                  label="&event.recurrence.year.label;"
                  value="3"
                />
              </menupopup>
            </menulist>
            <html:input id="week-start" type="hidden" value="1" />
            <hbox id="period-box" oncommand="updateRecurrenceControls();">
              <!-- Daily -->
              <box id="period-box-daily-box" orient="vertical" align="start">
                <radiogroup id="daily-group">
                  <box id="daily-period-every-box" orient="horizontal" align="center">
                    <radio
                      id="daily-group-every-radio"
                      label="&event.recurrence.pattern.every.label;"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                      selected="true"
                    />
                    <html:input
                      id="daily-days"
                      type="number"
                      class="size3 input-inline"
                      min="1"
                      max="32767"
                      value="1"
                      oninput="updateRecurrenceControls();"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                    />
                    <label
                      id="daily-group-every-units-label"
                      value="&repeat.units.days.both;"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                    />
                    <spacer id="daily-group-spacer" flex="1" />
                  </box>
                  <radio
                    id="daily-group-weekday-radio"
                    label="&event.recurrence.pattern.every.weekday.label;"
                    disable-on-readonly="true"
                    disable-on-occurrence="true"
                  />
                </radiogroup>
              </box>
              <!-- Weekly -->
              <vbox id="period-box-weekly-box" hidden="true">
                <hbox id="weekly-period-every-box" align="center">
                  <label
                    id="weekly-period-every-label"
                    value="&event.recurrence.pattern.weekly.every.label;"
                    disable-on-readonly="true"
                    disable-on-occurrence="true"
                    control="weekly-weeks"
                  />
                  <html:input
                    id="weekly-weeks"
                    type="number"
                    class="size3 input-inline"
                    min="1"
                    max="32767"
                    value="1"
                    oninput="updateRecurrenceControls();"
                    disable-on-readonly="true"
                    disable-on-occurrence="true"
                  />
                  <label
                    id="weekly-period-units-label"
                    value="&repeat.units.weeks.both;"
                    disable-on-readonly="true"
                    disable-on-occurrence="true"
                  />
                </hbox>
                <separator class="thin" />
                <hbox align="center">
                  <label
                    id="weekly-period-on-label"
                    value="&event.recurrence.on.label;"
                    disable-on-readonly="true"
                    disable-on-occurrence="true"
                    control="daypicker-weekday"
                  />
                  <hbox
                    id="daypicker-weekday"
                    flex="1"
                    disable-on-readonly="true"
                    disable-on-occurrence="true"
                  >
                    <button
                      class="calendar-daypicker"
                      type="checkbox"
                      autoCheck="true"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                      mode="daypicker-weekday"
                    />
                    <button
                      class="calendar-daypicker"
                      type="checkbox"
                      autoCheck="true"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                      mode="daypicker-weekday"
                    />
                    <button
                      class="calendar-daypicker"
                      type="checkbox"
                      autoCheck="true"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                      mode="daypicker-weekday"
                    />
                    <button
                      class="calendar-daypicker"
                      type="checkbox"
                      autoCheck="true"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                      mode="daypicker-weekday"
                    />
                    <button
                      class="calendar-daypicker"
                      type="checkbox"
                      autoCheck="true"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                      mode="daypicker-weekday"
                    />
                    <button
                      class="calendar-daypicker"
                      type="checkbox"
                      autoCheck="true"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                      mode="daypicker-weekday"
                    />
                    <button
                      class="calendar-daypicker"
                      type="checkbox"
                      autoCheck="true"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                      mode="daypicker-weekday"
                    />
                  </hbox>
                </hbox>
              </vbox>

              <!-- Monthly -->
              <vbox id="period-box-monthly-box" hidden="true">
                <hbox id="montly-period-every-box" align="center">
                  <label
                    id="monthly-period-every-label"
                    value="&event.recurrence.pattern.monthly.every.label;"
                    disable-on-readonly="true"
                    disable-on-occurrence="true"
                    control="monthly-interval"
                  />
                  <html:input
                    id="monthly-interval"
                    type="number"
                    class="size3 input-inline"
                    min="1"
                    max="32767"
                    value="1"
                    oninput="updateRecurrenceControls();"
                    disable-on-readonly="true"
                    disable-on-occurrence="true"
                  />
                  <label
                    id="monthly-period-units-label"
                    value="&repeat.units.months.both;"
                    disable-on-readonly="true"
                    disable-on-occurrence="true"
                  />
                </hbox>
                <radiogroup id="monthly-group">
                  <box id="monthly-period-relative-date-box" orient="horizontal" align="center">
                    <radio
                      id="montly-period-relative-date-radio"
                      selected="true"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                    />
                    <menulist
                      id="monthly-ordinal"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                    >
                      <menupopup id="montly-ordinal-menupopup">
                        <menuitem
                          id="monthly-ordinal-every-label"
                          label="&event.recurrence.monthly.every.label;"
                          value="0"
                        />
                        <menuitem
                          id="monthly-ordinal-first-label"
                          label="&event.recurrence.monthly.first.label;"
                          value="1"
                        />
                        <menuitem
                          id="monthly-ordinal-second-label"
                          label="&event.recurrence.monthly.second.label;"
                          value="2"
                        />
                        <menuitem
                          id="monthly-ordinal-third-label"
                          label="&event.recurrence.monthly.third.label;"
                          value="3"
                        />
                        <menuitem
                          id="monthly-ordinal-fourth-label"
                          label="&event.recurrence.monthly.fourth.label;"
                          value="4"
                        />
                        <menuitem
                          id="monthly-ordinal-fifth-label"
                          label="&event.recurrence.monthly.fifth.label;"
                          value="5"
                        />
                        <menuitem
                          id="monthly-ordinal-last-label"
                          label="&event.recurrence.monthly.last.label;"
                          value="-1"
                        />
                      </menupopup>
                    </menulist>
                    <menulist
                      id="monthly-weekday"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                    >
                      <menupopup id="monthly-weekday-menupopup">
                        <!-- Filled dynamically. -->
                        <menuitem
                          id="monthly-weekday-dayofmonth"
                          label="&event.recurrence.repeat.dayofmonth.label;"
                          value="-1"
                        />
                      </menupopup>
                    </menulist>
                  </box>
                  <separator class="thin" />
                  <box id="monthly-period-specific-date-box" orient="horizontal" align="center">
                    <radio
                      id="montly-period-specific-date-radio"
                      label="&event.recurrence.repeat.recur.label;"
                      disable-on-readonly="true"
                      disable-on-occurrence="true"
                    />
                    <hbox id="monthly-days" class="daypicker-monthday">
                      <vbox class="daypicker-monthday-mainbox" flex="1">
                        <hbox class="daypicker-row" flex="1">
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="1"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="2"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="3"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="4"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="5"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="6"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="7"
                            mode="monthly-days"
                          />
                        </hbox>
                        <hbox class="daypicker-row" flex="1">
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="8"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="9"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="10"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="11"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="12"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="13"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="14"
                            mode="monthly-days"
                          />
                        </hbox>
                        <hbox class="daypicker-row" flex="1">
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="15"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="16"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="17"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="18"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="19"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="20"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="21"
                            mode="monthly-days"
                          />
                        </hbox>
                        <hbox class="daypicker-row" flex="1">
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="22"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="23"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="24"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="25"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="26"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="27"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="28"
                            mode="monthly-days"
                          />
                        </hbox>
                        <hbox class="daypicker-row" flex="1">
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="29"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="30"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label="31"
                            mode="monthly-days"
                          />
                          <button
                            class="calendar-daypicker"
                            type="checkbox"
                            autoCheck="true"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                            label=""
                            mode="monthly-days"
                          />
                        </hbox>
                      </vbox>
                    </hbox>
                  </box>
                </radiogroup>
              </vbox>

              <!-- Yearly -->
              <box id="period-box-yearly-box" orient="vertical" align="start" hidden="true">
                <hbox id="yearly-period-every-box" align="center">
                  <label
                    id="yearly-period-every-label"
                    value="&event.recurrence.every.label;"
                    control="yearly-interval"
                  />
                  <html:input
                    id="yearly-interval"
                    type="number"
                    class="size3 input-inline"
                    min="1"
                    max="32767"
                    value="1"
                    oninput="updateRecurrenceControls();"
                    disable-on-readonly="true"
                    disable-on-occurrence="true"
                  />
                  <label id="yearly-period-units-label" value="&repeat.units.years.both;" />
                </hbox>
                <radiogroup id="yearly-group">
                  <vbox>
                    <hbox>
                      <radio
                        id="yearly-period-absolute-radio"
                        label="&event.recurrence.pattern.yearly.every.month.label;"
                        selected="true"
                        disable-on-readonly="true"
                        disable-on-occurrence="true"
                      />
                      <box id="yearly-period-absolute-controls" orient="horizontal" align="center">
                        <html:input
                          id="yearly-days"
                          type="number"
                          class="size3 input-inline"
                          min="1"
                          value="1"
                          oninput="checkYearlyAbsoluteDate();"
                          disable-on-readonly="true"
                          disable-on-occurrence="true"
                        />
                        <label
                          id="yearly-period-of-month-label"
                          value="&event.recurrence.pattern.yearly.of.label;"
                          control="yearly-month-ordinal"
                        />
                        <menulist
                          id="yearly-month-ordinal"
                          onselect="checkYearlyAbsoluteDate()"
                          disable-on-readonly="true"
                          disable-on-occurrence="true"
                        >
                          <menupopup id="yearly-month-ordinal-menupopup">
                            <!-- Filled dynamically. -->
                          </menupopup>
                        </menulist>
                      </box>
                    </hbox>
                    <hbox>
                      <vbox>
                        <hbox>
                          <radio
                            id="yearly-period-relative-radio"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                          />
                          <box
                            id="yearly-period-relative-controls"
                            orient="horizontal"
                            align="center"
                          >
                            <menulist
                              id="yearly-ordinal"
                              disable-on-readonly="true"
                              disable-on-occurrence="true"
                            >
                              <menupopup id="yearly-ordinal-menupopup">
                                <menuitem
                                  id="yearly-ordinal-every"
                                  label="&event.recurrence.yearly.every.label;"
                                  value="0"
                                />
                                <menuitem
                                  id="yearly-ordinal-first"
                                  label="&event.recurrence.yearly.first.label;"
                                  value="1"
                                />
                                <menuitem
                                  id="yearly-ordinal-second"
                                  label="&event.recurrence.yearly.second.label;"
                                  value="2"
                                />
                                <menuitem
                                  id="yearly-ordinal-third"
                                  label="&event.recurrence.yearly.third.label;"
                                  value="3"
                                />
                                <menuitem
                                  id="yearly-ordinal-fourth"
                                  label="&event.recurrence.yearly.fourth.label;"
                                  value="4"
                                />
                                <menuitem
                                  id="yearly-ordinal-fifth"
                                  label="&event.recurrence.yearly.fifth.label;"
                                  value="5"
                                />
                                <menuitem
                                  id="yearly-ordinal-last"
                                  label="&event.recurrence.yearly.last.label;"
                                  value="-1"
                                />
                              </menupopup>
                            </menulist>
                            <menulist
                              id="yearly-weekday"
                              disable-on-readonly="true"
                              disable-on-occurrence="true"
                            >
                              <menupopup id="yearly-weekday-menupopup">
                                <!-- Filled dynamically. -->
                                <menuitem
                                  id="yearly-weekday--1"
                                  label="&event.recurrence.pattern.yearly.day.label;"
                                  value="-1"
                                />
                              </menupopup>
                            </menulist>
                          </box>
                        </hbox>
                        <hbox>
                          <label
                            id="yearly-period-of-label"
                            class="recurrence-pattern-hbox-label"
                            value="&event.recurrence.of.label;"
                            control="yearly-month-rule"
                          />
                          <menulist
                            id="yearly-month-rule"
                            disable-on-readonly="true"
                            disable-on-occurrence="true"
                          >
                            <menupopup id="yearly-month-rule-menupopup">
                              <!-- Filled dynamically. -->
                            </menupopup>
                          </menulist>
                        </hbox>
                      </vbox>
                    </hbox>
                  </vbox>
                </radiogroup>
              </box>
            </hbox>
          </vbox>
        </hbox>
      </html:fieldset>

      <!-- range of recurrence -->
      <html:fieldset id="recurrence-range-groupbox">
        <html:legend id="recurrence-range-caption">&event.recurrence.range.label;</html:legend>
        <vbox>
          <radiogroup id="recurrence-duration" oncommand="updateRecurrenceControls()">
            <radio
              id="recurrence-range-forever"
              label="&event.recurrence.forever.label;"
              value="forever"
              selected="true"
              disable-on-readonly="true"
              disable-on-occurrence="true"
            />
            <box id="recurrence-range-count-box" orient="horizontal" align="center">
              <radio
                id="recurrence-range-for"
                label="&event.recurrence.repeat.for.label;"
                value="ntimes"
                disable-on-readonly="true"
                disable-on-occurrence="true"
              />
              <html:input
                id="repeat-ntimes-count"
                type="number"
                class="size3 input-inline"
                min="1"
                max="32767"
                value="5"
                oninput="updateRecurrenceControls();"
                disable-on-readonly="true"
                disable-on-occurrence="true"
              />
              <label
                id="repeat-appointments-label"
                value="&event.recurrence.appointments.label;"
                disable-on-readonly="true"
                disable-on-occurrence="true"
              />
            </box>
            <box id="recurrence-range-until-box" orient="horizontal" align="center">
              <radio
                id="recurrence-range-until"
                label="&event.repeat.until.label;"
                value="until"
                disable-on-readonly="true"
                disable-on-occurrence="true"
                control="repeat-until-date"
              />
              <datepicker
                id="repeat-until-date"
                onchange="checkUntilDate();"
                disable-on-readonly="true"
                disable-on-occurrence="true"
              />
            </box>
          </radiogroup>
        </vbox>
      </html:fieldset>

      <!-- preview -->
      <html:fieldset id="recurrencePreviewContainer">
        <html:legend
          id="recurrencePreviewLabel"
          data-l10n-id="calendar-recurrence-preview-label"
        ></html:legend>
        <html:div id="recurrencePreviewNavigation">
          <html:button
            id="recurrencePrevious"
            data-l10n-id="calendar-recurrence-previous"
          ></html:button>
          <html:button id="recurrenceToday" data-l10n-id="calendar-recurrence-today"></html:button>
          <html:button id="recurrenceNext" data-l10n-id="calendar-recurrence-next"></html:button>
        </html:div>
        <html:div id="recurrencePreviewCalendars">
          <html:div id="recurrencePreview">
            <calendar-minimonth
              readonly="true"
              hidden="false"
              active-month="true"
              initial-month="true"
            />
            <calendar-minimonth readonly="true" hidden="false" />
            <calendar-minimonth readonly="true" hidden="false" />
            <calendar-minimonth readonly="true" hidden="true" />
            <calendar-minimonth readonly="true" hidden="true" />
            <calendar-minimonth readonly="true" hidden="true" />
            <calendar-minimonth readonly="true" hidden="true" />
            <calendar-minimonth readonly="true" hidden="true" />
            <calendar-minimonth readonly="true" hidden="true" />
          </html:div>
        </html:div>
      </html:fieldset>
    </dialog>
  </html:body>
</html>