|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
|
|
|
|
|
|
|
|
|
|
|
CODETHATCALENDAR USER MANUAL |
CodeThatCalendar Main Features
With CodeThatCalendar you can:
define first day of the week
define output date format
define calendar size
define calendar borders
customize calendar's elements style by using CSS
images in calendar buttons are supported
customize calendar's header style: 'buttons' or 'comboboxes'
show calendar at the separate frame
set opacity for the calendar (PRO version only)
set a path for all calendar template files and images (PRO version only)
navigate with keyboard (PRO version only)
select multiple dates (PRO version only)
CodeThatCalendar Properties Are Described Below:
var caldef1 =
{
firstday :, // First day of the week: 0 means Sunday, 1 means Monday, etc.
dtype : ' ', // Output date format MM-month, dd-date, yyyy-year, HH-hours,
// mm-minutes, ss-seconds
width :, // Width of the calendar table
windoww :, // Width of the calendar window
windowh :, // Height of the calendar window
border_width :, // Border of the table
border_color : ' ', // Color of the border
multi : boolean, // Enables multiple dates selecting
spr :, // Multiple dates separator
dn_css : ' ', // CSS for week day names
cd_css : ' ', // CSS for current day
tw_css : ' ', // CSS for current week
wd_css : ' ', // CSS for work days (this month)
we_css : ' ', // CSS for weekend days (this month)
wdom_css : ' ', // CSS for work days (other month)
weom_css : ' ', // CSS for weekend days (other month)
wdomcw_css : ' ', // CSS for work days (other month, current week)
weomcw_css : ' ', // CSS for weekend days (other month, current week)
wecd_css : ' ', // CSS for weekend days (current day)
wecw_css : ' ', // CSS for weekend days (current week)
highlight_css : ' ' // CSS for high light dates
preview_css : ' ' // CSS for preview_area
time_css : ' ' // CSS for time area
imgapply : ' ', // Image for apply button
headerstyle :
{
type : ' ', // Type of the header may be: 'buttons' or 'comboboxes'
css : ' ', // CSS for header
imgnextm : ' ', // Image for next month button
imgprevm : ' ', // Image for previous month button
imgnexty : ' ', // Image for next year button
imgprevy : ' ' // Image for previous year button
},
// Array with month names
monthnames : ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"],
// Array with week day names
daynames : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
// Array with comments
txt : ["Previous year", "Previous month", "Next month", "Next year", "Apply"],
preview : boolean //indicates is preview area shows
};
|
To Create and Run CodeThatCalendar Use Structure Like This:
<script language="javascript" src="codethatcalendar.js"></script>
<script language="javascript1.2">
<!--
var caldef1 =
{
firstday : 0,
dtype : 'MM/dd/yyyy',
width : 275,
windoww : 300,
windowh : 200,
border_width : 0,
border_color : 'White',
multi : true,
spr : '\r\n',
dn_css : 'clsDayName',
cd_css : 'clsCurrentDay',
tw_css : 'clsCurrentWeek',
wd_css : 'clsWorkDay',
we_css : 'clsWeekEnd',
wdom_css : 'clsWorkDayOtherMonth',
weom_css : 'clsWeekEndOtherMonth',
wdomcw_css : 'clsWorkDayOthMonthCurWeek',
weomcw_css : 'clsWeekEndOthMonthCurWeek',
wecd_css : 'clsWeekEndCurDay',
wecw_css : 'clsWeekEndCurWeek',
preview_css : 'clsPreview',
highlight_css : 'clsHighLight',
headerstyle :
{
type : 'buttons',
css : 'clsDayName',
imgnextm : 'img/forward.jpg',
imgprevm : 'img/back.jpg',
imgnexty : 'img/forward.jpg',
imgprevy : 'img/back.jpg'
},
imgapply : 'img/apply.gif',
preview : true,
monthnames : ['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December'],
daynames : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
txt : ['Previous year', 'Previous month', 'Next month', 'Next year', 'Apply']
};
var c1 = new CodeThatCalendar(caldef1);
//-->
</script>
<body>
<P>Month+year scrollers</P>
<form>
<input name="id1" type="textarea"/>
<input type="button" onClick="c1.popup('id1');" value="..."/>
</form>
</body>
|
CodeThatCalendar Examples
You can create calendar with scroll buttons for years and monthes.
See an example and complete code here - Month+Year scrollers example
You can create calendar with comboboxes for years and monthes.
See an example and complete code here - Month+Year comboboxes example
You can create combined calendar with date and time controls.
See an example and complete code here - Date and time example
CodeThatCalendar has Russian and German localization.
See an example and complete code here - Localization example
You can built CodeThatCalendar in your page like static object.
See an example and complete code here - Inline Calendar example
CodeThatCalendar at the Separate Frame
Firstly you should define calendar by ordinary (see examples and code above on this page). Then build calendar in the frame by using code like this:
<body>
<P>Month+year scrollers</P>
<form>
<input name="id1" type="textarea"/>
<input type="button" onClick="c1.innerpopup('id1','calendar_frame');" value="..."/>
</form>
<script language="javascript1.2">
<!--
// Create iframe
if (ua.oldOpera)document.write("<div id=\"calendar_div\">");
document.write("<iframe id=\"calendar_frame\" name=\"calendar_frame\"");
document.write(" frameborder=\"0\"");
document.write(" scrolling=\"no\"");
document.write(" style=\"visibility:hidden;\"");
if (ua.oldOpera)
document.write(" src=\"codethatcalendar.html\">");
document.write("</iframe>");
if (ua.oldOpera)document.write("</div>");
//-->
</script>
</body>
|
CodeThatCalendar in the Frame Example
See an example here - CodeThatCalendar in the frame example
Inline and Iframe calendars can be transparent. If you don't use parameter 'opacity' you'll get common opaque calendar. Also you can set a position for these calendar types.
To set opasity and position for iframe calendar you can use a structure like this:
document.write("style=\"filter:Alpha(Opacity=60);
position:absolute; left:30; top:400;\"");
|
To set opasity and position for inline calendar you can use a structure like this:
var caldef1 = {
opacity : 75,
position : {
"absolute" : true, "x" : 100, "y" : 0
}
...
|
To call inline calendar now you should use
inline_create(document, "id") |
instead of
create(document, "id") |
CodeThatCalendar Opacity And Position Example
See an example and complete code here - CodeThatCalendar opacity and position example
Generally you need the following files for CodeThatCalendar work:
codethatcalendarpro.js
codethatcalendar.html
.css file
image files
You place a link to codethatcalendarpro.js at
<script language="javascript" src="codethatcalendarpro.js"></script> |
Path to the image files you place at the calendar config.
But these files - codethatcalendar.html, .css-file - should be placed to the current calendar folder.
In case you have several sections at you web site (each of them uses CodeThatCalendar) which are placed at the different folders you should use constant to specify a one path for all calendar copies:
... template_path : 'calendar/', img_path : '../img/' |
template_path - for codethatcalendar.html, codethatcalendarpro.js, css-style file
img_path - for image files.
CodeThatCalendar Keyboard Navigation
CodeThatCalendar supports keyboard now.
Use arrow keys to choose day.
Hold Ctrl or Shift or Alt and use up or down arrow keys to switch between years
Hold Ctrl or Shift or Alt and use left or right arrow keys to switch between months
Press Space to go to the current date
Press Enter to choose date in calendar or Ctrl or Shift or Alt + Enter when you use multiple mode.
Example - Using keyboard
You can see an example and complete code here - Using keyboard Example [popup]
Note. This feature wouldn't work in Opera and in inline variant of CodeThatCalendar
You can choose several dates from calendar and keep them in one form field at one time.
For use this feature you should enable multiple mode and set separator for dates that will use in form field as in example you see below.
var calendarDef = {
...
multi : true, //enable multiple mode
spr : '\r\n', //set separator for dates in form field, by default carret return
...
};
|
Example - Multiple mode
You can see an example and complete code here - Multiple mode Example [popup]
Advanced Status Bar
Now when you put your mouse over any element of calendar you will see hint for it. Except that you can put user messages in status bar with help method setStatus(s) of calendar, s is message string.
var c1 = new CodeThatCalendar(caldef1);
c1.create(document, "id1");
c1.setStatus("Choose date from calendar!");
|
[ Home ] [ Forum ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Sales & Prices ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2008
Design by XTLabs, Inc.