10 Replies Latest reply: May 20, 2009 5:26 AM by Phil_W RSS

    A working YUI Calendar With Spry Data

    Phil_W Community Member

      Hi,

       

      I've seen a number of posts about linking Spry data with the YUI calendar widget.

       

      Well I've done that here.  http://www.pwhitehurst.f2s.com/yui%20calendar.html. through a little perserverance and reading the Yahoo calendar API

       

      The calendar dates are highlighted based on the event dates in the SPRY data.  I haven't added any other functionality yet as  I'm just taking it one step at a time.  But this page should give others the base code for getting started.  The key is to declare a YAHOO namespace so you can reference the calendar in your spry region postload notifications or other spry functions etc.

       

      Any questions please reply and I'll see if I've worked it out.  I'm away over Easter but intend to add functionaility so that when you click a date on the calendar it filters the spry data via a non destructive filter etc. I also want the calendar to move to the right month as I click events.

       

      Cheers

       

      Phil

        • 1. Re: A working YUI Calendar With Spry Data
          Arnout Kazemier Community Member

          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 Community Member

            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 Community Member

              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 Community Member

                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 Community Member

                  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 Community Member

                    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 format

                     

                      var 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 Community Member

                      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 Community Member

                        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 Community Member

                          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 Community Member

                            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