Loading ...
Sorry, an error occurred while loading the content.

Re: Yui Calendar - using addRenderer to display dynamic text in cells

Expand Messages
  • theblargoner
    Addendum: ignore the leading zeros I put on the months in the example strings. --John
    Message 1 of 6 , Jul 30, 2009
    • 0 Attachment
      Addendum: ignore the leading zeros I put on the months in the example strings. --John

      --- In ydn-javascript@yahoogroups.com, "theblargoner" <theblargoner@...> wrote:
      >
      > There's not a way that I know of to have an object (or, especially, a different object for different dates) passed automatically to your custom renderer. However, you could store your event objects in a structure similar to an associative array, indexed by date strings, like
      >
      > var events = {
      > '2009-07-30': { name: 'haircut' },
      > '2009-07-31': { name: 'party' },
      > // ...
      > };
      >
      > Then, in your renderer, calculate the string format of the passed date and access the event:
      >
      > var fn = function(date, cell) {
      > var s = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
      > event = events[s];
      >
      > // do stuff
      > };
      >
      > Does that make sense?
      > John
      >
      > --- In ydn-javascript@yahoogroups.com, "dev_krone" <dev_krone@> wrote:
      > >
      > > hello,
      > >
      > > just started using Yui calendar
      > >
      > > and id like to achieve the following
      > >
      > > I have an Events object like so
      > >
      > > // holds all data for a single event
      > > function EventObject()
      > > {
      > > this.date = '';
      > > this.type = '';
      > > this.name = '';
      > > this.presenter = '';
      > > }
      > >
      > > and my addRenderer function is
      > >
      > > addEventCell : function(date, cell)
      > > {
      > >
      > > cell.innerHTML += '<a href="#">'+event.name+'</a>';
      > > YAHOO.util.Dom.addClass(cell, "cal_event_cell");
      > > return YAHOO.widget.Calendar.STOP_RENDER;
      > > }
      > >
      > > basically i would like to pass to the renderer the name/type/presenter (my event object) so it may render the cell with the correct string values
      > >
      > > hope that makes sense
      > > so in my calendar i should see
      > >
      > > in 06/30/2009 -> Event 1, at 10pm
      > > in 06/15/2009 -> Event 2, 11pm
      > > in 06/02/2009 -> Event 3 etc
      > >
      > > Is there a way to pass down arguments to the addRenderer?
      > >
      > > Cheers
      > > Lu
      > >
      >
    • Satyen Desai
      Along those lines, a rough sandbox examples which was thrown up for other renderer/event calendar questions, which uses an external hash:
      Message 2 of 6 , Jul 31, 2009
      • 0 Attachment
        Along those lines, a rough sandbox examples which was thrown up for
        other renderer/event calendar questions, which uses an external hash:

        http://yuiblog.com/sandbox/yui/v252/examples/calendar/eventCalendar.html

        Also, using the external hash (and reducing the number of custom
        renderers) will also perform better on the slower JS engines (e.g.
        IE6/7, FF2), as shown here:

        http://yuiblog.com/sandbox/yui/v252/examples/calendar/rendererPerformance.html

        Regards,
        Satyen



        On Jul 30, 2009, at 10:36 AM, theblargoner wrote:

        > Addendum: ignore the leading zeros I put on the months in the
        > example strings. --John
        >
        > --- In ydn-javascript@yahoogroups.com, "theblargoner"
        > <theblargoner@...> wrote:
        > >
        > > There's not a way that I know of to have an object (or,
        > especially, a different object for different dates) passed
        > automatically to your custom renderer. However, you could store your
        > event objects in a structure similar to an associative array,
        > indexed by date strings, like
        > >
        > > var events = {
        > > '2009-07-30': { name: 'haircut' },
        > > '2009-07-31': { name: 'party' },
        > > // ...
        > > };
        > >
        > > Then, in your renderer, calculate the string format of the passed
        > date and access the event:
        > >
        > > var fn = function(date, cell) {
        > > var s = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' +
        > date.getDate(),
        > > event = events[s];
        > >
        > > // do stuff
        > > };
        > >
        > > Does that make sense?
        > > John
        > >
        > > --- In ydn-javascript@yahoogroups.com, "dev_krone" <dev_krone@>
        > wrote:
        > > >
        > > > hello,
        > > >
        > > > just started using Yui calendar
        > > >
        > > > and id like to achieve the following
        > > >
        > > > I have an Events object like so
        > > >
        > > > // holds all data for a single event
        > > > function EventObject()
        > > > {
        > > > this.date = '';
        > > > this.type = '';
        > > > this.name = '';
        > > > this.presenter = '';
        > > > }
        > > >
        > > > and my addRenderer function is
        > > >
        > > > addEventCell : function(date, cell)
        > > > {
        > > >
        > > > cell.innerHTML += '<a href="#">'+event.name+'</a>';
        > > > YAHOO.util.Dom.addClass(cell, "cal_event_cell");
        > > > return YAHOO.widget.Calendar.STOP_RENDER;
        > > > }
        > > >
        > > > basically i would like to pass to the renderer the name/type/
        > presenter (my event object) so it may render the cell with the
        > correct string values
        > > >
        > > > hope that makes sense
        > > > so in my calendar i should see
        > > >
        > > > in 06/30/2009 -> Event 1, at 10pm
        > > > in 06/15/2009 -> Event 2, 11pm
        > > > in 06/02/2009 -> Event 3 etc
        > > >
        > > > Is there a way to pass down arguments to the addRenderer?
        > > >
        > > > Cheers
        > > > Lu
        > > >
        > >
        >
        >
        >
      • dev_krone
        That worked brilliantly! much appreciated
        Message 3 of 6 , Aug 9, 2009
        • 0 Attachment
          That worked brilliantly! much appreciated
        • dev_krone
          Hello, I used addRenderer to display events in my calendar. What i now want to do is to the following 1. User adds a new event belonging to a day 2. Calendar
          Message 4 of 6 , Aug 10, 2009
          • 0 Attachment
            Hello,

            I used addRenderer to display events in my calendar.

            What i now want to do is to the following
            1. User adds a new event belonging to a day
            2. Calendar updates that day ONLY to show the new event

            what Im doing currently is

            -> system gets all events from db
            -> addRenderer to all event days
            TourCalendar.cal.addRenderer(TourCalendar.days[i].date, TourCalendar.addEventCell);

            -> Render calender

            this works fine--

            then user adds a new event to a day so i did the following to update
            ...
            TourCalendar.cal.addRenderer(date, TourCalendar.testRender);
            TourCalendar.cal.render();
            }

            testRender:function(date, cell)
            {
            cell.innerHTML+='<strong>New</stong>';
            return YAHOO.widget.Calendar.STOP_RENDER;
            },

            However, this only renders the NEW event date cell, and clears all the other events. Im guessing because i have called render twice and the caling render() removes the render stack from the first addRenderes.

            Is there a way i can just update one day cell, and still keepe the others.

            I know i can just add my event to my Day list, and let it render EVERYTHIGN again including the new render, but that seems like a waste

            much appreciataed
          Your message has been successfully submitted and would be delivered to recipients shortly.