Log in

View Full Version : 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/script2/eventscalendar.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
<!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


// 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
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


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]);
}
}
chechu
11-29-2009, 03:29 PM
Vic, ajusting the above makes me only show the beginning date of the event !
Correct myself; forgot to add the following below:

Days(events);
Thanks a lot !!