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

YUI Calendar not skinned properly when re-using the original object

Expand Messages
  • tacofleur
    I create a calendar once in the doDisplayCalendar function, then I want to re-use that instance but display it under other containers, and fields. All seems to
    Message 1 of 6 , Sep 2, 2008
    • 0 Attachment
      I create a calendar once in the doDisplayCalendar function, then I
      want to re-use that instance but display it under other containers,
      and fields. All seems to work well except that the calendar is not
      skinned the second time.

      Does anyone have any idea on this?

      Cheers
      Following is the code.

      <input class="input" type="text" name="fldC74B0DA9-C45F-4AFB-A4B5-
      1ECD69D97958" id="myDateField" maxlength="" size="10" value="28-08-
      2008"><a href="##" onclick="return false;" class="csl"><img
      src="/certainedge/_resource/generic/image/icon/calendar_16.gif"
      onclick="doDisplayCalendar( 'myDateField', 'cal1Container' );"></a>
      <div id="cal1Container"></div>


      <label title="The due date of the task" for="A29B9DC9-FEC9-40D4-908C-
      905EC31F109C">Due Date</label>
      <input id="myDateField2" class="input" type="text" name="fldA29B9DC9-
      FEC9-40D4-908C-905EC31F109C" maxlength="" size="10" value="">
      <div id="test123"></div><a href="##" onclick="test( 'myDateField2' );
      return false">Test</a>


      <script>
      YAHOO.namespace( "YAHOO.example.calendar" );
      var renderDateField = null;
      function handleSelect( type, args, obj ) {
      var dates = args[ 0 ];
      var date = dates[ 0 ];
      var year = date[ 0 ], month = date[ 1 ], day = date[
      2 ];
      var txtDate1 = document.getElementById(
      renderDateField );
      txtDate1.value = month + "/" + day + "/" + year;
      YAHOO.example.calendar.cal1.hide();
      }
      function doDisplayCalendar( dateField, calendarContainer ) {
      renderDateField = dateField;
      if ( !YAHOO.example.calendar.cal1 ) {
      YAHOO.example.calendar.cal1 = new
      YAHOO.widget.Calendar( "cal1", calendarContainer, { close:true,
      navigator:true, HIDE_BLANK_WEEKS:true } );

      YAHOO.example.calendar.cal1.selectEvent.subscribe(
      handleSelect, YAHOO.example.calendar.cal1, true );
      YAHOO.example.calendar.cal1.render();
      }
      YAHOO.example.calendar.cal1.reset();
      YAHOO.example.calendar.cal1.show();
      }
      function test( dateField ) {
      renderDateField = dateField;
      YAHOO.example.calendar.cal1.oDomContainer =
      document.getElementById( "test123" );
      YAHOO.example.calendar.cal1.render();
      }
      </script>
    • Eric Miraglia
      tacofleur, Try moving the class yui-skin-sam to the element; if that doesn t resolve the problem, please provide a link to your page. Regards, Eric
      Message 2 of 6 , Sep 3, 2008
      • 0 Attachment
        tacofleur,

        Try moving the class yui-skin-sam to the <body> element; if that doesn't resolve the problem, please provide a link to your page.

        Regards,
        Eric


        On Sep 2, 2008, at 11:10 PM, tacofleur wrote:

        I create a calendar once in the doDisplayCalendar function, then I 
        want to re-use that instance but display it under other containers, 
        and fields. All seems to work well except that the calendar is not 
        skinned the second time.

        Does anyone have any idea on this?

        Cheers
        Following is the code.

        <input class="input" type="text" name="fldC74B0DA9- C45F-4AFB- A4B5-
        1ECD69D97958" id="myDateField" maxlength="" size="10" value="28-08-
        2008"><a href="##" onclick="return false;" class="csl"> <img 
        src="/certainedge/ _resource/ generic/image/ icon/calendar_ 16.gif" 
        onclick="doDisplayC alendar( 'myDateField' , 'cal1Container' );"></a>
        <div id="cal1Container" ></div>

        <label title="The due date of the task" for="A29B9DC9- FEC9-40D4- 908C-
        905EC31F109C" >Due Date</label>
        <input id="myDateField2" class="input" type="text" name="fldA29B9DC9-
        FEC9-40D4-908C- 905EC31F109C" maxlength="" size="10" value="">
        <div id="test123" ></div><a href="##" onclick="test( 'myDateField2' ); 
        return false">Test< /a>

        <script>
        YAHOO.namespace( "YAHOO.example. calendar" );
        var renderDateField = null;
        function handleSelect( type, args, obj ) {
        var dates = args[ 0 ];
        var date = dates[ 0 ];
        var year = date[ 0 ], month = date[ 1 ], day = date[ 
        2 ];
        var txtDate1 = document.getElement ById( 
        renderDateField );
        txtDate1.value = month + "/" + day + "/" + year;
        YAHOO.example. calendar. cal1.hide( );
        }
        function doDisplayCalendar( dateField, calendarContainer ) {
        renderDateField = dateField;
        if ( !YAHOO.example. calendar. cal1 ) {
        YAHOO.example. calendar. cal1 = new 
        YAHOO.widget. Calendar( "cal1", calendarContainer, { close:true, 
        navigator:true, HIDE_BLANK_WEEKS: true } );

        YAHOO.example. calendar. cal1.selectEvent .subscribe( 
        handleSelect, YAHOO.example. calendar. cal1, true );
        YAHOO.example. calendar. cal1.render( );
        }
        YAHOO.example. calendar. cal1.reset( );
        YAHOO.example. calendar. cal1.show( );
        }
        function test( dateField ) {
        renderDateField = dateField;
        YAHOO.example. calendar. cal1.oDomContain er = 
        document.getElement ById( "test123" );
        YAHOO.example. calendar. cal1.render( );
        }
        </script>


      • tacofleur
        Hi, the class is on the body The page is on an Intranet, all I cna do is the pasted code in the original email. Thanks
        Message 3 of 6 , Sep 3, 2008
        • 0 Attachment
          Hi,
          the class is on the body
          <body class=" yui-skin-sam">

          The page is on an Intranet, all I cna do is the pasted code in the
          original email.

          Thanks
        • bretlevy
          Try looking at this demo and see if it helps... http://sandbox.bluelinkdemo.com/sandbox/caltest1.htm ~~bret ... 908C- ... name= fldA29B9DC9- ... (
          Message 4 of 6 , Sep 4, 2008
          • 0 Attachment
            Try looking at this demo and see if it helps...

            http://sandbox.bluelinkdemo.com/sandbox/caltest1.htm

            ~~bret


            --- In ydn-javascript@yahoogroups.com, "tacofleur" <taco.fleur@...>
            wrote:
            >
            > I create a calendar once in the doDisplayCalendar function, then I
            > want to re-use that instance but display it under other containers,
            > and fields. All seems to work well except that the calendar is not
            > skinned the second time.
            >
            > Does anyone have any idea on this?
            >
            > Cheers
            > Following is the code.
            >
            > <input class="input" type="text" name="fldC74B0DA9-C45F-4AFB-A4B5-
            > 1ECD69D97958" id="myDateField" maxlength="" size="10" value="28-08-
            > 2008"><a href="##" onclick="return false;" class="csl"><img
            > src="/certainedge/_resource/generic/image/icon/calendar_16.gif"
            > onclick="doDisplayCalendar( 'myDateField', 'cal1Container' );"></a>
            > <div id="cal1Container"></div>
            >
            >
            > <label title="The due date of the task" for="A29B9DC9-FEC9-40D4-
            908C-
            > 905EC31F109C">Due Date</label>
            > <input id="myDateField2" class="input" type="text"
            name="fldA29B9DC9-
            > FEC9-40D4-908C-905EC31F109C" maxlength="" size="10" value="">
            > <div id="test123"></div><a href="##" onclick="test
            ( 'myDateField2' );
            > return false">Test</a>
            >
            >
            > <script>
            > YAHOO.namespace( "YAHOO.example.calendar" );
            > var renderDateField = null;
            > function handleSelect( type, args, obj ) {
            > var dates = args[ 0 ];
            > var date = dates[ 0 ];
            > var year = date[ 0 ], month = date[ 1 ], day = date[
            > 2 ];
            > var txtDate1 = document.getElementById(
            > renderDateField );
            > txtDate1.value = month + "/" + day + "/" + year;
            > YAHOO.example.calendar.cal1.hide();
            > }
            > function doDisplayCalendar( dateField, calendarContainer ) {
            > renderDateField = dateField;
            > if ( !YAHOO.example.calendar.cal1 ) {
            > YAHOO.example.calendar.cal1 = new
            > YAHOO.widget.Calendar( "cal1", calendarContainer, { close:true,
            > navigator:true, HIDE_BLANK_WEEKS:true } );
            >
            > YAHOO.example.calendar.cal1.selectEvent.subscribe(
            > handleSelect, YAHOO.example.calendar.cal1, true );
            > YAHOO.example.calendar.cal1.render();
            > }
            > YAHOO.example.calendar.cal1.reset();
            > YAHOO.example.calendar.cal1.show();
            > }
            > function test( dateField ) {
            > renderDateField = dateField;
            > YAHOO.example.calendar.cal1.oDomContainer =
            > document.getElementById( "test123" );
            > YAHOO.example.calendar.cal1.render();
            > }
            > </script>
            >
          • tacofleur
            Thanks, but it looks like that is not re-using the original calendar created. Cheers
            Message 5 of 6 , Sep 4, 2008
            • 0 Attachment
              Thanks, but it looks like that is not re-using the original calendar
              created.

              Cheers
            • bretlevy
              Hi: Actually, it is using the same calendar object each time. The guts of the logic is in this code: // // POPUP CALENDAR HELPER FUNCTIONS //
              Message 6 of 6 , Sep 4, 2008
              • 0 Attachment
                Hi:

                Actually, it is using the same calendar object each time. The guts
                of the logic is in this code:

                //
                // POPUP CALENDAR HELPER FUNCTIONS
                // ===============================
                //

                var calInit = true;
                var calObj;
                var calElM;
                var calElD;
                var calElY;

                function popupCalendar (elM, elD, elY, elBut) {

                if (!YAHOO.util.Dom.inDocument('popupCalContainer')) return;

                calElM = elM;
                calElD = elD;
                calElY = elY;

                var msel = getElement(elM);
                var dsel = getElement(elD);
                var ysel = getElement(elY);
                var m = msel.options[msel.selectedIndex].value;
                var d = dsel.options[dsel.selectedIndex].value;
                var y = ysel.options[ysel.selectedIndex].value;
                var my = m + '/' + y;
                var mdy = m + '/' + d + '/' + y;

                if (calInit) {
                calInit = false;
                calObj = new YAHOO.widget.Calendar
                ('popupCal', 'popupCalContainer', { title:'Select Date...',
                pageDate:my, selected:mdy, close:true });
                calObj.selectEvent.subscribe (popupCalendarHandler);
                }
                else {
                calObj.cfg.setProperty ('pageDate', my, false);
                calObj.cfg.setProperty ('selected', mdy, false);
                }

                var xy = YAHOO.util.Dom.getXY(elBut);
                xy[0] += 20;
                xy[1] += 10;
                calObj.render();
                calObj.show();
                YAHOO.util.Dom.setXY ('popupCalContainer', xy, false);

                }

                function popupCalendarHandler (type, args, obj) {

                var dates = args[0];
                var date = dates[0];
                setOptionByValue (getElement(calElM),date[1]);
                setOptionByValue (getElement(calElD),date[2]);
                setOptionByValue (getElement(calElY),date[0]);
                calObj.hide();

                }

                As you can see, it checks to see if it has already instantiated a
                calendar object on the page, and if so, it re-uses that same object
                (via global variables, sorry, I am lazy about namespacing or bundling
                variables in "classes").

                It also uses a preset div that it checks to see if it is on the
                page. This is not necessary, as you could put the object right in
                the body for simplicity.

                The code above is referenced in a JS file loaded by caltest1.htm
                (bluelink.js). Feel free to puruse it if you like.

                ~~bret


                --- In ydn-javascript@yahoogroups.com, "tacofleur" <taco.fleur@...>
                wrote:
                >
                > Thanks, but it looks like that is not re-using the original
                calendar
                > created.
                >
                > Cheers
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.