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

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

Expand Messages
  • theblargoner
    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.
    Message 1 of 6 , Jul 30, 2009
    • 0 Attachment
      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
      >
    • theblargoner
      Addendum: ignore the leading zeros I put on the months in the example strings. --John
      Message 2 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 3 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 4 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 5 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.