|
Calendar (lack of) color problem
01-16-2010, 10:33 PM
|
Calendar (lack of) color problem
|
Posts: 8
|
The calendar shows, from left to right, Monday-Sunday.
For each day, the date turns green from monday-saturday (for example, try to set your computer day to 15 January). However, no green color is there when the day is a Sunday (the absolute right part of the calendar).
What is wrong? 
http://testingbar.atspace.com
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#evtcal {font-size:11px;}
#evtcal a:link {font: normal 11px "Arial", "Helvetica", "Sans Serif"; color: #000000; text-decoration: none;} /* unvisited link */
#evtcal a:visited {font: normal 11px "Arial", "Helvetica", "Sans Serif"; color: #000000; text-decoration: none;} /* visited link */
#evtcal a:hover {font: normal 11px "Arial", "Helvetica", "Sans Serif"; color: #000000; text-decoration: none;} /* mouse over link */
#evtcal a:active {font: normal 11px "Arial", "Helvetica", "Sans Serif"; color: #000000; text-decoration: none;} /* selected link */
#tooltip {
position:static;
z-index:101;
width:280px;
background-Color:#AAFFAA;
border:solid black 1px;
visibility:visible;
padding:5px;
font-family:arial;
font-size:14px;
text-align:justify;
}
table.mytable {
border:1px solid #000000;
border-right:0px;
text-align:center;
margin:0px;
}
table.mytable td {
border-bottom:1px solid #000000;
border-right:1px solid #000000;
text-align:center;
padding-top:0px;
padding-bottom:1px;
padding-left:3px;
padding-right:3px;
}
</style>
<script language="JavaScript" type="text/javascript" src="events.js"></script>
<script type="text/JavaScript" language="JavaScript">
/* Preload images script */
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image();
myimages[i].src=preloadimages.arguments[i];
}
}
/***************************************************************************************
JavaScript Calendar - Digital Christian Design
//Script featured on and available at JavaScript Kit: http://www.javascriptkit.com
// Functions
changedate(): Moves to next or previous month or year, or current month depending on the button clicked.
createCalendar(): Renders the calander into the page with links for each to fill the date form filds above.
***************************************************************************************/
var thisDate = 1; // Tracks current date being written in calendar
var wordMonth = new Array("JAN","FEB","MAR","APR","MAJ","JUN","JUL","AUG","SEP","OKT","NOV","DEC");
var today = new Date(); // Date object to store the current date
var todaysDay = today.getDay() + 0; // Stores the current day number 1-7
var todaysDate = today.getDate(); // Stores the current numeric date within the month
var todaysMonth = today.getUTCMonth() + 1; // Stores the current month 1-12
var todaysYear = today.getFullYear(); // Stores the current year
var monthNum = todaysMonth; // Tracks the current month being displayed
var yearNum = todaysYear; // Tracks the current year being displayed
var firstDate = new Date(String(monthNum)+"/1/"+String(yearNum)); // Object Storing the first day of the current month
var firstDay = firstDate.getUTCDay(); // Tracks the day number 1-7 of the first day of the current month
var lastDate = new Date(String(monthNum+0)+"/0/"+String(yearNum)); // Tracks the last date of the current month
var numbDays = 0;
var calendarString = "";
var eastermonth = 0;
var easterday = 0;
function changedate(buttonpressed) {
if (buttonpressed == "prevyr") yearNum--;
else if (buttonpressed == "nextyr") yearNum++;
else if (buttonpressed == "prevmo") monthNum--;
else if (buttonpressed == "nextmo") monthNum++;
else if (buttonpressed == "return") {
monthNum = todaysMonth;
yearNum = todaysYear;
}
if (monthNum == 0) {
monthNum = 12;
yearNum--;
}
else if (monthNum == 13) {
monthNum = 1;
yearNum++
}
lastDate = new Date(String(monthNum+1)+"/0/"+String(yearNum));
numbDays = lastDate.getDate();
firstDate = new Date(String(monthNum)+"/0/"+String(yearNum));
firstDay = firstDate.getDay() + 0;
createCalendar();
return;
}
function easter(year) {
// feed in the year it returns the month and day of Easter using two GLOBAL variables: eastermonth and easterday
var a = year % 19;
var b = Math.floor(year/100);
var c = year % 100;
var d = Math.floor(b/4);
var e = b % 4;
var f = Math.floor((b+8) / 25);
var g = Math.floor((b-f+1) / 3);
var h = (19*a + b - d - g + 15) % 30;
var i = Math.floor(c/4);
var j = c % 4;
var k = (32 + 2*e + 2*i - h - j) % 7;
var m = Math.floor((a + 11*h + 22*k) / 451);
var month = Math.floor((h + k - 7*m + 114) / 31);
var day = ((h + k - 1*m +114) % 31) + 1;
eastermonth = month;
easterday = day;
}
function createCalendar() {
calendarString = '';
var daycounter = 0;
calendarString += '<table class="mytable" width="255" height="250" cellpadding="0" cellspacing="0">';
calendarString += '<tr>';
calendarString += '<td bgcolor=\"#FFFFC8\" align=\"center\" valign=\"center\" width=\"60\" height=\"22\" colspan=\"2\" style="border-color:#000000;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:1px;border-style:solid;font-family:arial;font-size:11px;margin:3px;"><a style="cursor:pointer;" onClick=\"changedate(\'prevmo\')\" >FÖRRA<\/a><\/td>';
calendarString += '<td bgcolor=\"#AAFFAA\" align=\"center\" valign=\"center\" width=\"115\" height=\"22\" colspan=\"3\" style="border-color:#000000;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:1px;border-style:solid;font-family:arial;font-size:11px;margin:3px;"><b>' + wordMonth[monthNum-1] + ' ' + yearNum + '<\/b><\/td>';
calendarString += '<td bgcolor=\"#FFFFc8\" align=\"center\" valign=\"center\" width=\"60\" height=\"22\" colspan=\"2\" style="border-color:#000000;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:1px;border-style:solid;font-family:arial;font-size:11px;margin:3px;"><a style="cursor:pointer;" onClick=\"changedate(\'nextmo\')\">NÄSTA<\/td>';
calendarString += '<\/tr>';
calendarString += '<tr>';
calendarString += '<td bgcolor=\"#90cd90\" align=\"center\" valign=\"center\" width=\"30\" height=\"12\" style="border-color:#000000;border-top-width:1px;border-bottom-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;font-size:12px;"><strong>M</font></strong><\/td>';
calendarString += '<td bgcolor=\"#90cd90\" align=\"center\" valign=\"center\" width=\"30\" height=\"12\" style="border-color:#000000;border-top-width:1px;border-bottom-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;font-size:12px;"><strong>T</strong><\/td>';
calendarString += '<td bgcolor=\"#90cd90\" align=\"center\" valign=\"center\" width=\"35\" height=\"12\" style="border-color:#000000;border-top-width:1px;border-bottom-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;font-size:12px;"><strong>O</strong><\/td>';
calendarString += '<td bgcolor=\"#90cd90\" align=\"center\" valign=\"center\" width=\"35\" height=\"12\" style="border-color:#000000;border-top-width:1px;border-bottom-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;font-size:12px;"><strong>T</strong><\/td>';
calendarString += '<td bgcolor=\"#90cd90\" align=\"center\" valign=\"center\" width=\"35\" height=\"12\" style="border-color:#000000;border-top-width:1px;border-bottom-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;font-size:12px;"><strong>F</strong><\/td>';
calendarString += '<td bgcolor=\"#90cd90\" align=\"center\" valign=\"center\" width=\"30\" height=\"12\" style="border-color:#000000;border-top-width:1px;border-bottom-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;font-size:12px;"><strong>L</strong><\/td>';
calendarString += '<td bgcolor=\"#90cd90\" align=\"center\" valign=\"center\" width=\"30\" height=\"12\" style="border-color:#000000;border-top-width:1px;border-bottom-width:1px;border-left-width:0px;border-right-width:1px;border-style:solid;font-size:12px;"><strong>S</strong><\/td>';
calendarString += '<\/tr>';
thisDate == 0;
for (var i = 1; i <= 6; i++) {
calendarString += '<tr>';
for (var x = 1; x <= 7; x++) {
daycounter = (thisDate - firstDay)+0;
thisDate++;
if ((daycounter > numbDays) || (daycounter < 1)) {
calendarString += '<td align=\"center\" bgcolor=\"#cccddd\" height=\"22\" width=\"30\"> <\/td>';
} else {
if (checkevents(daycounter,monthNum,yearNum,i,x) || ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum))){
if ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum)) {
//add this if statement to check and see if it is an event today
if (checkevents(daycounter,monthNum,yearNum,i,x))
{
// if true make the bgcolor what ever color you like other than green or yellow
calendarString += '<td align=\"center\" bgcolor=\"#FFBBBB\" height=\"22\" width=\"30\" style=cursor:pointer; onclick=\"showevents(this,' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ');\" >' + daycounter + '<\/td>';
}
else
{
calendarString += '<td align=\"center\" bgcolor=\"#AAFFAA\" height=\"22\" width=\"30\" style=cursor:pointer; onclick=\"showevents(this,' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ');\" >' + daycounter + '<\/td>';
} }
else calendarString += '<td align=\"center\" bgcolor=\"#FFFFC8\" height=\"22\" width=\"30\" style=cursor:pointer; onclick=\"showevents(this,' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ');\" >' + daycounter + '<\/td>';
} else {
calendarString += '<td align=\"center\" bgcolor=\"#DDFFFF\" height=\"22\" width=\"30\">' + daycounter + '<\/td>';
}
}
}
calendarString += '<\/tr>';
}
calendarString += '<td bgcolor=\"#FFFFC8\" align=\"center\" valign=\"center\" height=\"22\" colspan=\"2\" style="border-color:#000000;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;font-family:arial;font-size:11px;"><a style="cursor:pointer;" onClick=\"changedate(\'return\')\" >TILLBAKA<\/a><\/td>';
calendarString += '<td bgcolor=\"#FFFFC8\" align=\"center\" valign=\"center\" height=\"22\" colspan=\"3\" style="border-color:#000000;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;font-family:arial;font-size:11px;"><a href=\"#\" onClick=\"changedate(\'return\')\"> <\/a><\/td>';
calendarString += '<td bgcolor=\"#FFFFC8\" align=\"center\" valign=\"center\" height=\"22\" colspan=\"2\" style="border-color:#000000;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:1px;border-style:solid;font-family:arial;font-size:11px;"><a href=\"http://www.contact.cybertools.se/guestbook.asp?id=32178">GÄSTBOK<\/a><\/td>';
var object=document.getElementById('calendar');
object.innerHTML= calendarString;
thisDate = 1;
}
function checkevents(day,month,year,week,dayofweek) {
var numevents = 0;
var floater = 0;
for (var i = 0; i < events.length; i++) {
if (events[i][0] == "W") {
if ((events[i][2] == dayofweek)) numevents++;
}
else if (events[i][0] == "Y") {
if ((events[i][2] == day) && (events[i][1] == month)) numevents++;
}
else if (events[i][0] == "F") {
if ((events[i][1] == 3) && (events[i][2] == 0) && (events[i][3] == 0) ) {
easter(year);
if (easterday == day && eastermonth == month) numevents++;
} else {
floater = floatingholiday(year,events[i][1],events[i][2],events[i][3]);
if ((month == 5) && (events[i][1] == 5) && (events[i][2] == 4) && (events[i][3] == 2)) {
if ((floater + 7 <= 31) && (day == floater + 7)) {
numevents++;
} else if ((floater + 7 > 31) && (day == floater)) numevents++;
} else if ((events[i][1] == month) && (floater == day)) numevents++;
}
}
else if ((events[i][2] == day) && (events[i][1] == month) && (events[i][3] == year)) {
numevents++;
}
}
if (numevents == 0) {
return false;
} else {
return true;
}
}
function showevents(obj,day,month,year,week,dayofweek) {
var theevent = "";
var bold = "";
var floater = 0;
for (var i = 0; i < events.length; i++) {
// First we'll process recurring events (if any):
if (events[i][0] != "") {
if (events[i][0] == "D") {
}
if (events[i][0] == "W") {
if ((events[i][2] == dayofweek)) {
bold += "Events of: <br>" + month +'/'+ day +'/'+ year + '<br>';
theevent += events[i][6] + '<br>';
theevent += 'Start Time: ' + events[i][4] + '<br>';
theevent += 'Ending Time: ' + events[i][5] + '<br>';
theevent += 'Description: ' + events[i][7] + '<br>';
theevent += '<br> -------------- <br><br>';
// document.forms.eventform.eventlist.value = theevent;
}
}
if (events[i][0] == "M") {
}
if (events[i][0] == "Y") {
if ((events[i][2] == day) && (events[i][1] == month)) {
bold += events[i][6] + '';
theevent += '' + events[i][4] + " (" + events[i][5] + ")" + '<br> <br>';
theevent += '' + events[i][7];
// document.forms.eventform.eventlist.value = theevent;
}
}
if (events[i][0] == "F") {
if ((events[i][1] == 3) && (events[i][2] == 0) && (events[i][3] == 0) ) {
if (easterday == day && eastermonth == month) {
bold += "Events of: <br>" + month +'/'+ day +'/'+ year + '<br>';
theevent += events[i][6] + '<br>';
theevent += 'Start Time: ' + events[i][4] + '<br>';
theevent += 'Ending Time: ' + events[i][5] + '<br>';
theevent += 'Description: ' + events[i][7] + '<br>';
theevent += '<br> -------------- <br><br>';
// document.forms.eventform.eventlist.value = theevent;
}
} else {
floater = floatingholiday(year,events[i][1],events[i][2],events[i][3]);
if ((month == 5) && (events[i][1] == 5) && (events[i][2] == 4) && (events[i][3] == 2)) {
if ((floater + 7 <= 31) && (day == floater + 7)) {
bold += "Events of: <br>" + month +'/'+ day +'/'+ year + '<br>';
theevent += events[i][6] + '<br>';
theevent += 'Start Time: ' + events[i][4] + '<br>';
theevent += 'Ending Time: ' + events[i][5] + '<br>';
theevent += 'Description: ' + events[i][7] + '<br>';
theevent += '<br> -------------- <br><br>';
} else if ((floater + 7 > 31) && (day == floater)) {
bold += "Events of: <br>" + month +'/'+ day +'/'+ year + '<br>';
theevent += events[i][6] + '<br>';
theevent += 'Start Time: ' + events[i][4] + '<br>';
theevent += 'Ending Time: ' + events[i][5] + '<br>';
theevent += 'Description: ' + events[i][7] + '<br>';
theevent += '<br> -------------- <br><br>';
}
} else if ((events[i][1] == month) && (floater == day)) {
bold += "Events of: <br>" + month +'/'+ day +'/'+ year + '<br>';
theevent += events[i][6] + '<br>';
theevent += 'Start Time: ' + events[i][4] + '<br>';
theevent += 'Ending Time: ' + events[i][5] + '<br>';
theevent += 'Description: ' + events[i][7] + '<br>';
theevent += '<br> -------------- <br><br>';
}
}
}
}
// Now we'll process any One Time events happening on the matching month, day, year:
else if ((events[i][2] == day) && (events[i][1] == month) && (events[i][3] == year)) {
bold += events[i][6] + '';
theevent += '<span style="font-family:arial;font-size:11px;"><b>Tid:</b> ' + events[i][4] + '<br>';
theevent += '<b>Plats:</b> ' + events[i][5] + '</span><br> <br>';
theevent += '' + events[i][7] + '<br>';
}
}
if (bold == "") bold = 'Ingen aktivitet idag.';
bold='<span style="font-Weight:bold;" >'+bold+'</span><br>';
var tt=document.getElementById('tooltip');
tt.innerHTML=bold+theevent;
tt.style.left=zxcPos(obj)[0]-(tt.offsetWidth-obj.offsetWidth)/2+'px';
tt.style.top=zxcPos(obj)[1]+obj.offsetHeight+'px';
tt.style.visibility=(tt.style.visibility=='visible' || tt.style.visibility == '')?'visible':'hidden';
}
function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
function floatingholiday(targetyr,targetmo,cardinaloccurrence,targetday) {
// Floating holidays/events of the events.js file uses:
// the Month field for the Month (here it becomes the targetmo field)
// the Day field as the Cardinal Occurrence (here it becomes the cardinaloccurrence field)
// 1=1st, 2=2nd, 3=3rd, 4=4th, 5=5th, 6=6th occurrence of the day listed next
// the Year field as the Day of the week the event/holiday falls on (here it becomes the targetday field)
// 1=Sunday, 2=Monday, 3=Tuesday, 4=Wednesday, 5=Thurday, 6=Friday, 7=Saturday
// example: "F", "1", "3", "2", = Floating holiday in January on the 3rd Monday of that month.
//
// In our code below:
// targetyr is the active year
// targetmo is the active month (1-12)
// cardinaloccurrence is the xth occurrence of the targetday (1-6)
// targetday is the day of the week the floating holiday is on
// 0=Sun; 1=Mon; 2=Tue; 3=Wed; 4=Thu; 5=Fri; 6=Sat
// Note: subtract 1 from the targetday field if the info comes from the events.js file
//
// Note:
// If Memorial Day falls on the 22nd, 23rd, or 24th, then we add 7 to the dayofmonth to the result.
//
// Example: targetyr = 2052; targetmo = 5; cardinaloccurrence = 4; targetday = 1
// This is the same as saying our floating holiday in the year 2052, is during May, on the 4th Monday
//
var firstdate = new Date(String(targetmo)+"/1/"+String(targetyr)); // Object Storing the first day of the current month.
var firstday = firstdate.getUTCDay(); // The first day (0-6) of the target month.
var dayofmonth = 0; // zero out our calendar day variable.
targetday = targetday - 5;
if (targetday >= firstday) {
cardinaloccurrence--; // Subtract 1 from cardinal day.
dayofmonth = (cardinaloccurrence * 7) + ((targetday - firstday)+1);
} else {
dayofmonth = (cardinaloccurrence * 7) + ((targetday - firstday)+1);
}
return dayofmonth;
}
</script>
</head>
<body style="background-color: transparent;" onload="changedate('return')">
<center><strong><img src="titel.jpg" align="texttop" width="641" height="102"></strong><br><font size="2" valign="top" color="green">Familjeaktiviteter i naturen för barn 7-12 år och anhöriga vuxna.</font><br><br><br>
<center>
<table id="evtcal" border="0" cellpadding="0" cellspacing="0" width="555">
<tbody>
<tr>
<td style="padding:0px; text-align:justify;" align="center" bgcolor="#ffffff" valign="top" width="250" bordercolor="black" >
<div id="calendar" style="border-color:#000000;border-width:0px;border-style:solid;"><!-- Dynamically Filled --></div>
</td>
<td width="5" valign="top"> </td>
<td style="padding:0px; text-align:justify;" align="center" valign="top" bgcolor="#ffffff" width="285">
<center>
<div id="tooltip" onclick="this.style.visibility='display';">
<b>Hej!</b><br>
textextextextextextextext text text text<br></div>
</center>
</td>
</tr>
</tbody>
</table>
<br>
</center>
</body>
</html>
Last edited by groobelar; 01-17-2010 at 06:33 AM..
Reason: Added URL
|
|
|
|
|
01-17-2010, 06:30 AM
|
Re: Calendar (lack of) color problem
|
Posts: 42,383
Name: Chris Hirst
Location: Blackpool. UK
|
URI please.
Any particular browsers exhibit the problem?
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
|
|
|
|
|
01-17-2010, 06:35 AM
|
Re: Calendar (lack of) color problem
|
Posts: 8
|
I added the URL in my first post now.
Doesn't seem to be browser related, the same problem in Firefox, IE and Opera.
This is the original calender: http://www.javascriptkit.com/script/...calendar.shtml
As you can see, I have tried to move Sunday from the left side to the right side instead.
The main changes have been:
* a div-area instead of a textbox-area
* color change when event day = today (thanks!)
* clicking whole box instead of just number
* moving Sunday from left to right (somewhere here something has gone wrong)
Last edited by groobelar; 01-17-2010 at 09:47 AM..
|
|
|
|
|
« Reply to Calendar (lack of) color problem
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
