dynamic event calendar

**chechu** · 11-28-2009, 12:25 PM

Hey all,

I was looking for a free event calendar, where every event shows up clicking on the date. I found this excellent one http://www.javascriptkit.com/script/...calendar.shtml, which I placed in an adapted version here: http://www.portretkunst.be/kalender.php

I would like to add the possibility that every day an event lasts, the date is highlighted. So not only the starting or ending date but the whole period highlighted. Is that possible ?
The script is too long to be displayed here; please have a look at the source code.

**vwphillips** · 11-28-2009, 03:51 PM

Code:

<!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></title>
</head>

<body>

<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:20px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=10 cols=100 ></textarea>
</form>

<script type="text/javascript">
/*<![CDATA[*/
events = new Array(
	["",	"11",	"27",	"2009",	"12 november",	"21 december",	"Luc Standaert",	"Kraainem, Oud Pachthof, individuele tentoonstelling"],
	["",	"10",	"3",	"2009",	"3 oktober",	"6 december",	"Sam Dillemans",	"Antwerpen, Napelsstraat 32, individuele tentoonstelling"],
	["",	"02",	"6",	"2010",	"6 februari",	"31 maart",	"Luc Standaert",	"Turnhout, Het Verschil (Otterstraat), individuele tentoonstelling"]
)

events[0].days=10;
events[2].days=4;

function Days(ary){
 for (var nary=[],fld,z0=0;z0<ary.length;z0++){
  fld=ary[z0];
  fld.days=fld.days||0;
  for (var cy=fld[3]*1,cm=fld[1]-1,day,d=fld[2]*1+1,na,z0a=1;z0a<fld.days;z0a++){
   na=[];
   na[0]=fld[0];
   var lday=new Date(cy,cm+1,1,-1).getDate();
   day=d++;
   if (day>new Date(cy,cm+1,1,-1).getDate()){
    d=day=1;
    cm++;
    if (cm==12){
     cm=0;
     cy++;
    }
   }
   na[1]=(cm>8?'':'0')+(cm+1);
   na[2]=(day>9?'':'0')+day;
   na[3]=cy+'';
   for (var z0b=4;z0b<fld.length;z0b++){
    na.push(fld[z0b]);
   }
   nary.push(na);
  }
 }
 for (var z1=0;z1<nary.length;z1++){
  ary.push(nary[z1]);
 }
}

Days(events);
document.Show.TA.value=events.join('\n'); // test purposes
/*]]>*/
</script>

</body>

</html>

not sure how the maIN SCTIPT WILL REACT TO OVERLAPPING DATES

**chechu** · 11-28-2009, 04:05 PM

This is the result of your code: http://www.portretkunst.be/testkalender.php
Something isn't working right, or did I forget a chunk of code ?

**vwphillips** · 11-28-2009, 04:59 PM

works for me, Note the red lines

Code:

// This is the Database of Upcoming Events
// Please Edit with Care.
//
// 8 Fields (surrounded by brackets[]) are used for EACH event:
// 	["Recurring", "Month", "Day", "Year", "StartTime", "EndTime", "Name", "Description"]
// 	Each event field must be be surrounded by quotation marks followed by a comma ("",) EXCEPT the "Description" field.
//	The "Description" field is surrounded by quotation marks only ("").
//
// Each event has a comma after the closing bracket IF another event is below it on the next line down.
//	Note: The last event in this file should NOT have a comma after the closing bracket
//
// The Recurring field uses:
//	"D" = Daily; "W" = Weekly; "M" = Monthly; "Y" = Yearly; "F" = Floating Holiday
//
// One Time only events should leave the Recurring field blank
//	(ex. "")
//
// Daily events do NOT require that anything be in the Month Day and Year fields
//	Everything in the Month Day and Year fields will be ignored
//
// Weekly events should have the day of the week field set to 1 - 7
//	1=Sunday, 2=Monday, 3=Tuesday, 4=Wednesday, 5=Thurday, 6=Friday, 7=Saturday
//
// "F"loating events uses:
//	the Month field for the Month.
//	the Day field as the Cardinal Occurrence
//		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
//		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.
//
//	Note: Easter has it's own special formula so Please don't change anything related to Easter below
//
// "Y"early events are specific dates that never change - the Year field is ignored
//	example - Christmas is: "12","25","",
events = new Array(
	["",	"11",	"14",	"2009",	"12 november",	"21 december",	"Luc Standaert",	"Kraainem, Oud Pachthof, individuele tentoonstelling"],
	["",	"10",	"3",	"2009",	"3 oktober",	"6 december",	"Sam Dillemans",	"Antwerpen, Napelsstraat 32, individuele tentoonstelling"],
	["",	"02",	"6",	"2010",	"6 februari",	"31 maart",	"Luc Standaert",	"Turnhout, Het Verschil (Otterstraat), individuele tentoonstelling"]
// Please omit the final comma after the ] from the last line above unless you are going to add another event at this time.
);

events[0].days=10;
events[2].days=4;


function Days(ary){
 for (var nary=[],fld,z0=0;z0<ary.length;z0++){
  fld=ary[z0];
  fld.days=fld.days||0;
  for (var cy=fld[3]*1,cm=fld[1]-1,day,d=fld[2]*1+1,na,z0a=1;z0a<fld.days;z0a++){
   na=[];
   na[0]=fld[0];
   var lday=new Date(cy,cm+1,1,-1).getDate();
   day=d++;
   if (day>new Date(cy,cm+1,1,-1).getDate()){
    d=day=1;
    cm++;
    if (cm==12){
     cm=0;
     cy++;
    }
   }
   na[1]=(cm>8?'':'0')+(cm+1);
   na[2]=(day>9?'':'0')+day;
   na[3]=cy+'';
   for (var z0b=4;z0b<fld.length;z0b++){
    na.push(fld[z0b]);
   }
   nary.push(na);
  }
 }
 for (var z1=0;z1<nary.length;z1++){
  ary.push(nary[z1]);
 }
}

Days(events);

**chechu** · 11-28-2009, 05:05 PM

I see, the code yuo placed needs to replace the one in the .js file ?
Will adapt it now.
The dates are highligted indeed, but not the correct dates !
see here: http://www.portretkunst.be/testkalender.php
Click on 12 november, and you'll see that the ending date (Dec 21) is not the same as the highlighted end date (Nov 21).
same at Februari 6 till March 31, but highlighted till Feb 9.

**vwphillips** · 11-28-2009, 05:49 PM

events[0].days=41;

**chechu** · 11-28-2009, 05:56 PM

Code:

events[0].days=41;

does the [0] refer to the line of the event,
so event[0] is the first line ["", "11", "14", "2009", "12 november", "21 december", "Luc Standaert", "Kraainem, Oud Pachthof, individuele tentoonstelling"],
event[1] is the second line ["", "10", "3", "2009", "3 oktober", "6 december", "Sam Dillemans", "Antwerpen, Napelsstraat 32, individuele tentoonstelling"],
event[2] is the third line ["", "02", "6", "2010", "6 februari", "31 maart", "Luc Standaert", "Turnhout, Het Verschil (Otterstraat), individuele tentoonstelling"]

etc ?

**chechu** · 11-28-2009, 06:44 PM

I seem to have figured it out with the days.
Works all well, just one issue: why is on the first of every month, every event posted twice ? Have a look at http://www.portretkunst.be/kalender.php (I deleted the test page).

**vwphillips** · 11-29-2009, 09:19 AM

I dont know
it must be a function of the main script
I did not want to go there but will try and have a look at that later

**vwphillips** · 11-29-2009, 01:47 PM

was my mistake

Code:

function Days(ary){
 for (var nary=[],fld,z0=0;z0<ary.length;z0++){
  fld=ary[z0];
  fld.days=fld.days||0;
  for (var cy=fld[3]*1,cm=fld[1]-1,day,d=fld[2]*1,na,z0a=1;z0a<fld.days;z0a++){
   na=[];
   na[0]=fld[0];
   var lday=new Date(cy,cm+1,1,-1).getDate();
   day=++d;
   if (day>new Date(cy,cm+1,1,-1).getDate()){
    day=d=1;
    cm++;
    if (cm==12){
     cm=0;
     cy++;
    }
   }
   na[1]=(cm>8?'':'0')+(cm+1);
   na[2]=(day>9?'':'0')+day;
   na[3]=cy+'';
   for (var z0b=4;z0b<fld.length;z0b++){
    na.push(fld[z0b]);
   }
   nary.push(na);
  }
 }
 for (var z1=0;z1<nary.length;z1++){
  ary.push(nary[z1]);
 }
}