Adding a calendar 1

neillovell · Oct 30, 2002

Hi,
in MS Access I used an activeX control I think to create a calendar on a form (you clicked a combo-box down arrow and it appeared). Now that I've saved the form as a data access page it does not work - nothing appears.

Does anyone have a bit of code to create a calendar? It's just so users can see what date monday is etc.

xutopia · Oct 30, 2002

goto xutopia.com and see the calendar example there. See if that works for you. Gary

http://www.xutopia.com

Haran

neillovell · Oct 30, 2002

cheers!

neillovell · Nov 14, 2002

That calendar works great, EXCEPT I cannot use it on a page with a lot going on. What I mean is by itself, or with a basic timer function is fine. But if I try to put it on my main page with fields to fill in etc. I get unknown errors.

Also, it won't work in Netscape but it will in IE (because of a weird syntax thing - /rect// not sure what that's about.

Any other examples?

xutopia · Nov 14, 2002

well maybe you could show us the page with the problem and I could tell you how to fix it. I used this calendar in an e-billing application with loads of javascript (about 100k) and had no problem. some of the forms on some pages had up to 300 elements.

If you can show us the page with the problem surely we can figure it out for you. Gary

http://www.xutopia.com

Haran

neillovell · Nov 14, 2002

ok I'll post my page in a second. Thanks!

neillovell · Nov 14, 2002

Ok here is the code. The calendar form call is at the bottom, the calendar set of functions are all together between two //*** markers

The culprit code (where the unknown run time error comes from) is this chunk

//*** This chunk is the culprit
var _divs = new Array();
var _calDivId;
var _calField;
var _calFieldMs;
function getCalendarFor(field, id, fieldMs)
{
_calField = field;
_calFieldMs = fieldMs;
_calDivId = id;
var div = Div(_calDivId);
div.innerHTML = new Date().getHtml();
div.setAsBlock();
}

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE HTML
PUBLIC "-//W3C//DTD/ XHTML 1.0
Transitional//EN"
"

http://www.w3.org/TR/xhtml1/DTD/

xhtml1-transitional.dtd">
<html xmlns="

http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">



<HEAD><TITLE>Timesheet</TITLE>

<!-- Link in the stylesheet in the local directory. An alternative would be to use the @import

url("

http://website.com/directory/cssdoc.css")

if the style sheet was on a web server somewhere.

-->
<link rel="stylesheet"
type="text/css"
href="TimesheetStyleSheet.css" />

<SCRIPT LANGUAGE=Javascript>

//*** The Calendar set of functions

function show(id){ Div(id).show() }
function hide(id){ Div(id).hide() }
function displayAsBlock(id){ Div(id).setAsBlock() }
function displayAsNone(id){ Div(id).setAsNone() }

var _dom = (document.getElementById);
var _def = (document.defaultView);
var _ie = ((document.all && !_dom));
var _moz = (window.sidebar)
var language = (navigator.language ? navigator.language :

navigator.userLanguage).substring(0,2);
var undefined;

var monthNames,dayNames,shortDayNames;
switch (language)
{
case "fr" :
monthNames =

["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembr

e","Decembre"];
dayNames = ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
shortDayNames = ["Dim","Lun","Mar","Mer","Jeu","Ven","Sam"];
break;
default :
monthNames =

["January","February","March","April","May","June","July","August","September","October","Novemb

er","December"];
dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
shortDayNames = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
}

Date.prototype.getMonthName = function(){ return monthNames[this.getMonth()] }
Date.prototype.getDayName = function(){ return dayNames[this.getDay()] }

Date.prototype.getHumanTime = function()
{
var minutes = this.getMinutes();
return this.getHours() + ":" + (minutes > 9 ? minutes : "0" + minutes);
}

Date.prototype.getDaysInMonth = function()
{
return [31,(this.isLeap() ? 29 : 28),31,30,31,30,31,31,30,31,30,31][this.getMonth()];
}

Date.prototype.isLeap = function()
{
var year = this.getFullYear();
return ( (year % 4) && (year % 100) || !(year % 400) );
}

Date.prototype.getMonthStartDay = function()
{
var date = this;
date.setDate(1);
return date.getDay();
}

Date.prototype.getYearStartDay = function()
{
var date = this;
date.setDate(1);
date.setMonth(0);
return date.getMonthStartDay();
}

Date.prototype.getWorkingWeek = function()
{
var yearReference = new Date(this.getFullYear(), 0, 0);
var yearInMills = yearReference.getTime() + (yearReference.getYearStartDay() * 24 * 60 * 60);
return (Math.ceil(Math.abs(yearInMills - this.getTime()) / ((1000 * 60 * 60 * 24 * 7) -

yearReference.getYearStartDay())));
}

Date.prototype.getDaysInBetween = function(date)
{
return Math.abs(this.getTime() - date.getTime());
}

Date.prototype.getHtml = function(element)
{
var startDay = this.getMonthStartDay();
var month = this.getMonth();
var year = this.getFullYear();
var daysTotal = this.getDaysInMonth();
var cols = 7;

var output = "<table cellpadding=3 cellspacing=0 border=0 class=calTable bgcolor=white>"
+ "<tr>";

var mouseStr = " align=center valign=center class=selOff"
+ " onmouseover=\"this.className='selOver'\""
+ " onmouseout=\"this.className='selOff'\"";

// month and year select boxes.
output += "<td colspan=" + cols + " class=calSelect>"
+ "<table width=100%>\n"
+ "<tr>\n"
+ "<td" + mouseStr + " onclick=\"if(typeof onCalendarChange == 'function'){"
+ "onCalendarChange(new Date(" + (year - 1) + "," + month + &quot

)}else"
+ "{defaultCalendarChange(new Date(" + (year - 1) + "," + month +

&quot

)}\">\n<<</td>\n"
+ "<td" + mouseStr + " onclick=\"if(typeof onCalendarChange == 'function'){"
+ "onCalendarChange(new Date(" + year + "," + (month - 1) + &quot

)}else"
+ "{defaultCalendarChange(new Date(" + year + "," + (month - 1) +

&quot

)}\">\n<</td>\n"
+ "<td align=center>" + this.getMonthName() + " " + year + "</td>"
+ "<td" + mouseStr + " onclick=\"if(typeof onCalendarChange == 'function'){"
+ "onCalendarChange(new Date(" + year + "," + (month + 1) + &quot

)}else"
+ "{defaultCalendarChange(new Date(" + year + "," + (month + 1) +

&quot

)}\">\n></td>\n"
+ "<td" + mouseStr + " onclick=\"if(typeof onCalendarChange == 'function'){"
+ "onCalendarChange(new Date(" + (year + 1) + "," + month + &quot

)}else"
+ "{defaultCalendarChange(new Date(" + (year + 1) + "," + month +

&quot

)}\">\n>></td>\n"
+ "</tr>\n"
+ "</table>\n"
+ "</td>\n</tr>\n"

output += "<tr>\n"

//
//
//
//
//
// days of the week
for (var i = 0; i < 7; i++)
{
output += " <td class=calDays>" + shortDayNames + "</td>\n"
}
output += " </tr>\n"

// writes the table with the day numbers
// but first we have to find how big our table will be.
var bLen = (daysTotal + startDay);
var len = (bLen % 7) ? ( bLen + Math.abs((bLen % 7) - 7) ) : bLen ;

var today = new Date();
var coloredDay = (today.getFullYear() == year && today.getMonth() == month)? today.getDate() :

-100 ;

for (var i = (-7 + startDay); i < len; i++)
{
if (i < 0)
{
continue;
}

var cellDate = (i - startDay + 1);

if (i == 0)
{
output += " <tr>\n";
}
else if (i % 7 == 0)
{
output += " </tr>\n"
+" <tr>\n";
}

if ( (i >= startDay) && (cellDate <= daysTotal) && cellDate)
{
var dateStr = "new Date(" + this.getFullYear() + "," + this.getMonth() + "," + cellDate

+&quot";
output += " <td class=calTdOff"
+ " onclick=\"if(typeof onCalendarClick=='function')"
+ "{onCalendarClick(" + dateStr + &quot}"
+ "else{defaultCalendarClick(" + dateStr + &quot}\""
+ " onmouseover='this.className=\"calTdOn\"'"
+ " onmouseout='this.className=\"calTdOff\"' > " + cellDate + " </td>\n";
}
else
{
// puts the empty cells at the beginning and end of the month
output += " <td class=calTdOff> </td>\n";
}

if (i == len)
{
output += " </tr>\n"
}
}
output += " </table>\n</form>\n"
return output;
}

Date.prototype.write = function()
{
document.write(this.getHtml())
}

Date.prototype.getHumanForm = function()
{
return this.getDate() + "/" + (this.getMonth()+1) + "/" + this.getFullYear()
}

//*** This chunk is the culprit
var _divs = new Array();
var _calDivId;
var _calField;
var _calFieldMs;
function getCalendarFor(field, id, fieldMs)
{
_calField = field;
_calFieldMs = fieldMs;
_calDivId = id;
var div = Div(_calDivId);
div.innerHTML = new Date().getHtml();
div.setAsBlock();
}

function reporter()
{
var p = [];

for (var prop in this)
{
if (typeof this[prop] != "function&quot
{
p.push(prop + "\t" + this[prop] + "\n"
}
}

return p;
}

function Div(id)
{
var obj = _dom ? document.getElementById(id) : document.all[id] ;

if

(!obj)
{
return false;
}

obj._id = _divs.length;

obj.time = 10; // how long

between moves
obj.distance = 2; // how far we move in one time unit

// visibility

obj.show = function(){obj.style.visibility = "visible"}
obj.hide =

function(){obj.style.visibility = "hidden"}
obj.isVisible = function(){return

(obj.style.visibility != "hidden&quot}
obj.setZIndex = function(z){obj.style.zIndex = z}

obj.getZIndex = function(){return obj.style.zIndex}

// display
obj.setAsNone =

function(){obj.style.display = "none"}
obj.setAsBlock = function(){obj.style.display =

"block"}
obj.swapDisplay = function(){var flag = (obj.style.display != "none"

obj.style.display = flag ? "none" : "block"; return (!flag);}

// size
obj.setHeight =
function(h){obj.style.height = h}
obj.setWidth = function(w){obj.style.width = w}

obj.getHeight = function(){return parseInt(obj.style.height)}
obj.getWidth = function(){return

parseInt(obj.style.width) }
obj.resizeTo = function(h, w){obj.setHeight(h ||

obj.getHeight());obj.setWidth(w || obj.getWidth())}

// position
obj.setLeft =

function(x){obj.style.left = x;return x}
obj.setTop = function{obj.style.top = y;return y}

obj.getLeft = function(){return parseInt(obj.style.left)}
obj.getTop = function(){return

parseInt(obj.style.top)}
obj.getPosition = function(){return [obj.getLeft(), obj.getTop()]}

obj.moveTo = function(x, y){return [obj.setLeft(x), obj.setTop]}
obj.moveBy = function(x,

y)
{
return obj.moveTo( (x ? obj.getLeft() + x : obj.getLeft()),(y ? obj.getTop() + y :

obj.getTop()) )
}

obj.slideTo = function(left, top, lod, nextAction)
{
if

(!obj.sliding)
{
obj.slideFromPath(twoPointPath([obj.getLeft(), obj.getTop()], [left,

top], lod), nextAction)
}
}

obj.slideFromPath = function(path, nextAction)
{

obj.nextAction = nextAction;
obj.path = path.reverse();
obj._startSlideFromPath();
}

obj._startSlideFromPath = function()
{
if (!obj.sliding)
{
obj.sliding = true;

obj._slide();
}
}

obj._startSlide = function()
{
if (obj.sliding) return

obj.sliding = true;
repsTotal = Math.sqrt(Math.pow(obj.leftTravelDistance, 2) +

Math.pow(obj.topTravelDistance, 2)) / obj.distance
mX = obj.leftTravelDistance /

repsTotal;
mY = obj.topTravelDistance / repsTotal;

obj.path = [[obj.getLeft(),

obj.getTop()]];

for (var i = 0; i < repsTotal; i++)
{
var last =

obj.path.last();
obj.path.push([last[0] + mX, last[1] + mY])
}

obj.path.reverse();
obj._slide()
}

obj._slide = function()
{
if (obj.sliding)

{
if (obj.path.length)
{
var point = obj.path.pop();

obj.moveTo(point[0], point[1]);
setTimeout("_divs[" + obj._id + "]._slide()", obj.time)

return false;
}
else
{
obj.repsDone = 0;
obj.repsTotal

= 0;
obj.leftTravelDistance = 0;
obj.topTravelDistance = 0;
obj.sliding

= false;
eval(obj.nextAction)
obj.nextAction = ""
return true;
}

}
}

// clipping
obj.clip = function(trbl)
{
obj.style.clip = "rect(" + trbl +

&quot";
}

obj.getClip = function()
{

/rect\((\d{1,3})\D+(\d{1,3})\D+(\d{1,3})\D+(\d{1,3})\D+/i.test(obj.style.clip);
return

[RegExp.$1, RegExp.$2, RegExp.$3, RegExp.$4]
}

// special
obj.getOpacity = function()

{
/opacity=(\d{1,3})/i.test(obj.style.filter);
return (_ie) ? RegExp.$1 :

parseInt(obj.style.MozOpacity) ;
}

obj.setOpacity = function(o)
{
if (_moz)
{

obj.style.MozOpacity = o + "%";
}
else if (obj.style.filter)
{

obj.style.filter = 'alpha(opacity=' + o +')'
}
}

obj.report = reporter;

_divs.push(obj)
return obj;
}

function fastBezierPoint(perc, start, flex1, flex2, end)
{

var oneMinusPerc = 1 - perc;
var bp1 = Math.pow(perc,3);
var bp2 = 3*Math.pow(perc,

2)*oneMinusPerc;
var bp3 = 3*perc*Math.pow(oneMinusPerc, 2);
var bp4 =

Math.pow(oneMinusPerc, 3);

return [ start[0]*bp1 + flex1[0]*bp2 + flex2[0]*bp3 + end[0]*bp4,

start[1]*bp1 + flex1[1]*bp2 + flex2[1]*bp3 + end[1]*bp4 ]
}

function

bezierPath(start, flex1, flex2, end, lod)
{
var iterations = lod ? lod : 100;
var iteration

= iterations;
var path = [];
while (iteration--)
{
path.push(fastBezierPoint(1 /

(iterations / iteration), start, flex1, flex2, end));
}
return path;
}

function

twoPointPath(start, end, lod)
{
var iterations = lod ? lod : 100;

var xMoveBy = (start[0]

- end[0]) / iterations;
var yMoveBy = (start[1] - end[1]) / iterations;

var path =

[[start[0], start[1]]];
var last;

while (iterations--)
{
last = path.last();

path.push([last[0] - xMoveBy, last[1] - yMoveBy])
}
return path;
}

function defaultCalendarClick(date)
{
if (_calField)
{
_calField.value = date.getHumanForm();
Div(_calDivId).setAsNone();
}
}

function defaultCalendarChange(date)
{
if(_calDivId)
{

Div(_calDivId).innerHTML = date.getHtml();
}
}

//*** end set of Calendar functions



</SCRIPT>


<script language=VBSCRIPT>
sub RedoWeek(inDate)
if isDate(inDate.value) then
document.SubmitButtonForm.WeekField.value = DatePart("ww", inDate.value)
else
inDate.value = date()
end if
end sub
</script>

</HEAD>

<BODY class="SilverBackground">

<%
accessdb="UnsecuredTimesheet"
cn="DRIVER={Microsoft Access Driver (*.mdb)};"
cn=cn & "DBQ=" & server.mappath(accessdb)
Set rs = Server.CreateObject("ADODB.Recordset&quot

userName = replace(request.serverVariables("AUTH_USER&quot,"company\","&quot
userName = replace(userName,"company\","&quot
userName = replace(userName,"INTRANET\","&quot

' The string, sql, that will be read as the SQL statement.
sql = "select top 15 * from ADMINRecordsTable where logonname = '"&username&"' ORDER BY TheDate

DESC"

' Uncomment when debugging to display the value of sql
'response.write sql

rs.Open sql, cn
%>


<%
accessdb="UnsecuredTimesheet"
cn="DRIVER={Microsoft Access Driver (*.mdb)};"
cn=cn & "DBQ=" & server.mappath(accessdb)
Set rsHours = Server.CreateObject("ADODB.Recordset&quot

TheCurrentWeek = DatePart("ww", Now())

sql = "select ADMINRecordsTable.Week, Sum(ADMINRecordsTable.Hours) AS [Weekly Hours],

Sum(ADMINRecordsTable.Hours)*24 AS [AsHours] from ADMINRecordsTable where

(ADMINRecordsTable.LogOnName = '"&username&"') And (ADMINRecordsTable.Week = "&TheCurrentWeek&&quot

GROUP BY ADMINRecordsTable.Week ORDER BY ADMINRecordsTable.Week"

' Uncomment when debugging to display the value of sql
'response.write sql

rsHours.Open sql, cn
%>



<div id="TitleHeadingImage"><img src="images/Colour_sml_6mm.jpg" alt="Company logo" />
<div id="TitleHeadingText">CompanyName <i class="LynxImpact">Project</i> Timesheet
<div id="TitleForName">For <%= username %></div></div></div>

<br /><br />
<div align="left">

<table BORDER="0" BGCOLOR="#FFFFFF" CELLSPACING="0" align="left" width="640">
<THEAD>



<p class="StandOutTahoma">Total Hours Worked For This Week (decimal): <%= rsHours("AsHours&quot

%></p>

<tr>

<th valign="top" align="left"><font class="TableDataFont"><br />Project Worked On</font></th>
<th valign="top" align="left"><font class="TableDataFont"><br />Date</font></th>

<th valign="top" align="left"><font class="TableDataFont"><br />Week</font></th>

<th valign="top" align="left"><font class="TableDataFont"><br />Hours Worked</font></th>

</tr>
</THEAD>

<TBODY>

<%
'On Error Resume Next
rs.MoveFirst
do while Not rs.eof
%>

<tr VALIGN="TOP">

<td ALIGN="left" valign="top">
<font face="Arial" size="2" color="#000000">
<%= rs("Project&quot %>
</font></td>

<td ALIGN="left" valign="top">
<font face="Arial" size="2" color="#000000">
<%= rs("TheDate&quot %>
</font></td>

<td ALIGN="left" valign="top">
<font face="Arial" size="2" color="#000000">
<%= rs("Week&quot %>
</font></td>

<td ALIGN="left" valign="top">
<font face="Arial" size="2" color="#000000">
<%= rs("Hours&quot %>
</font></td>

</tr>

<%
rs.MoveNext
loop%>

<tr VALIGN="TOP">
<td ALIGN="left" valign="top">
 </td>

<td ALIGN="left" valign="top">
 </td>

<td ALIGN="left" valign="top">
 </td>

</tr>

</TBODY>

<font face = "arial" size="1">
<form method="post" action="TypeInAndAddData.asp" name="SubmitButtonForm">
<input type="hidden" name="subject" value="<%= title %>">

<input type="hidden" name="u_fname" size="20" value=<% =username %> onFocus="this.blur()" >
Project Field

<%
accessdb="UnsecuredTimesheet"
cn="DRIVER={Microsoft Access Driver (*.mdb)};"
cn=cn & "DBQ=" & server.mappath(accessdb)
Set rsProject = Server.CreateObject("ADODB.Recordset&quot

sql = "select LinkingEmpAndProjTable.ProjID from LinkingEmpAndProjTable where

((LinkingEmpAndProjTable.EmpID) = '"&username&"')"

rsProject.open sql, cn
%>

<Select name = "ProjectField" >
<option selected>

<% While Not rsProject.EOF
%>

<option style="color:black" value="<%=rsProject("ProjId&quot%>">

<%=rsProject.Fields("ProjId&quot%>

<%
rsProject.MoveNext
Wend
%>

<%
rsProject.Close

Set rsProject = Nothing

%>

</select>

<a href="TypeInAndAddData.asp">Refresh List</a>

<br />Commands  
<input type="button" value = "  Add Projects   " Action="<a href=""

onClick="window.open('FavouriteProjects.asp','FavouriteProjects', 'height=150, width=420,

scrollbars=yes, resizable=yes '); return false;">

<input type="button" value = "Delete Projects" Action="<a href=""

onClick="window.open('DeleteFavouriteProjects.asp','DeleteFavouriteProjects', 'height=150,

width=420, scrollbars=yes, resizable=yes '); return false;">

<br /><br />

Date
<input type="text" name="DateField" size="11" value="<%response.write Date()%>"

onClick="RedoWeek(this)" >

Week
<input type="text" name="WeekField" size="3" value="<%response.write DatePart("ww", Now())%>">

Hours Worked
<input type="text" name="HoursWorkedField" size="8">

<input type="button" value = " Utilities " Action="<a href=""

onClick="window.open('Utilities.asp','Utilities', 'height=350, width=400, scrollbars=yes,

resizable=yes '); return false;">
<br />

<br />

<input type="submit" onMouseOver='mOver()'' onMouseOut='mOut()' name="SubmitButton"

value="  Submit Details  ">
</form></font>

<input type="button" name="DeleteRowsButton" value="Delete Rows" action="<a href=""

onClick="window.open('DeleteRows.asp','DeleteRows', 'height=600, width=750, scrollbars=yes,

resizable=yes '); return false;">

<%
rs.Close
Set rs = Server.CreateObject("ADODB.Recordset&quot

' Create new variables and initialise with data from the text boxes on the previous form.
LoginNameFieldText=request.form("u_fname&quot
ProjectFieldText=request.form("ProjectField&quot
DateFieldText=request.form("DateField&quot
WeekFieldText=request.form("WeekField&quot
HoursWorkedFieldText=request.form("HoursWorkedField&quot

' Put the SQL statement in to the variable sql. This string will be read and thus the command

given.

if len(ProjectFieldText) > 1 then

sql = "INSERT INTO ADMINRecordsTable (LogOnName, Project, TheDate, Week, Hours) "
sql = sql & "values ('" & LoginNameFieldText
sql = sql & "','" & ProjectFieldText
sql = sql & "','" & DateFieldText
sql = sql & "','" & WeekFieldText
sql = sql & "','" & HoursWorkedFieldText & "')"

' Uncomment when debugging to display the value of sql
'response.write sql

' Open in read and write mode
rs.Open sql, cn,3,3

else
response.write "Fields are blank"
end if
%>

<br /><br />
<FORM name=calendarForm>Click the text field to display the calendar for this
month.  <INPUT style="WIDTH: 67px; HEIGHT: 19px"
onfocus="getCalendarFor(this, 
'calendarDiv')" size=1
name=calendarField>
<DIV id=calendarDiv style="DISPLAY: none"></DIV></FORM>

<TFOOT>
</TFOOT>
</table>
</div>

</BODY>
</HTML>

neillovell · Nov 14, 2002

Right the error is generated from this line

div.innerHTML = new Date().getHtml();

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Adding a calendar 1

neillovell

Programmer

xutopia

Programmer

neillovell

Programmer

neillovell

Programmer

xutopia

Programmer

neillovell

Programmer

neillovell

Programmer

neillovell

Programmer

Similar threads

Part and Inventory Search

Sponsor