		Home\|Contacts\|

Article Base

Author Options

New account

Read articles

Manage Articles

Submit Category

Client Products

Calendar

Time Selector

Text Link

Marks System

Menu Bar

Server Products

Sitemap Gen BETA

Photo Viewer

Poll Builder

Counter

Guest Book

Where am i?

LinkExchange

Sample

Here is a sample of what you can do with comCald:

Top

Download

DOWNLOAD comCald

1) We thank you to fill the data below previous to make the download

Country
Name
Email

Your data will never be transmited to any other person or external entity under no circunstances and will only serve statistic purposes!

2) Click the button below in order to proceed with the download.

3) We would like to remind you of some opportunities for contribution. I provided to you at no charge, and you have every right to redistribute the software. I depend on people willing to contribute their time and support to the project to ensure that my work remains free and available at no cost.

You can help. The basic options consist of Contributing Work or if you have no time Donating Funds.

We appreciate your support for the project.

Top

Installation Process

How to install.

Congratulations, you�ve just downloaded the comCald.zip file, which contains a sample set of files that will allow you to quickly set up your own Marks on your server and web pages.

This process will detail the steps needed to install and use comCald on your web server.

After downloading the comCald.zip file, the included files have to be extracted at the location specified by the user on the server and have to respect the following hierarchy.

The comCald.zip file contains the following files:

comCald.htm (sample html file that will display the comCald component, open this file to see the resulting sample),
comCald.js (set of javascript functions that will build the comCald component. This file has to be placed into the comCald folder),
calendar.htm (html file that contains the design for the popup montly calendar. This file has to be placed into the comCald folder),
Sample set of images (these images have to be placed in the images folder).

If for some reason the comCald.zip file is damaged or you don�t have winzip or equivalent installed on your computer, please copy the following contents to the respective folders as described above.

comCald.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Javascript Components Tester</title>
<script type="text/javascript" src="comCald/comCald.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>

<body>
<form name="form1" action="">
  <table width="30%"  border="0" cellpadding="1">
    <tr>
      <td class="style1">	
	  Type 0 Calendar
   	  </td>
    </tr>	  
	<tr>
      <td>
	  <script language="javascript">Build_calendar("box",0);</script>
  	  </td>
    </tr>	  
	<tr>
      <td class="style1">	
	  Type 1 Calendar
   	  </td>
    </tr>	  
	<tr>
      <td>	  
	  <script language="javascript">Build_calendar("box1",1);</script>
  	  </td>
    </tr>	  
	<tr>
  <td class="style1">	
	  Type 0 Calendar
   	  </td>
    </tr>	  
	<tr>
      <td>
	  <script language="javascript">Build_calendar("box2",0);</script>
	  </td>
    </tr>	  
	<tr>
      <td class="style1">	
	  Type 1 Calendar
   	  </td>
    </tr>	  
	<tr>
	  <td>	  
	  <script language="javascript">Build_calendar("box3",1);</script>
	  <script language="javascript">
	  document.getElementById("box").value = "12/11/2005";
	  Default_date("box1", "2005-10-30");
	  document.getElementById("box2").value = "01/05/2007";
	  Default_date("box3", "2007-09-10");

</script> 
	  </td>
    </tr>
  </table>
  
   
</form>
</body>
</html>

To copy the content, press CTRL+A then CTRL+C

comCaldD.js

// ************************************************
// This file has been written by David Domingues
// you are free to use it and change it as you need
// but i will ask you to keep this header on the file
// and never remove it.
// comCald downloaded at http://www.webrickco.com
// webrickco@gmail.com
// ************************************************
// JavaScript Document
//Defines all variables that are used for calendar formatting and are common to the whole 
//application
var param = new Array();
param['top_color'] = 'CC9966';
param['day_color'] = 'FFCC99';
param['selected_day_color'] = 'FFCC00';
param['date_format'] = 'DD/MM/YYYY';
param['month_format'] = "January-February-March-April-May-June-July-August-September-October-November-December";
param['day_format'] = "Sun-Mon-Tue-Wed-Thu-Fri-Sat";

function onMouseButtonIn(objecto) {
   objecto.style.cursor ="hand";
}
	
function onMouseButtonOut(objecto) {
   objecto.style.cursor ="none";	
}

//This function changes the dates when combos are changed
function change_date(nome1)
{
	var obj = document.getElementById("year"+nome1);
	document.getElementById(nome1).value = obj.options[obj.selectedIndex].text;

document.getElementById(nome1).value += "-";

var obj = document.getElementById("month"+nome1);
	var a = obj.selectedIndex + 1;
	if (a < 10)
		document.getElementById(nome1).value += "0" + a.toString();
	else	
		document.getElementById(nome1).value += a.toString();

document.getElementById(nome1).value += "-";
	
	var obj = document.getElementById("day"+nome1);
	var a = parseInt(obj.options[obj.selectedIndex].text,10);
	if (a < 10)
		document.getElementById(nome1).value += "0" + a.toString();
	else	
		document.getElementById(nome1).value += a.toString();

}

//This function puts the date by default to the control when type = 1 
function Default_date(nome1, date1)
{
	document.getElementById(nome1).value = date1;
	var arrayDate = document.getElementById(nome1).value.split("-");

var obj = document.getElementById("day"+nome1);
	obj.selectedIndex = parseInt(arrayDate[2],10)-1;

var obj = document.getElementById("month"+nome1);
	obj.selectedIndex = parseInt(arrayDate[1],10)-1;

var obj = document.getElementById("year"+nome1);	
	obj.selectedIndex = parseInt(arrayDate[0],10) - 1900;
}

function verify_Date_Format(nome1)
{
	if (param['date_format'].indexOf("/") > 0)
	{
		wseparador = '/';
	}
	if (param['date_format'].indexOf("-") > 0)
	{
		wseparador = '-';
	}
	wdateformat = param['date_format'].split(wseparador);

if (document.getElementById(nome1).value.indexOf(wseparador) > 0)
	{
		wdate = document.getElementById(nome1).value.split(wseparador);
	}
	else
	{
		alert("Invalid date separators!");
		document.getElementById(nome1).focus();
		return false;
	}
	
	for (i = 0; i < wdateformat.length;i++)
	{
		if (wdateformat[i].substr(0,1) == "Y")
		{
			if (wdate[i].length != 4)
			{
				alert("Invalid date format!");
				document.getElementById(nome1).focus();
				return false;
			}
		}
		if (wdateformat[i].substr(0,1) == "M" || wdateformat[i].substr(0,1) == "D")
		{
			if (wdate[i].length != 2)
			{
				alert("Invalid date format!");
				document.getElementById(nome1).focus();
				return false;
			}
		}
	}
}

function check_date(field, style){
var checkstr = "0123456789";
var DateField = field;
var Datevalue = "";
var DateTemp = "";
var seperator = ".";
var day;
var month;
var year;
var leap = 0;
var err = 0;
var i;
	
   err = 0;
   DateValue = DateField.value;

/* Delete all chars except 0..9 */
   for (i = 0; i < DateValue.length; i++) 
   {
     if (checkstr.indexOf(DateValue.substr(i,1)) >= 0) 
     {
        DateTemp = DateTemp + DateValue.substr(i,1);
     }
   }
	 
   DateValue = DateTemp;

/* Always change date to 8 digits - string*/
   /* if year is entered as 2-digit / always assume 20xx */

if (DateValue.length == 6) 
     DateValue = DateValue.substr(0,4) + '20' + DateValue.substr(4,2); 
   
   if (DateValue.length != 8) 
     err = 19;
   
   if (param['date_format'].substr(0,1) == "Y")
   {
   		day = DateValue.substr(6,2);
   		month = DateValue.substr(4,2);
   		year = DateValue.substr(0,4);
   }
   else		
   {	
   		day = DateValue.substr(0,2);
   		month = DateValue.substr(2,2);
   		year = DateValue.substr(4,4);
   }

if (style == 1)	
	 {
   		day = DateValue.substr(6,2);
   		month = DateValue.substr(4,2);
   		year = DateValue.substr(0,4);

}
   
   /* year is wrong if year = 0000 */
   if (year == 0) 
      err = 20;
   
   /* Validation of month*/
	 if ((month < 1) || (month > 12)) 
      err = 21;
   
   /* Validation of day*/
   if (day < 1) 
     err = 22;
  
   /* Validation leap-year / february / day */
   if ((year % 4 == 0) || (year % 100 == 0) || (year % 400 == 0)) 
      leap = 1;

if ((month == 2) && (leap == 1) && (day > 29)) 
      err = 23;

if ((month == 2) && (leap != 1) && (day > 28)) 
      err = 24;

/* Validation of other months */
   if ((day > 31) && ((month == "01") || (month == "03") || (month == "05") || (month == "07") || 
	(month == "08") || (month == "10") || (month == "12"))) 
   	  err = 25;

if ((day > 30) && ((month == "04") || (month == "06") || (month == "09") || (month == "11"))) 
      err = 26;

//alert(day+"#"+month+"#"+year+"##"+err);
   /* if 00 is entered, no error, deleting the entry */
   if ((day == 0) && (month == 0) && (year == 00)) 
   {
      err = 0; day = ""; month = ""; year = ""; seperator = "";
   }

/* if error */
   if (err != 0) 
   {
      alert("Date is incorrect!");
      if (style == 0)
      {
      	DateField.select();
      	DateField.focus();
      }
   }
}

To copy the content, press CTRL+A then CTRL+C

calendar.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Webrick Component Factory</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">  </style> <SCRIPT language="javascript"> function onMouseIn(objecto) { document.getElementById("last_color").value = objecto.style.background; objecto.style.background="66FFCC"; } function onMouseOut(objecto) { objecto.style.background=document.getElementById("last_color").value; } function onMouseButtonIn(objecto) { objecto.style.cursor ="hand"; } function onMouseButtonOut(objecto) { objecto.style.cursor ="none"; } function changeDate(nome1, wFn) { wYear = parseInt(document.getElementById("intYear").value,10); wMonth = parseInt(document.getElementById("intMonth").value,10); wtop_color = document.getElementById("top_color").value; wday_color = document.getElementById("day_color").value; wselected_day_color = document.getElementById("selected_day_color").value; wdate_format = document.getElementById("date_format").value; wmonth_format = document.getElementById("month_format").value; wday_format = document.getElementById("day_format").value; style = document.getElementById("style").value; if (wFn == "+") { wMonth += 1; if (wMonth > 11) { wMonth = 0; wYear += 1; } } if (wFn == "-") { wMonth -= 1; if (wMonth < 0) { wMonth = 11; wYear -= 1; } } document.getElementById("intYear").value = wYear; document.getElementById("intMonth").value = wMonth; var waction = "calendar.htm?strObject=" + nome1 + "&intYear=" + wYear + "&intMonth=" + wMonth + "&style=" + style + "&top_color=" + wtop_color + "&day_color=" + wday_color + "&selected_day_color=" + wselected_day_color + "&date_format=" + wdate_format + "&month_format=" + wmonth_format + "&day_format=" + wday_format; //document.write(waction); document.frmCald.action = waction; document.frmCald.submit(); } function cal_close(object,date) { //alert(date+ " " + document.frmCald.date_format.value); wseparador = ""; if (opener.document.getElementById("day"+object) == null) { wmodeldate = date.split("-"); if (document.getElementById("date_format").value.indexOf("/") > 0) { wseparador = '/'; } if (document.getElementById("date_format").value.indexOf("-") > 0) { wseparador = '-'; } wdateformat = document.getElementById("date_format").value.split(wseparador); wdate = ""; for (i = 0; i < wdateformat.length;i++) { if (wdateformat[i].substr(0,1) == "Y") { wdate += wmodeldate[0] + wseparador; } if (wdateformat[i].substr(0,1) == "M") { wdate += wmodeldate[1] + wseparador; } if (wdateformat[i].substr(0,1) == "D") { wdate += wmodeldate[2] + wseparador; } //alert(wdate); } //alert(wdate); wdate = wdate.substr(0,10); } else { wdate = date; } opener.document.getElementById(object).value = wdate; //alert(opener.document.forms[form].elements["day"+object]); if (opener.document.getElementById("day"+object) != null) { //alert("existe..."); var arrayDate = opener.document.getElementById(object).value.split("-"); var obj = opener.document.getElementById("day"+object); obj.selectedIndex = parseInt(arrayDate[2],10)-1; //alert("month..."+opener.document.forms[form].elements["month"+object].options[10].index); var obj = opener.document.getElementById("month"+object); obj.selectedIndex = parseInt(arrayDate[1],10)-1; //alert("year..."+opener.document.forms[form].elements["year"+object].options[10].text); var obj = opener.document.getElementById("year"+object); obj.selectedIndex = parseInt(arrayDate[0],10) - 1900; } window.close(); } function format_date(y,m,d) { var ex = y.toString(); ex += "-"; m = parseInt(m,10) + 1; if (m < 10) ex += "0" + m.toString(); else ex += m.toString(); ex += "-"; if (d < 10) ex += "0" + d.toString(); else ex += d.toString(); return ex; } function nothing() { return; } </SCRIPT> </head> <body> <SCRIPT language="javascript"> var aVariables = location.search.substring(1).split("&"); for (var iI=0;iI<aVariables.length;iI++) { aVariables[iI] = aVariables[iI].substring(0,aVariables[iI].indexOf("=")+1)+"'"+ aVariables[iI].substring(aVariables[iI].indexOf("=")+1)+"'"; eval(aVariables[iI]); } var months = month_format.split("-"); var days = day_format.split("-"); while (date_format.indexOf("%2F")>0) date_format = date_format.replace("%2F","/"); document.write("<form name=\"frmCald\" action=\"\">"); //document.write("<INPUT TYPE='HIDDEN' id='strForm' NAME='strForm' value ="+strForm+">"); document.write("<INPUT TYPE='HIDDEN' id='strObject' NAME='strObject' value ="+strObject+">"); document.write("<INPUT TYPE='HIDDEN' id='intYear' NAME='intYear' value ="+intYear+">"); document.write("<INPUT TYPE='HIDDEN' id='intMonth' NAME='intMonth' value ="+intMonth+">"); document.write("<INPUT TYPE='HIDDEN' id='style' NAME='style' value ="+style+">"); document.write("<INPUT TYPE='HIDDEN' id='top_color' NAME='top_color' value ="+top_color+">"); document.write("<INPUT TYPE='HIDDEN' id='day_color' NAME='day_color' value ="+day_color+">"); document.write("<INPUT TYPE='HIDDEN' id='selected_day_color' NAME='selected_day_color' value ="+selected_day_color+">"); document.write("<INPUT TYPE='HIDDEN' id='date_format' NAME='date_format' value ="+date_format+">"); document.write("<INPUT TYPE='HIDDEN' id='month_format' NAME='month_format' value ="+month_format+">"); document.write("<INPUT TYPE='HIDDEN' id='day_format' NAME='day_format' value ="+day_format+">"); document.write("<INPUT TYPE='HIDDEN' id='last_color' NAME='last_color' value =''>"); document.write("<table width=\"245px\" border=\"0\" cellpadding=\"0\" cellspacing=\"2\" border=\"0\">"); document.write("<tr>"); var strChangeDateMinus = "changeDate('"+ strObject + "', '-');"; var strChangeDatePlus = "changeDate('"+ strObject + "', '+');"; document.write("<td width=\"13px\" class=\"Calendar_top\" align=\"right\"><img src=\"images/left.gif\" width=\"13\" height=\"13\" onmouseover=\"onMouseButtonIn(this);\" onmouseout=\"onMouseButtonOut(this);\" onclick=\"JavaScript:"+strChangeDateMinus+"\"></td>"); document.write("<td width=\"219px\" class=\"Calendar_top\" bgcolor=\"#"+top_color+"\" align=\"center\">"+months[intMonth]+" " +intYear+"</td>"); document.write("<td width=\"13px\" class=\"Calendar_top\" align=\"left\"><img src=\"images/right.gif\" width=\"13\" height=\"13\" onmouseover=\"onMouseButtonIn(this);\" onmouseout=\"onMouseButtonOut(this);\" onclick=\"JavaScript:"+strChangeDatePlus+"\"></td>"); document.write("</tr>"); document.write("</table>"); document.write("<TABLE width=\"245px\" cellpadding=\"0\" cellspacing=\"2\">"); document.write("<TR>"); for (var i = 0; i < days.length; i++) { //week days color document.write("<td class=\"Calendar\" bgcolor=\"#cccccc\" width=\"35px\" height=\"20px\" align=\"center\">"); document.write(days[i]); document.write("</td>"); } document.write("</TR>"); var intDay = 1; var intDayWeek = 0; var blnContinue = false; //alert(opener.document.getElementById(strObject).value); if (date_format.substr(0,1) == "Y") { wday = opener.document.getElementById(strObject).value.substr(8,2); wmonth = opener.document.getElementById(strObject).value.substr(5,2); wyear = opener.document.getElementById(strObject).value.substr(0,4); } else { wday = opener.document.getElementById(strObject).value.substr(0,2); wmonth = opener.document.getElementById(strObject).value.substr(3,2); wyear = opener.document.getElementById(strObject).value.substr(6,4); } if (style == 1) { wday = opener.document.getElementById(strObject).value.substr(8,2); wmonth = opener.document.getElementById(strObject).value.substr(5,2); wyear = opener.document.getElementById(strObject).value.substr(0,4); } //document.write("<INPUT TYPE='text' id='t' NAME='t' value ="+wday+"#"+wmonth+"#"+wyear+">"); for (var j = 0; j < 6; j++) { document.write("<TR>"); for (var i = 0; i < days.length; i++) { // alert(strFunctionClose); strDate = new Date(intYear,intMonth,intDay); var strDateOut = format_date(intYear,intMonth,intDay); var strFunctionClose = "cal_close('"+ strObject +"', '" +strDateOut+"');"; intDayWeek = strDate.getDay(); var intColor; //var intMonth1 = parseInt(intMonth,10) + 1; if (parseInt(wday,10) == intDay && parseInt(wyear,10) == intYear && parseInt(wmonth,10) == (parseInt(intMonth,10) + 1)) intColor = "#"+selected_day_color; else intColor = "#"+day_color; if (blnContinue && intDay < 32 && strDate.getMonth() == intMonth) { document.write("<td class=\"Calendar_sel\" width=\"40px\" height=\"20px\" ALIGN=\"CENTER\" style=\"background: "+intColor+"\" onclick=\"JavaScript:" + strFunctionClose + "\" onmouseover=\"onMouseIn(this);\" onmouseout=\"onMouseOut(this);\">"); //document.write("<A style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium\"> </A>"); document.write("<A>"+intDay.toString()+"</A>"); intDay += 1; } else { if (!blnContinue && intDayWeek==i) { blnContinue = true; document.write('<td class=\"Calendar_sel\" width=\"40px\" height=\"20px\" ALIGN=\"CENTER\" style=\"background: '+intColor+'\" onclick=\"JavaScript:' + strFunctionClose + '\" onmouseover=\"onMouseIn(this);\" onmouseout=\"onMouseOut(this);\">'); //document.write("<A style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium\"> </A>"); document.write("<A>"+intDay.toString()+"</A>"); intDay += 1; } else { document.write("<td width=\"40px\" ALIGN=\"CENTER\"> "); } } document.write("</td>"); } document.write("</TR>"); } document.write("</TABLE>"); document.write("</FORM>"); </SCRIPT> </body> </html>
To copy the content, press CTRL+A then CTRL+C

Top

How it works

Your web file.

The only work your web file will have to do is to draw the component according to your requirements. You can do that as follow:

Include in the header of your web page, the comCald.js file (procedure file) as follow:

<Script type="text/javascript" src="comCald/comCald.js"></script>
Define a <FORM> tag in your webpage in which the comCald control will be held. Call the function that will create the comCald control on your webpage inside the FORM tags.

<Script type="text/javascript">Build_calendar("box",0);</script>
(0 for TextBox calendar)
or
<Script type="text/javascript">Build_calendar("box",1);</script>
(1 for ComboBox calendar; see the example above)

Where "box" represents the name of the calendar and 0/1 represents the type of the calendar.

Note that the function build_Timer has 2 parameters:
- Name of the object calendar.
- Type of calendar.

Defining default or dynamically changing values:

In the case of a type 0 calendar, you can change the value of the calendar current date simply by accessing the calendar by its id; for example: document.getElementById("box").value = "12/11/2005";
In the case of a type 1 calendar, you can change the value of the calendar using the function Default_date; for example: Default_date("box", "2005-10-30");

Improve the component

Well, this component is far from being perfect, and if you have the will to improve it, nothing can prevent you to open the comCald.js file and dive in the code.

Enjoy it�

Home|Contacts|Privacy Policy

Top

Recommend us

delicious

stumbleupon