Calendar

The following sections describe attributes, child elements, and parent elements.

Attributes

Attribute	Description
label	Creates a label tag next to the applet tag.
labelposition	Where to place the label tag, "left" or "right"; default: left.
id	id attribute of the hidden input receiving the calendar's value. It determines the id attribute of several other tags: day list: {@id}-dd month list: {@id}-mm year list: {@id}-yy hour list: {@id}-hh minute list: {@id}-min calendar pop-in button: {@id}-img calendar pop-in: {@id}_calendarDiv; in the calendar pop-in, the following elements use the id attribute: hour drop down: {@id}_hourDropDown and its items {@id}_hourDiv00, {@id}_hourDiv01, etc. minute drop down: {@id}_minuteDropDown and its items {@id}_minuteDiv_00, {@id}_minuteDiv_05, etc. bottom bar: {@id}_bottomBar today's date label: {@id}_todaysDateString time bar: {@id}_timeBar selected hour label: {@id}_calendar_hour_txt selected minute label: {@id}_calendar_minute_txt top bar: {@id}_topBar selected month div and label: {@id}_monthSelect and {@id}_month_txt selected year label: {@id}_year_txt month drop down: {@id}_monthDropDown and its items {@id}_monthDiv_0, {@id}_monthDiv_1, etc. year drop down: {@id}_yearDropDown and its items {@id}_yearDiv2000, {@id}_yearDiv2001, etc. calendar main div: {@id}_calendarDivContent
name	the name of the hidden input receiving the applet's XML content; if omitted, will default to the id attribute
init	XPath attribute determining the date displayed at startup (it must be in french format). Default: empty
minYear	Static attribute determining the minimum year in the year list box. Default: 1999
maxYear	Static attribute determining the maximum year in the year list box. Default: 2020
mindate	XPath attribute determining the minimum possible date. The calendar will refuse dates strictly inferior, either from the pop-in, or the list boxes
maxdate	XPath attribute determining the maximum possible date. The calendar will refuse dates strictly superior, either from the pop-in, or the list boxes
style	Static attribute determining options for the calendar, separated by whitespaces. Possible values are: compact: removes the "/" and ":" between listboxes noyear: removes the year list box time: displays the time controls (not displayed by default)

Child elements

None.

Parent elements

Element	Description
any xhtml or xsl tag

The XHTML structure created by the acs:Calendar is the following:

Copy

<!-- list boxes -->
<label for="{@id}">Date de création</label>
<input type="hidden" id="{@id}" name="{@name or @id}"/>
<div class="calendar">
  <select name="{@name or @id}-dd" id="{@id}-dd">
    <option value=""></option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    <option value="06">06</option>
    <option value="07">07</option>
    <option value="08">08</option>
    <option value="09">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
  </select>
  <!-- deleted if compact style is selected -->
  &nbsp;/&nbsp;
  <!-- month names are translated -->
  <select name="{@name of @id}-mm" id="{@id}-mm">
    <option value=""></option>
    <option value="01">Jan</option>
    <option value="02">Fév</option>
    <option value="03">Mar</option>
    <option value="04">Avr</option>
    <option value="05">Mai</option>
    <option value="06">Jui</option>
    <option value="07">Jul</option>
    <option value="08">Aoû</option>
    <option value="09">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Déc</option>
  </select>
  <!-- deleted if compact style is selected -->
  &nbsp;/&nbsp;
  <!-- deleted if noyear style is selected -->
  <select name="{@name of @id}-yy" id="{@id}-yy">
    <option value=""></option>
    <option value="minYear">minYear</option>
    ...
    <option value="maxYear">maxYear</option>
  </select>
  <img class="button" id="{@id}-img" src="{$root}img/calendar/calendar.gif">
</div>
<!-- pop-in -->
<div id="{@id}_calendarDiv" class="calendarDiv" style="z-index: 1000; left: 599px; top: 224px; visibility: visible; display: block;">
  <div class="monthYearPicker" id="{@id}_hourDropDown" style="left: 130px; width: 30px; display: none;">
    <div>&nbsp;&nbsp;- </div>
    <div id="{@id}_hourDiv14">13</div>
    <div id="{@id}_hourDiv15">14</div>
    <div id="{@id}_hourDiv16">15</div>
    <div id="{@id}_hourDiv17">16</div>
    <div id="{@id}_hourDiv18">17</div>
    <div id="{@id}_hourDiv19" style="color: rgb(214, 8, 8);">18</div>
    <div id="{@id}_hourDiv20">19</div>
    <div id="{@id}_hourDiv21">20</div>
    <div id="{@id}_hourDiv22">21</div>
    <div id="{@id}_hourDiv23">22</div>
    <div>&nbsp;&nbsp;+ </div>
  </div>
  <div class="monthYearPicker" id="{@id}_minuteDropDown" style="left: 167px; width: 30px; display: none;">
    <div id="{@id}_minuteDiv_00">00</div>
    <div id="{@id}_minuteDiv_05">05</div>
    <div id="{@id}_minuteDiv_10">10</div>
    <div id="{@id}_minuteDiv_15">15</div>
    <div id="{@id}_minuteDiv_20">20</div>
    <div id="{@id}_minuteDiv_25">25</div>
    <div id="{@id}_minuteDiv_30">30</div>
    <div id="{@id}_minuteDiv_35">35</div>
    <div id="{@id}_minuteDiv_40">40</div>
    <div id="{@id}_minuteDiv_45">45</div>
    <div id="{@id}_minuteDiv_50">50</div>
    <div id="{@id}_minuteDiv_55">55</div>
  </div>
  <div id="{@id}_bottomBar" class="todaysDate" style="cursor: pointer;">
    <div id="{@id}_todaysDateString" style="width: 100%;">Aujourd'hui Lun. 10. Aou 2015</div>
    <div id="{@id}_timeBar" class="timeBar" style="">
      <div class="selectBoxTime" style="width: 30px;">
        <span id="{@id}_calendar_hour_txt">18</span>
        <img src="{$root}img/calendar/down_time.gif"/>
      </div>
      <div class="selectBoxTime" style="width: 30px;">
        <span id="{@id}_calendar_minute_txt">11</span>
        <img src="{$root}img/calendar/down_time.gif"/>
      </div>
    </div>
  </div>
  <div class="topBar" id="{@id}_topBar" style="top: 162px;">
    <div style="margin-right: 1px;">
      <img src="{$root}img/calendar/left.gif"/>
    </div>
    <div style="margin-right: 1px;">
      <img src="{$root}img/calendar/right.gif"/>
    </div>
    <div id="{@id}_monthSelect" class="selectBox monthSelect">
      <span id="{@id}_calendar_month_txt">Mars</span>
      <img src="{$root}img/calendar/down.gif" style="position: absolute; right: 0px;"/>
    </div>
    <div class="selectBox">
      <span id="{@id}_calendar_year_txt">2008</span>
      <img src="{$root}img/calendar/down.gif"/>
    </div>
    <img src="{$root}img/calendar/close.gif" style="position: absolute; right: 2px;"/>
  </div>
  <div class="monthYearPicker" id="{@id}_monthDropDown" style="left: 37px; top: 20px; width: 60px; display: none;">
    <div id="{@id}_monthDiv_0" style="width: 56px;">Janvier</div>
    <div id="{@id}_monthDiv_1" style="width: 56px;">Février</div>
    <div id="{@id}_monthDiv_2" style="width: 56px; color: rgb(214, 8, 8);">Mars</div>
    <div id="{@id}_monthDiv_3" style="width: 56px;">Avril</div>
    <div id="{@id}_monthDiv_4" style="width: 56px;">Mai</div>
    <div id="{@id}_monthDiv_5" style="width: 56px;">Juin</div>
    <div id="{@id}_monthDiv_6" style="width: 56px;">Juillet</div>
    <div id="{@id}_monthDiv_7" style="width: 56px;">Août</div>
    <div id="{@id}_monthDiv_8" style="width: 56px;">Septembre</div>
    <div id="{@id}_monthDiv_9" style="width: 56px;">Octobre</div>
    <div id="{@id}_monthDiv_10" style="width: 56px;">Novembre</div>
    <div id="{@id}_monthDiv_11" style="width: 56px;">Décembre</div>
  </div>
  <div class="monthYearPicker" id="{@id}_yearDropDown" style="left: 113px; top: 20px; width: 35px; display: none;">
    <div>&nbsp;&nbsp;- </div>
    <div id="{@id}_yearDiv2003">2003</div>
    <div id="{@id}_yearDiv2004">2004</div>
    <div id="{@id}_yearDiv2005">2005</div>
    <div id="{@id}_yearDiv2006">2006</div>
    <div id="{@id}_yearDiv2007">2007</div>
    <div id="{@id}_yearDiv2008" style="color: rgb(214, 8, 8);">2008</div>
    <div id="{@id}_yearDiv2009">2009</div>
    <div id="{@id}_yearDiv2010">2010</div>
    <div id="{@id}_yearDiv2011">2011</div>
    <div id="{@id}_yearDiv2012">2012</div>
    <div>&nbsp;&nbsp;+ </div>
  </div>
  <div id="{@id}_calendarDivContent">
    <table width="100%" cellspacing="0">
      <tbody>
        <tr class="calendar_week_row">
          <td class="calendar_week_column" style="background-color: rgb(226, 235, 237);">S</td>
          <td>Lun</td>
          <td>Mar</td>
          <td>Mer</td>
          <td>Jeu</td>
          <td>Ven</td>
          <td>Sam</td>
          <td>Dim</td>
        </tr>
        <tr>
          <td class="calendar_week_column" style="background-color: rgb(226, 235, 237);">9</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td class="calendar_week_column" style="background-color: rgb(226, 235, 237);">10</td>
          <td>3</td>
          <td>4</td>
          <td class="activeDay">5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
        <tr>
          <td class="calendar_week_column" style="background-color: rgb(226, 235, 237);">11</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
        </tr>
        <tr>
          <td class="calendar_week_column" style="background-color: rgb(226, 235, 237);">12</td>
          <td>17</td>
          <td>18</td>
          <td>19</td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
        </tr>
        <tr>
          <td class="calendar_week_column" style="background-color: rgb(226, 235, 237);">13</td>
          <td>24</td>
          <td>25</td>
          <td>26</td>
          <td>27</td>
          <td>28</td>
          <td>29</td>
          <td>30</td>
        </tr>
        <tr>
          <td class="calendar_week_column" style="background-color: rgb(226, 235, 237);">14</td>
          <td>31</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Important
You must create the img/calendar directory at the root of your application with the following files: calendar.gif: icon used to open the pop-in down_time.gif: icon used to open the hour and minute list left.gif: icon used to select the previous month right.gif: icon used to select the next month down.gif: icon used to open the month and year list close.gif: icon used to close the pop-in

Important

You must create the img/calendar directory at the root of your application with the following files:

calendar.gif: icon used to open the pop-in
down_time.gif: icon used to open the hour and minute list
left.gif: icon used to select the previous month
right.gif: icon used to select the next month
down.gif: icon used to open the month and year list
close.gif: icon used to close the pop-in

Copy

<acs:Calendar minYear="1900" maxYear="2050" id="company_creation_date" name="enr7" label="Creation date" labelposition="left" init="{/BODY/COMPANY/COMPANY_CREATION_DATE}" />