Calendar Widget for HTML

calendar

The calendar is the most comprehensive of the widgets offered in this library, but its very simple to include in a web page.

HTML

The calendar's HTML must be constructed using a container HTML element and a child input element. E.g.

<div style="float:right;">
  <input type="text" name="date" size="10"/>
</div>
<!-- widget calendar action:calendarAction; change:calendarChange; today dmy -->
	    

The qualifiers of the calendar widget are:

• today (use today's date as the displayed date)
• dmy (display the date in DD/MM/YYYY format)
• ymd (display the date in YYYY/MM/DD format)
• mdy (display the date in MM/DD/YYYY format)

Javascript

The "action:calendarAction" in the above example causes a javascript function to be called when a date is selected. The "action" property specifies the name of the function, in this case: "calendarAction"

There is another javascript function that is set up in the above example: "change:calendarChange", which causes the calendarChange function to be called when there is a change in the calendar (but the calendar value has not yet been actioned.) If set up, this function will get called for every little change made to the calendar.

function calendarAction(target)
{
    var elem = document.getElementById("calendar-status");
    elem.widget_set_text("calendar action "+target.widget_get_date_string());
    elem.widget_highlight(true);
    setTimeout("document.getElementById('calendar-status').widget_highlight(false);", 1000);
}
function calendarChange(target)
{
    var elem = document.getElementById("calendar-status");
    elem.widget_set_text("calendar action "+target.widget_get_date_string());
    elem.widget_highlight(true);
    setTimeout("document.getElementById('calendar-status').widget_highlight(false);", 1000);
}
	    

These two functions display the status in the value element with the id of "calendar-status". This value element is highlighted, and then after a 1 second delay, its highlight is cleared.

There are a number of other methods that have been added to the calendar HTML element:

widget_previous_month()

This method takes no parameters. It simply moves the date back to the previous month.

widget_next_month()

This method takes no parameters. It simply moves the date forwards to the next month.

widget_set_day(day)

This method takes one parameter:

• day: the day of the month (starting from 1)

widget_set_date(new_date)

This method takes one parameter:

• new_date: a Date object representing the date to set the calendar to.

widget_get_date_string(strict)

This method takes one parameter:

• strict: if true, then use strict formatting (exactly two characters for the day and month.)

CSS

The calendar widget will automatically be set up with a default CSS class if you don't specify one. If you specify a class, then you actually need to make a number of classes in your CSS file.

The calendar widget's class will be "widget_calendar" unless you specify it to be a class of your own. Then when its moused over or clicked, its class will be changed to "widget_calendar_selected". There are a large number of classes specified for all the sub-widgets of the calendar. Rather than describe them all here, we'll leave it to you to look ate the widget.css file, because its actually quite self explanatory.

More...

Documentation     Other widgets

Zwartberg Reseach & Development is a registered trading name of Open Source Software Consulting CC.
Phone:+27235411462, fax:+27235411379, mobile:+27796977082,
brian@zwartberg.com, P.O. Box 2, Prince Albert, 6930, South Africa.