CalendarBox

 Top  Previous  Next

CalendarBox Element consists of a DateBox element and DHTML calendar that helps the user to pick a date visually. The calendar and the DateBox are compliant; The calendar receives some of its properties from the DateBox such as initial value, from and to dates.

With this element, actually, the DateBox element becomes more powerful and flexible. The user can either type in a date into the input field of the DateBox or can open the Calendar dialog and pick up a date; The selected date is immediately formatted into the DateBox according to the defined pattern.

CalendarBoxmmel

 

CalendarBoxProps

 
With the initial setting, the opening of the Calendar dialog is triggered from the "OnFocus" event of the DateBox input element and "OnClick" event of the Opener Action element. You may change these settings if you want. You may also use an Image instead of a button for the Opener. To do this; Select the "Image" option for the "Element Type" property of the Opener Action Element and assign an Image to its "Image Source" property.

 

Properties

Show At

Defines where to open the Calendar Dialog.

1.Under the DateBox: The Calendar opens right under the input field.
2.Under Opener:  The Calendar opens right under the Opener Action element.
3.X:Y The Calendar opens at the specified coordinates on the page.Example: 200:100

 
First Day of Week

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

Show Time

If the true is specified instead of the default value false, the time is shown on the calendar. If this property is set to true, then "Display Format" and "Submit Format" properties of the DateBox should be suitable to display and to submit the time information.

Example:

DateBox "Display Format": yyyy.mm.dd hh:nn
DateBox "Submit Format" : yyyy-mm-dd hh:nn

Time 24

Defining this property is meaningful only if "Show the Time" property is set to true. Value true means the time is shown in 24 Hour format, false means am /pm format.

Week Numbers

If this property is set to true then Week numbers column is shown on left hand side of the calendar dialog under the "Wk" header.

Show Other Months

If set to true then days belonging to months overlapping with the currently displayed month will also be displayed in the calendar (but in a faded-out color)

Single Click

The default value true means when a day is clicked on the calendar, the selected date is transferred to the DateBox and the dialog is closed right a way. If it is set to false the in order to select a date and close the dialog the same day must be clicked twice.

StatusBar Date Format

StatusBar is the panel at the bottom of the dialog and it displays hints and formatted date information as the cursor moves over the dialog. This property can be used to format the date that is displayed on the status bar.

CalendarBox

 

Special Characters:

%a

abbreviated weekday name

%A

full weekday name

%b

abbreviated month name

%B

full month name

%C

century number

%d

the day of the month ( 00 .. 31 )

%e

the day of the month ( 0 .. 31 )

%H 

hour ( 00 .. 23 )

%I

hour ( 01 .. 12 )

%j 

day of the year ( 000 .. 366 )

%k

hour ( 0 .. 23 )

%l

hour ( 1 .. 12 )

%m

month ( 01 .. 12 )

%M

minute ( 00 .. 59 )

%n

a newline character

%p

"PM" or "AM"

%P

"pm" or "a"

%S

second ( 00 .. 59 )

%s

number of seconds since Epoch (since Jan 01 1970 00:00:00 UTC)

%t

a tab character

%U, 
%W, 
%V

the week number

%u 

the day of the week ( 1 .. 7, 1 = MON )

%w

the day of the week ( 0 .. 6, 0 = SUN )

%y 

year without the century ( 00 .. 99 )

%Y

year including the century ( ex. 1979 )

%%

a literal % character

 

Event Handlers

On Date Select

On Date Select Handler is called when a date is selected on the calendar and Calendar object is passed to it as the only parameter. If the function returns false then the date selection is canceled.

Example:

Event Handlers | On Date Select : checkDate

function checkDate(calendar) {
  return (calendar.date.getDay() == 6 || calendar.date.getDay() == 0) ? false : true;
}

Date Status

Date Status Handler is called for each day of the month that appears of the current view and a Date object is passed to it as the parameter. The handler can  determine the status of the given date by returning true, false or a CSS style name.

Example:

Event Handlers | Date Status : setDateStatus

function setDateStatus(date) {
  if (isHoliday(date)) {
    return "holiday";
  }
  return (date.getDay() == 6 || date.getDay() == 0) ? true : false;
}