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

Splitting months in different DIVs with CalendarGroup

Expand Messages
  • prixpared
    hi there, i know this question might be silly: how can i place 2 months of a year (say JAN and FEB) in one DIV and the following months (MARCH and APRIL) in
    Message 1 of 2 , May 9, 2007
      hi there,

      i know this question might be silly:

      how can i place 2 months of a year (say JAN and FEB) in one DIV and
      the following months (MARCH and APRIL) in another DIV?

      it still should be possible to "multi-select" dates (let's say 1st of
      JAN and 15th of APRIL). so it has to be a "single data set" (see below).

      I found this in the API Documentation for CalendarGroup, but i don't
      get it:

      "YAHOO.widget.CalendarGroup is a special container class for
      YAHOO.widget.Calendar. This class facilitates the ability to have
      multi-page calendar views that share a single dataset and are
      dependent on each other. The calendar group instance will refer to
      each of its elements using a 0-based index. For example, to construct
      the placeholder for a calendar group widget with id "cal1" and
      containerId of "cal1Container", the markup would be as follows:

      <div id="cal1Container_0"></div>
      <div id="cal1Container_1"></div>

      The tables for the calendars ("cal1_0" and "cal1_1") will be inserted
      into those containers."

      noob says thank you for your help.

      greets
      fritz
    • Satyen Desai
      So, you could essentially do something like this, to group months into separate divs:
      Message 2 of 2 , May 9, 2007
        So, you could essentially do something like this, to group months into
        separate divs:

        <div id="cal">

        <div>
        <div id="cal_0"></div>
        <div id="cal_1"></div>
        </div>

        <div>
        <div id="cal_2"></div>
        <div id="cal_3"></div>
        </div>

        </div>

        <script type="text/javascript">
        function init() {
        var opts = {pages:4,pagedate:"1/2007",multi_select:true};
        var cal = new YAHOO.widget.CalendarGroup("calBody", "cal", opts);
        cal.render();
        }

        YAHOO.util.Event.addListener(window, "load", init);
        </script>

        But where you go from there (how you style the DIVs, additional markup
        you'd add) depends on the final UI you're aiming for and the purpose
        for the groups to begin with (e.g. are you trying to group them so you
        always have a 2x2 layout? Position them in some other way?
        Non-positional reasons? etc.)

        Also note that since all the months belong to a CalendarGroup, they
        will not be independent as far as scrolling goes.

        cal_0 will always have the previous arrow, cal_3 will always have the
        next arrow and they'll always be consecutive months, so that's
        something you'll need to account for when positioning them (if that is
        the goal). So, depending on your use case, 2 separate 2-page
        CalendarGroups maybe a more suitable solution (with some additional
        code to combine
        selected dates)

        Hope that helps,

        - Satyen
      Your message has been successfully submitted and would be delivered to recipients shortly.