CalendarBox

Top  Previous  Next

CalendarBox a Process Field. It can be used inside or outside of a ProcessRecord Element. This process fields makes use of LGPL licenced "The DHTML Javascript Calendar" provided by Dynaarch.

It encloses:

A DateBox Process Field
An opener element. e.g. a button.

  <span mo:type="CalendarBox" mo:name="ORDERDATE" 
       mo:props="
          showAt              : '1', 
          firstDayOfWeek      : '1', 
          showsTime           : true, 
          time24              : true, 
          weekNumbers         : true,
          showOtherMonths     : true,
          singleClick         : true,
          statusBarDateFormat : '%y/%m/%d',
          onSelectHandler     : OnSelectHandler,
          dateStatusHandler   : DateStatusHandler
       ">
    <.. DateBox Code ..>
    <input name="Opener" value="..." type="button" onclick="return DateMgr.showCalendar(this)" 
           mo:type="CalendarOpener" />
  <span>

 

See CalendarBox Function Class in MoreMotion Face API.

Properties

showAt

The position of the calendar div in x:y format. Additionally, value "1" can be used to open the div under the DateBox and value "2" to open it under the opener button.

firstDayOfWeek

A number between 0 ("Sunday") to 6 ("Saturday") as the first day of the week

showTime

Value true shows the time.

time24

Value true displays the time 24-hour format.

weekNumbers

Value true shows the week numbers.

showsOtherMonths

Value true enables the other months dialogs.

singleClick

Value true enables the date selection with a single click. Otherwise date selection is done with double click.

statusBarDateFormat

The definitions to format the date on the status bar. See DHTML Calendar Widget Help

onSelectHandler

The Javascript function to call when a date is selected on the calendar. The function receives the Calendar Object associated with this object as the parameter. If the function returns false then the date selection is refused and the calendar is not closed.

dateStatusHandler

The Javascript function to call to determine the status of the given date during building a calendar view. The function receives a JS Date object as the parameter. The function may return true, false or a CSS class name.

 

Required Javascript Files

This element requires the following Javascript files are linked to the page in the HEAD section of the HTML document as follows.

  <head> 
    ...
    <script type="text/javascript" src="moremotion/face/DateNum/Date.js"></script>
    <script type="text/javascript" src="moremotion/face/DateNum/Calendar.js"></script>
    <script type="text/javascript" src="moremotion/face/_resources/<language-code>/DateNum.js"></script>
    <script type="text/javascript" src="moremotion/face/_resources/<language-code>/Calendar.js"></script>
  </head>

Required CSS Files

This element requires the a CSS file from moremotion/face/DateNum/CalendarCss/ directory is linked to the page in the HEAD section of the HTML document as follows.

  <head> 
    ...
    <link rel="stylesheet" type="text/css" 
          href="moremotion/face/DateNum/CalendarCss/calendar-blue.css"></link>
  </head>