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

calendar how-to's

Expand Messages
  • larhire
    Hello I m having some problems with calendars that I do not know how to solve. 1) I m trying to get a whole week shown as selected. Using rendering techniques,
    Message 1 of 3 , Sep 27, 2007
    • 0 Attachment
      Hello

      I'm having some problems with calendars that I do not know how to solve.

      1) I'm trying to get a whole week shown as selected. Using rendering
      techniques, i've come up with the following piece of code:
      ....
      <div id="cal1Container"></div>

      <script type="text/javascript">
      YAHOO.namespace("example.calendar");

      YAHOO.example.calendar.init = function() {
      YAHOO.example.calendar.cal1 = new
      YAHOO.widget.Calendar("cal1","cal1Container");

      var date = new Date();

      YAHOO.example.calendar.cal1.selectEvent.subscribe(function(event,
      args) {
      var str_date = new String(args[0][0]);
      var str_arr = str_date.split(',');
      var year = str_arr[0];
      var month = str_arr[1];
      month = month - 1; /*js months range from 0 to 11*/
      var day = str_arr[2];
      var date = new Date();
      date.setDate(day); date.setMonth(month); date.setFullYear(year);
      var dayInWeek = date.getDay();
      month = month + 1;
      var beginning_date = "";
      if (day - dayInWeek >= 1) {
      beginning_date = month + "/" + (day - dayInWeek) + "/" + year;
      } else beginning_date = month + "/1/" + year;
      day = day - dayInWeek + 6;
      end_date = month + "/" + day + "/" + year;
      YAHOO.example.calendar.cal1.addRenderer(beginning_date + "-" +
      end_date,YAHOO.example.calendar.cal1.renderCellStyleSelected);
      YAHOO.example.calendar.cal1.render();
      });
      }

      YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);



      </script>
      ...

      which does work as intended.
      What I'd like to do is take out the inline function and declare it as
      a stand alone function, which I'd later use as
      YAHOO.example.calendar.cal1.selectEvent.subscribe('function_name');

      It doesn't appear as though I can do that - can anyone tell me what
      I'm doing wrong?

      2) The second problem is as follows: my final page will have a
      calendar and a few tabs labeled "day", "week", "month" a.s.o. What I'd
      like is to have it work as follows:
      -start with the day tab selected and the usual handler, having just a
      day selected
      -when pressing the week tab, set as a selectEvent for the calendar the
      function that shows the whole week as selected
      -when going back to the day tab, switch the selectEvent so it triggers
      the original handler

      All this works fine, until step 3 there. The problem with it is that
      it does not deselect the week when going back to day.
      What I've tried doing is:

      var date = cal1.getSelectedDates()[0];
      cal1.deselectAll();
      cal1.resetRenderers();
      cal1.select(date);
      cal1.render();

      which just leads to a "busy" script
      or

      var date = cal1.getSelectedDates()[0];
      cal1.deselectAll();
      cal1.selectEvent.unsubscribeAll();
      cal1.selectEvent.('original_handler');
      cal1.select(date);
      cal1.render();

      which works, somewhat: it goes back to selecting only one day after
      i've selected a new date. What I need it to do is to deselect the week
      and select the day when switching back from the week tab to the day tab.



      Any ideas on how to do this?

      Cheers,
      Laura
    • Satyen Desai
      Hi, 1). You should just be able to name your inline anonymous function, and use it be name... YAHOO.ex.cal.cal1.selectEvent.subscribe(function(event, args)
      Message 2 of 3 , Sep 29, 2007
      • 0 Attachment
        Hi,

        1). You should just be able to name your inline anonymous function, and use it be name...

        YAHOO.ex.cal.cal1.selectEvent.subscribe(function(event, args) {...});

        becomes:

        YAHOO.ex.cal.cal1.selectHandler = function(event, args) {...});
        YAHOO.ex.cal.cal1.selectEvent.subscribe(YAHOO.ex.cal.cal1.selectHandler);

        (shortened names, just for readability. If you're doing all this inside a function, you don't really need to namespace everything, unless you need global access to it)

        NOTE: In your code you're not actually selecting all the dates in the week. You're just setting the visual presentation. If you really need the dates to be selected, the following example can provide some pointers.

        http://yuiblog.com/sandbox/yui/v222/examples/calendar/selectCalWeeks.html

        It was created to show how you can use Calendar's domEventMap to attach event listeners to row numbers, to select whole rows, but you can reuse the week selection logic in your non-row header use case also.

        2) .  The problem here probably stems from the fact that you're not really selecting the dates in your code  (as mentioned above). So methods like deselectAll() don't end up clearing out your cells which are just "visually" styled as selected.

        > cal1.selectEvent.unsubscribeAll();

        You probably don't want to call unsubscribeAll(), since this will remove any internal handlers the Calendar maybe using (or may use in the future) also.  Just unsubscribe the handlers you've added (see the API docs for CustomEvent).

        Hope that helps,
        Satyen
      • larhire
        Hi, Thanks for your answer. For 1, I did try to do what you suggested but found that it simply refused to work, namespace or no namespace (I did work around
        Message 3 of 3 , Oct 1, 2007
        • 0 Attachment
          Hi,

          Thanks for your answer.

          For 1, I did try to do what you suggested but found that it simply
          refused to work, namespace or no namespace (I did work around this in
          the end). I'm not selecting all the dates because I don't really need
          to do it as the jsp behind just handles all that. Just needed the
          visual selection (the example you mention helped me a lot).

          For 2, after some more digging through this great group (seriously), I
          managed to understand what I was doing wrong with the renderers so I
          just started again. I ended up with an if-clause in the calendar
          select handler that changes the rendering type depending on the tab
          and this works fine. The next step will be extending the calendar
          class to handle selection, as it seems to be a somewhat better approach.

          Will post here when ready.

          Thanks again for your answer,

          Cheers,
          Laura


          --- In ydn-javascript@yahoogroups.com, "Satyen Desai" <sdesai@...> wrote:
          >
          > Hi,
          >
          > 1). You should just be able to name your inline anonymous function, and
          > use it be name...
          >
          > YAHOO.ex.cal.cal1.selectEvent.subscribe(function(event, args) {...});
          >
          > becomes:
          >
          > YAHOO.ex.cal.cal1.selectHandler = function(event, args) {...});
          >
          YAHOO.ex.cal.cal1.selectEvent.subscribe(YAHOO.ex.cal.cal1.selectHandler)\
          > ;
          >
          > (shortened names, just for readability. If you're doing all this inside
          > a function, you don't really need to namespace everything, unless you
          > need global access to it)
          >
          > NOTE: In your code you're not actually selecting all the dates in the
          > week. You're just setting the visual presentation. If you really need
          > the dates to be selected, the following example can provide some
          > pointers.
          >
          >
          http://yuiblog.com/sandbox/yui/v222/examples/calendar/selectCalWeeks.htm\
          > l
          >
          > It was created to show how you can use Calendar's domEventMap to attach
          > event listeners to row numbers, to select whole rows, but you can reuse
          > the week selection logic in your non-row header use case also.
          >
          > 2) . The problem here probably stems from the fact that you're not
          > really selecting the dates in your code (as mentioned above). So
          > methods like deselectAll() don't end up clearing out your cells which
          > are just "visually" styled as selected.
          >
          > > cal1.selectEvent.unsubscribeAll();
          >
          > You probably don't want to call unsubscribeAll(), since this will remove
          > any internal handlers the Calendar maybe using (or may use in the
          > future) also. Just unsubscribe the handlers you've added (see the API
          > docs for CustomEvent).
          >
          > Hope that helps,
          > Satyen
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.