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

Yui Calendar - using addRenderer to display dynamic text in cells

Expand Messages
  • dev_krone
    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
    Message 1 of 6 , Jul 30, 2009
      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
      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 2 of 6 , Jul 30, 2009
        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 3 of 6 , Jul 30, 2009
          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 4 of 6 , Jul 31, 2009
            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 5 of 6 , Aug 9, 2009
              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 6 of 6 , Aug 10, 2009
                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.