-
1. Re: A working YUI Calendar With Spry Data
Arnout Kazemier Apr 7, 2009 12:44 AM (in response to Phil_W)So you basicly want just get the selected date, and place a filter on your dataset,
You can just get the selected date with the "getSelectedDates ( )" method of Yahoo. It returns a array of selected JavaScript Date objects. And you activate the filter when Yahoo's "selectEvent" has been called.
So i would just suggest to read out Yahoo's API
http://developer.yahoo.com/yui/docs/YAHOO.widget.Calendar.html
And build a callback function that filters your dataset.
Spry filter examples:
http://labs.adobe.com/technologies/spry/samples/data_region/MultipleFiltersSample.html
http://labs.adobe.com/technologies/spry/samples/data_region/NonDestructiveFilterSample.htm l
Hopes this helps,
-
2. Re: A working YUI Calendar With Spry Data
SparcyMarc May 9, 2009 8:48 AM (in response to Phil_W)Hi,
thanks for this, it's really helped me get my calendar up and running.
just wondering what the format of your "Startdate" and "Enddate" columns in your data table is? Being UK based i need it in DD/MM/YYYY format, but spry seems to get confused!
-
3. Re: A working YUI Calendar With Spry Data
Phil_W May 10, 2009 10:20 AM (in response to SparcyMarc)Hi,
The format of the dates in columns startdate and enddate is as follows i.e. Sat 6 Sep 2008. This is how the dates are shown on the page - unaltered.
Visit http://www.pwhitehurst.f2s.com//xml/Events.xml to see the raw xml data
I am also based in the UK. The function is only formatting the data into a format YUI calendar recognises (i.e. USA mm/dd/yyyy) and you should not be using the returned format to display in your spry region.
In the code below s is the start date and e the end date in format mm/dd/yyyy format i.e. USA format. So var cald = s + '-' + e; means cald becomes a string representing a date range from start date mm/dd/yyyy to end date mm/dd/yyyy. So YUI calendar will render that date range highlighted as per the [startdate] and [enddate] of the events in my Spry dataset.
// Convert in date format range that yui calendar recognises
var s = new Date(rows[i]["StartDate"]);
s = s.getMonth() + 1 + '/' + s.getDate() + '/' + s.getFullYear();
var e = new Date(rows[i]["EndDate"]);
e = e.getMonth() + 1 + '/' + e.getDate() + '/' + e.getFullYear();
var cald = s + '-' + e;
// Add highlight to range of cells
YAHOO.cal.yuicalendar1.addRenderer(cald, YAHOO.cal.yuicalendar1.renderCellStyleHighlight1);If you want to display your Spry XML dates in a UK format then create another post and I'll see if I know the answer. If you have an online version of the page you are working on that'll help significantly.
Cheers
Phil
-
4. Re: A working YUI Calendar With Spry Data
SparcyMarc May 13, 2009 2:46 PM (in response to Phil_W)Thanks,
Unfortunatley my page hasn't gone live yet, so I can't show you what I mean, but I think I've found the problem.
I've managed to config the YUI calendar to accept dates in DD/MM/YYYY format (using some of the localisation features described on the Yahoo developers pages: http://developer.yahoo.com/yui/examples/calendar/germany.html) so now my calendar will accept and properly shade any date passed to it in DD/MM/YYYY format (which is what my spry dataset is in) and it will also return any date selected from the calendar in DD/MM/YYYY format, as it should. So, all good on the calendar front...
...but spry is still operating in standard MM/DD/YYYY mode, so if I set my "start_date" and "end_date" columns as type = "date" (which I want to do for sorting purposes) it doesn't recognise any date after the 12th day of the month! (because it still thinks the DD segment is a MM segment and so has a maximum poss value of 12! doh!). So far I've got around this by defining both date columns as "strings", so the combining function you describe above (much appreciated btw :-)) passes the date string to the calendar exactly as entered, and because my calendar is set up to recognise this date string, theres no problem, and i can shade any date in the calendar (including the 13th to the 31st!)
so the only problem i have now is being able to sort my dates. one solution seems to be to have 2 columns - one with the date in DD/MM/YYYY format which is used for display (as it is now) and another in american MM/DD/YYYY format which is used to sort, but this seems to me a bit of a waste of time, and theres always the possibility that one column will have an error in it, especially since I'm not used to working in the american format.
sorry, a bit of a ramble there. I suppose my question is this: is there a simple step i'm missing where I can tell spry that my date columns are in a specific format? ie. dd/mm, not mm/dd?
something like:
var ds1 = new.Spry.Data.HTMLDataSet("myData.html", "table1", {sortOnLoad: "start_date", sortOrderOnLoad: "ascending"});
ds1.setColumnType("start_date", "date", {format:dd/mm/yyyy});
...
if not, there really should be!
*any admins reading, mental note for the next release please...! :-)*
I suppose i could give in and convert all my dates to the american system which would solve all the problems, but i never like being bullied by the Yanks!
-
5. Re: A working YUI Calendar With Spry Data
Phil_W May 13, 2009 4:33 PM (in response to SparcyMarc)Hi,
Checked Spry data and Spry data 1.7 and there's no ability to tell Spry the date format for sorting. Looks like it just sets the datatype of the array that holds the column to be javascript date format which is you guessed it is a USA based format
On another page of mine the source dates are held as yyyymmdd in the database generated xml and I use a function to display them. I like my dates to be easy to understand such as Thu 14 May, 2009 etc. I can then sort without needing to change any data formats and the display format function is simple enough. I don't change it at the server end as it is a Spry based project to replace the current server side coded forum (for which the code was free but is very badly structured, using HTML tables everywhere, and over complicated).
Thanks for the bit on setting YUI calendar to use European. To be honest I haven't done too much with YUI calendar lately as I'm busy building a Spry based forum and delving into XHR form submission, callback functions, Spry selectors and all that gubbins etc.
Cheers
Phil
-
6. Re: A working YUI Calendar With Spry Data
Phil_W May 20, 2009 12:37 AM (in response to Phil_W)Hi,
I wonder if you can create an extra node to sort the Spry dataset via something similar below in the postload event handler that deals with the YUI Calendar?
for (var i = 0; i < rows.length; i++)
{
// Convert in date format range that yui calendar recognises
var s = rows[i]["StartDate"];
s = s.substr(3,3) + s.substr(0,3) + s.substr(6,4) // convert from dd/mm/yyyy to mm/dd/yyyy formatvar myDate = new Date(s) // convert into date datatype
row[i]["sortStartDate"] = myDate // create new Spry dataset node
}ds1.sort("sortStartDate","ascending")
Perhaps if Kinblas is reading this he can say if we are along the right lines - xml dates in dd/mm/yyyy format but above code allows us to sort Spry dataset on mm/dd/yyyy date format.
Cheers
Phil
-
7. Re: A working YUI Calendar With Spry Data
Arnout Kazemier May 20, 2009 3:49 AM (in response to Phil_W)what i would do is:
var datasetname = new Spry.Data..... bla bla bla; datasetname.addObeserver({ onPostLoad:function(ds,data){ var rows = ds.getData(), i = 0, length = rows.length, oldDate; for(; i < rows.length; i++){ oldDate = rows[i]["StartDate"].split('/'); // set the correct date rows[i]["StartDate"] = [oldDate[1],oldDate[0],oldDate[2]].join('/'); } } });If i remember correctly Spry transforms it to a date object. So no need to do it your self.
-
8. Re: A working YUI Calendar With Spry Data
Phil_W May 20, 2009 4:41 AM (in response to Arnout Kazemier)Hi,
Thanks for the response V1.
One bit you missed in your example.
We don't wish to change the format of the date of the existing node "startdate" but rather wish to create a new node "sortStartDate" in format mm/dd/yy based on the original node.
so in your example is
rows[i]["sortStartDate"] = [oldDate[1],oldDate[0],oldDate[2]].join('/'); a valid way to add the new node sortStartDate to the array if the node was not in the original XML dataset that Spry read in ?
Cheers
Phil
-
9. Re: A working YUI Calendar With Spry Data
Arnout Kazemier May 20, 2009 4:56 AM (in response to Phil_W)We don't wish to change the format of the date of the existing node "startdate" but rather wish to create a new node "sortStartDate" in format mm/dd/yy based on the original node.
Whoops I missed that part.
so in your example is
rows[i]["sortStartDate"] = [oldDate[1],oldDate[0],oldDate[2]].join('/');
a valid way to add the new node sortStartDate to the array if the node was not in the original XML dataset that Spry read in ?
Yes. It would actually be cleaner if did
rows[i].sortStartDate = [oldDate[1],oldDate[0],oldDate[2]].join('/');With out the [" "] as its not really needed here and basiclly a waste of charactures.
-
10. Re: A working YUI Calendar With Spry Data
Phil_W May 20, 2009 5:26 AM (in response to Arnout Kazemier)Hi,
Thanks for update
Fantastic - so the finished article would be ...
var datasetname = new Spry.Data..... bla bla bla;
datasetname.addObserver({
onPostLoad:function(ds,data){
var rows = ds.getData(), i = 0, length = rows.length, oldDate;
for(; i < rows.length; i++){
oldDate = rows[i]["StartDate"].split('/');
// set the correct date
rows[i].sortStartDate = [oldDate[1],oldDate[0],oldDate[2]].join('/');
}ds.sort("sortStartDate","ascending")
}
});The XML data comes in with UK formatted dates dd/mm/yyyy. We display them on the web page in this format, but we create an extra node in the Spry dataset in mm/dd/yyyy format which allows Spry to sort on this new column to get the events in the right sequence.
Cheers
Phil


