|
The following "8 steps" instruction will guide you step by step through the CodeThatCalendar configuration process. |
 |
 |
|
|
For free version (STD) download use this link. If you'd like to buy full version (PRO) use this link. Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type. Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.
|
|
|
|
|
Your file may look as following: <HTML> <HEAD> <link href="common.css" rel="stylesheet" type="text/css"> <script language="javascript1.2" src="codethatcalendarpro.js"></script> </HEAD> <BODY> <p> HELLO WORD! </BODY> </HTML> |
|
|
|
|
For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant. To describe new calendar create an object with following structure:
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
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)
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"]
};
|
|
|
|
|
var caldef1 = {
firstday:0,
width:250,
windoww:300,
windowh:170,
border_width:0,
border_color:'#0000d3',
dn_css:'clsDayName',
cd_css:'clsCurrentDay',
tw_css:'clsCurrentWeek',
wd_css:'clsWorkDay',
we_css:'clsWeekEnd',
wdom_css:'clsWorkDayOtherMonth',
weom_css:'clsWeekEndOtherMonth',
headerstyle:
{
type:'buttons',
css:'clsDayName',
imgnextm:'img/next.gif',
imgprevm:'img/prev.gif',
imgnexty:'img/next_year.gif',
imgprevy:'img/prev_year.gif'
},
monthnames :["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"],
daynames : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
};
Hint - if parameters description isn't clearly understanding please have a look to CodeThatCalendar User Manual |
|
|
|
|
dtype:'MM/dd/yyyy HH:mm:ss', showtime:true |
|
|
|
|
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<script language="javascript" src="codethatcalendarpro.js"></script>
<script language="javascript">
var caldef3 =
{
firstday:0,
dtype:'MM/dd/yyyy HH:mm:ss',
width:250,
windoww:300,
windowh:200,
border_width:0,
border_color:'#0000d3',
dn_css:'clsDayName',
cd_css:'clsCurrentDay',
tw_css:'clsCurrentWeek',
wd_css:'clsWorkDay',
we_css:'clsWeekEnd',
wdom_css:'clsWorkDayOtherMonth',
weom_css:'clsWeekEndOtherMonth',
headerstyle: {
type:"buttons",
imgnextm:'img/forward.jpg',
imgprevm:'img/back.jpg',
css:'clsDayName'
},
showtime:true,
monthnames :["January", "February", "March", "April", "May",
"June", "July", "August", "September", "October",
"November", "December"],
daynames : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
};
var c3 = new CodeThatCalendar(caldef3);
</script>
<body>
<P>Month scroller + time</P>
<form>
<input name="id3" type="textarea"/>
<input type="button" onClick="c3.popup('id3');" value="..."/>
</form>
</body>
</html>
|
|
|
|
|
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<script language="javascript" src="codethatcalendarpro.js"></script>
<script language="javascript" src="my_calendar.js"></script>
<script language="javascript">
var c3 = new CodeThatCalendar(caldef3);
</script>
<body>
<P>Month scroller + time</P>
<form>
<input name="id3" type="textarea"/>
<input type="button" onClick="c3.popup('id3');" value="..."/>
</form>
</body>
</html>
Hint - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :) |
|
|
|
|
To make your life easier we do plan to supply you with on and off line calendar builders in the nearest time. See an example and complete code here - Date and Time Example
|
|
|
|
Download package with CodeThatCalendar script and unarchive it.
Read 
Create the basic HTML file.
Now lets create your first CodeThatCalendar.
Now we describe all calendar's properties:
If you'd like to add time control, use code like the following:
So... a complete code for this example you can see here:
If you prefer to keep the calendar at the separate file you should paste menu definition to *.js
file. Your *.html file will look like the:
Congratulations! You have just created your first CodeThatCalendar enhanced web page.