31 replies to this topic

[Largo .//npc]

I'm looking to add a Calendar into my events page on my website, which will give event details aquired from the XML feed for the specific date which is either hovered over or clicked.
I've managed to find the DateChooser component in flash, but I'm unsure as to what to do with it.
I've looked for a tutorial, or some sort of guide, but all I can find is people trying to sell flash calendars.

Any help would be great, I'm really trying tog et this project finished.

Thanks

Largo

//The Beat Club
---------------------------------------------------
UPDATE:

I've started work on this myself. Below is the code I am using. I will update this as and when the code updates.
If you can point out anything in the code, please do so. It is here as a resources for others too.

var dcListener:Object = new Object();
dcListener.change = function(evt_obj:Object) {
	var thisDate:Date = evt_obj.target.selectedDate;
	var month_array:Array = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
	var month_str:String = month_array[thisDate.getMonth()];
	var currentDOM = thisDate.getDate();
	var currentMonth = month_str;
	var currentYear = thisDate.getFullYear();
	trace(+currentDOM+currentMonth+currentYear);
	event1 = new XML();
	event1.onLoad = event1Loaded;
	event1.load("xml/"+currentDOM+"-"+currentMonth+"-"+currentYear+".xml");
	event1.ignoreWhite = true;
	if (success) {
		trace("NO ERROR!!! XML stuff goes in here, get attributes ect. Another success check will be needed too.");
	} else {
		eventTitle.text = "No event for this date.";
		eventLocation.text = "N/A";
		eventTime.text = "N/A";
		eventInfo.text = "There is no event for this date. Please check later as this may update. In the mean time, check out our forums! <a href=\"forums/forums.php\">Click here</a>";
		multimap.text = "No map information available";
	}
	if (thisDate == undifined) {
		var today_date:Date = new Date();
		var date_str:String = (today_date.getDate()+"/"+(today_date.getMonth()+1)+"/"+today_date.getFullYear());
		eventDate.text = date_str;
	} else {
		eventDate.text = (thisDate.getDate()+"/"+(thisDate.getMonth()+1)+"/"+thisDate.getFullYear());
	}
};
my_dc.addEventListener("change", dcListener);

Edited by Largo .//npc, 03 April 2007 - 09:05 AM.

[Pax]

The basic idea of what you'll need to do is assign an eventListener to the dateChooser component. When the selected date changes it will fire the event. Then you compare the new event to your xml data, and you'll know what info to show. The livedocs should have the syntax for the code needed to make the eventListener work.

[Largo .//npc]

I've found the listener info, I just need to work out how to impliment the XMl into it. I'll have a think about it tomorrow night.
Thanks

[Pax]

Just to make things simple (may not be most efficient, but it IS the simplest way, imo) would be to parse the xml file for each month and create an array of objects.

Your objects would have the properties like:
dayNum
eventTitle
eventDescription

and so on. Whatever you need it to be. Then when they click on a day, loop through the event array, and if the dayNum prop is equal to the day num that has been selected, then show that event info. Let me know if you need help parsing xml and creating the data objects + array.

[Largo .//npc]

Ok, I've had a go at this, but to no avail.
I have no idea how to format the XML or how to call it for this calender. I also managed to overwrite the best attempt at it by mistake with an older version, so I kind of gave up.

Is there any way someoen can help me with it? I don't want someone to do it for me, that defeats the whole point of learning, but It'd be nice to have soemthing to reference, or a tutorial on how to do it.

Thanks

[Ben]

The way I'd set the xml out would be like:

<?xml version="1.0"?>
<calendar>
		<january>
				<day num="1" name="Monday" />
				<day num="2" name="Tuesday">
						<event name="The Zoo" description="We're going to the zoo today" />
				<day num="3" name="Wednesday" />
				<day num="4" name="Thursday" />
				<day num="5" name="Friday" />
				<day num="6" name="Saturday">
						<event name="My Birthday" description="I turn blah blah blah today" />
						<event name="A Restuarant" description="Going out for dinner tonight" />
				<day num="7" name="Sunday">
				...
		</january>
</calenday>

I would make a seperate xml for each month, so that it doesn't take forever to load one, and then you can load each of them when the user clicks the month.

Edited by Ben, 19 March 2007 - 03:32 PM.

[Largo .//npc]

I had a brain wave, and came up with a concept of how the code would work. All I'm missing is the currect syntax to make it work.
Here it is

function loadxml {
getyear
getmonth
month = currentmonth
year = currentyear
load currentmonth-currentyear.xml
getday
day = currentday
 information.text = currentday.details
 venue.text = currentday.venue
 time.text = currentday.time
 date.text = currentday.day - curentday.month - currentday.year
 
<code here to turn dates with events on another colour>
}

On date.click
getclickeddate
clickeddate = currentday
 information.text = currentday.details
 venue.text = currentday.venue
 time.text = currentday.time
 date.text = currentday.day - curentday.month - currentday.year
 
 on Month.click
 loadxml

It's obviously not finished, and it's not the actual code, just a code sketch of how it might work, using xml files named something like march-2007.xml

[Pax]

Pseduo-code like that is a great place to start. Makes projects that you aren't totally sure how to accomplish become much easier.

[Largo .//npc]

Hey all. Just a quick update on the calendar.
I started work on it today, and so far progess is good.
The only problem is that I can't find any resources on how to highlight multiple dates.
I'd like a date with an event on it to be highlighted in red. Is this possible?
This is the code I have so far.

var dcListener:Object = new Object();
dcListener.change = function(evt_obj:Object) {
	var thisDate:Date = evt_obj.target.selectedDate;
	var dayOfWeek_array:Array = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
	var day_str:String = dayOfWeek_array[thisDate.getDay()];
	var month_array:Array = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
	var month_str:String = month_array[thisDate.getMonth()];
	var currentMonth = month_str;
	var currentDay = day_str;
	var currentYear = thisDate.getFullYear();
	trace(+currentDay+currentMonth+currentYear);
	event1 = new XML();
	event1.onLoad = event1Loaded;
	event1.load("xml/"+currentMonth +"-" +currentYear +".xml");
	event1.ignoreWhite = true;
	if (error) {
		trace( "ERROR!!!" );
	}
};
my_dc.addEventListener("change", dcListener);

Also, I'm trying to get an if statement in there. Because not all months and years will have an xml file, I'd like it to do a check. If there is an error opening the XML file, I'd like it to use some default variables. Is there a way I can do that? The if (error) didn't work :/

Edited by Largo .//npc, 03 April 2007 - 07:39 AM.

[Pax]

You'll need to put the onLoad if code inside a function named "event1Loaded" because of the line:

event1.onLoad = event1Loaded;

its telling it to call event1Loaded when it loads.

Using a couple if statements you can easily add a red background do a day. One possibility you could use are when you assign events to a day, just change the bg then. If that day doesnt have an event associated to it in the xml, dont try to add an event.

[Largo .//npc]

I wouldn't know where to start to do that. I've not found any code on changing the background of 1 date. I'm using the DateChooser btw.

I managed to do the code to check if there is no XML file. I've also compensated for if a date is unselected, although I've not finished that yet.

var dcListener:Object = new Object();
dcListener.change = function(evt_obj:Object) {
	var thisDate:Date = evt_obj.target.selectedDate;
	var dayOfWeek_array:Array = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
	var day_str:String = dayOfWeek_array[thisDate.getDay()];
	var month_array:Array = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
	var month_str:String = month_array[thisDate.getMonth()];
	var currentMonth = month_str;
	var currentDay = day_str;
	var currentYear = thisDate.getFullYear();
	trace(+currentDay+currentMonth+currentYear);
	event1 = new XML();
	event1.onLoad = event1Loaded;
	event1.load("xml/"+currentMonth+"-"+currentYear+".xml");
	event1.ignoreWhite = true;
	if (success) {
		trace("NO ERROR!!! XML stuff goes in here, get attributes ect. Another success check will be needed too.");
	} else {
		eventTitle.text = "No event for this date.";
		eventLocation.text = "N/A";
		eventTime.text = "N/A";
		eventInfo.text = "There is no event for this date. Please check later as this may update. In the mean time, check out our forums! <a href=\"forums/forums.php\">Click here</a>";
		multimap.text = "No map information available";
	}
	if (thisDate == undifined) {
		var today_date:Date = new Date();
		var date_str:String = (today_date.getDate()+"/"+(today_date.getMonth()+1)+"/"+today_date.getFullYear());
		eventDate.text = date_str;
	} else {
		eventDate.text = (thisDate.getDate()+"/"+(thisDate.getMonth()+1)+"/"+thisDate.getFullYear());
	}
};
my_dc.addEventListener("change", dcListener);

I'll keep updating my code incase anyone else wants to use it for a calendar.
EDIT: Latest code I am using will always be updated into the first post of this thread.

Edited by Largo .//npc, 03 April 2007 - 09:05 AM.

[Pax]

Ooooh, didn't realize you were using the Macromedia component. I dont like those things, they never do what you need them to do!

It's a fair bit of work, but if you find the class that the component uses, you might be able to extend the class, or write a prototype and write code in to change the bg on individual dates...but like I said, a fair bit of work and you need to have a good idea about what you're doing and classes and all that jazz.

You might be able to disable any days that dont have an event...try looking into that.

[Largo .//npc]

I'm thinking it might be easier to just make a list containing what events are actually in an XML file.
I'm not entirely sure how I would add things from an MXL file into a list. I need to do that for my MP3 player too for the Playlist.

[Largo .//npc]

Now I have another problem. This is what happened before when I tried to make a simple events page.

I have some code to read the XML file, it's the same that is on my main page and my Bio page, it works perfectly there.
But on the events page, it returns null. I have no idea why and it's doing my head in!!

bios2 = new XML();
bios2.onLoad = bios2Loaded;
bios2.load("xml/bios2.xml");
bios2.ignoreWhite = true;

function bios2Loaded() {
	currentBio2 = bios2.firstChild.firstChild;
	entries = currentBio2.attributes.entries;
	trace( bios2.firstChild.firstChild );
	displayNextBio2();
	
}

^ Not finished code, but all relivant code is there.

[Pax]

Whats that xml file look like?

[Largo .//npc]

Fixed it now bud. The XML files was exactly the same as previously used XMLs. I wrote a new one anyway and it worked. I compared both XML files, and they are identical, but 1 doesn't work. Strange.
Problem I'm having now is that this code isn't adding the items like it should.

xmlfile = new XML();
xmlfile.onLoad = xmlfileLoaded;
xmlfile.load("xml/bios2.xml");
xmlfile.ignoreWhite = true;
function xmlfileLoaded() {
	xmlChild = xmlfile.firstChild.firstChild;
	entries = xmlChild.attributes.entries;
	var idcount = 1;
	trace(idcount);
	gotoNextItem();
}
function gotoNextItem() {
	if (idcount<entries) {
		if (xmlfile.nextSibling) {
			xmlfile = xmlfile.nextSibling;
			trace( xmlfile.nextSibling );
			itemManage();
		}
	}
}
function itemManage() {
	eventID = currentBio2.attributes.id;
	eventDate = currentBio2.attributes.date;
	eventTitle = currentBio2.attributes.headline;
	xmlfile = currentBio2.attributes.xmlfile;
	currentLabel = eventDate+": "+eventTitle;
	my_list.addItemAt(eventID, {label:currentLabel, data:xmlfile});
	++idcount;
}

Anything there I'm doing wrong?

Seems that xmlfile.nextSibling is returning null. XML files is as follows.

<bios>
  <bio entries="4">ALWAYS UPDATE THIS!!</bio>
  <bio id="4" date="29/05/07" title="Claremont Music Center Gig" xmlfile="claremont1">Empty</bio>
  <bio id="3" date="219/05/07" title="Pub, supporting Ash" xmlfile="pub1">Empty</bio>
  <bio id="2" date="13/04/07" title="The Shed" xmlfile="shed2">Empty</bio>
  <bio id="1" date="03/04/07" title="The Shed" xmlfile="shed1">Empty</bio>
</bios>

Edited by Largo .//npc, 03 April 2007 - 02:47 PM.

[Largo .//npc]

Seems that with this new code, I'm getting undefined when it trace xmlChild.nextSibling

xmlfile = new XML();
xmlfile.onLoad = xmlfileLoaded;
xmlfile.load("xml/bios2.xml");
xmlfile.ignoreWhite = true;
function xmlfileLoaded() {
	xmlChild = xmlfile.firstChild.firstChild;
	entries = xmlChild.attributes.entries;
	var idcount = 1;
}
displayNextItem();

function displayNextItem() {
	if (idcount<=entries) {
		if (xmlChild.nextSibling) {
			xmlfile = xmlChild.nextSibling;
			trace(xmlfile);
			itemManage();
		}
	}
}
function itemManage() {
	eventID = currentBio2.attributes.id;
	eventDate = currentBio2.attributes.date;
	eventTitle = currentBio2.attributes.headline;
	xmlfile = currentBio2.attributes.xmlfile;
	currentLabel = eventDate+": "+eventTitle;
	eventLoad = eventID - 1
	my_list.addItemAt(eventID, {label:currentLabel, data:xmlfile});
	++idcount;
	displayNextItem();
}

[Largo .//npc]

Is anyone able to help me with this at all?
I'm still stuck with it. I've rewrote the XML and looked at the code.
If I take if (xmlChild.nextSibling) out, then the code loops infinatey, so my check isn't working either :/

[Pax]

Start by putting lots of traces in the code so you can find out where the code loses the variable.

Trace xmlChild in the load Function...see if it has it there.

[Largo .//npc]

it does, It seems to lose it in the displayNextItem function