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

More Simple Examples Please

Expand Messages
  • Ken Robinson
    Hi, I discovered this today and thought that if I can get the calendar portion to work, I can use it to replace my homegrown calendar. The biggest problem so
    Message 1 of 8 , Feb 14, 2006
    • 0 Attachment
      Hi,

      I discovered this today and thought that if I can get the calendar portion to work, I can use it to replace my homegrown calendar.

      The biggest problem so far is the lack of simple examples. I am a PHP coder and I've avoided Javascript as much as I could. I have been able to produce good Google and Yahoo maps using those APIs, so I'm not a complete novice.

      I finally got the simplest calendar to display, but it doesn't seem to use the CSS file.

      Here is my code:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html>
      <head>
               <title>Test Yahoo Calendars</title>
               <link type="text/css" href="calendar.css" media="screen" />
               <script type="text/javascript" src="../js/YAHOO.js"></script>
               <script type="text/javascript" src="../js/event.js"></script>
               <script type="text/javascript" src="../js/Calendar.js"></script>
               <script language="javascript">
                        var cal1;
                        function init() {
                                 cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
                                 cal1.render();
                        }
               </script>
      </head>
      <body onload="init()">
      <div style="margin-left:auto;margin-right:auto;width:600px;height:600px;display:block;border:1px solid blue">
      <div id="cal1Container"></div>
      </div>
      </body>
      </html>

      One example I would like to see would show how to use the CalendarGroup  widget. If I'm reading the documentation correctly, I could use this to construct yearly calendars.

      Another example that is needed is one that shows how to create a calendar that takes up a large portion of the page with the day boxes expanded appropriately.

      The supplied documentation is good, if you're well grounded in Javascript, but almost useless if you're not. That's where good and simple examples would be very useful.

      You can run my script at < http://www.kis-hosting.com/calendar_test/>

      Ken Robinson
    • Ken Robinson
      I m replying to my own post ... It s amazing what a good night s sleep does.. ... I forgot the rel= stylesheet clause in the statement. I ve uploaded
      Message 2 of 8 , Feb 15, 2006
      • 0 Attachment
        I'm replying to my own post ... It's amazing what a good night's sleep does..

        At 12:04 AM 2/15/2006, Ken Robinson wrote:
        I finally got the simplest calendar to display, but it doesn't seem to use the CSS file.

        Here is my code:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html>
        <head>
                 <title>Test Yahoo Calendars</title>
                 <link type="text/css" href="calendar.css" media="screen" />
        I forgot the 'rel="stylesheet"' clause in the <link> statement.

        I've uploaded my latest attempt. I've been able to change some of the look and feel of the calendar display. One thing I can't get to work, yet, is to get the day number to appear in the upper right corner of the day box.

        You can run my script at < http://www.kis-hosting.com/calendar_test/> .

        Ken
      • Christian Heilmann
        I just wondered why the examples use the body onload malarkey when you could easily re-use the events? var cal1; function init()
        Message 3 of 8 , Feb 15, 2006
        • 0 Attachment
          I just wondered why the examples use the body onload
          malarkey when you could easily re-use the events?

          <script language="javascript">
          var cal1;
          function init() {
          cal1 = new
          YAHOO.widget.Calendar("cal1","cal1Container");
          cal1.render();
          }
          YAHOO.util.Event.addListener(window, "load", init,
          null);
          </script>

          That way you can keep it in an own document and you
          don't have to hijack onload of the body exclusively
          for the calendar.







          ___________________________________________________________
          Yahoo! Messenger - NEW crystal clear PC to PC calling worldwide with voicemail http://uk.messenger.yahoo.com
        • Eric Miraglia
          Christian, That s just an oversight on our part; the way you ve written it below is the correct implementation for attaching the listener. Thanks for pointing
          Message 4 of 8 , Feb 15, 2006
          • 0 Attachment
            Christian,

            That's just an oversight on our part; the way you've written it below
            is the correct implementation for attaching the listener.

            Thanks for pointing that out.

            -Eric



            On Feb 15, 2006, at 7:38 AM, Christian Heilmann wrote:

            > I just wondered why the examples use the body onload
            > malarkey when you could easily re-use the events?
            >
            > <script language="javascript">
            > var cal1;
            > function init() {
            > cal1 = new
            > YAHOO.widget.Calendar("cal1","cal1Container");
            > cal1.render();
            > }
            > YAHOO.util.Event.addListener(window, "load", init,
            > null);
            > </script>
            >
            > That way you can keep it in an own document and you
            > don't have to hijack onload of the body exclusively
            > for the calendar.
            >
            >
            >
            >
            >
            >
            >
            > ___________________________________________________________
            > Yahoo! Messenger - NEW crystal clear PC to PC calling worldwide
            > with voicemail http://uk.messenger.yahoo.com
            >
            >
            >
            > Yahoo! Groups Links
            >
            >
            >
            >
            >
            >
            >
          • Steven Peterson
            Christian, This is a very valid point. :-) When I initially coded the examples for internal use it was before our Event utility had been developed. In
            Message 5 of 8 , Feb 15, 2006
            • 0 Attachment

              Christian,

               

              This is a very valid point. J When I initially coded the examples for internal use it was before our Event utility had been developed. In retrospect, I should go back and update the examples to do so. Thanks for pointing that out! I’ll add that to my list. J

               

              Regards,

               

              Steven Peterson

              Web Developer, Platform Engineering

              Yahoo!

               


              From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Christian Heilmann
              Sent: Wednesday, February 15, 2006 7:39 AM
              To: ydn-javascript@yahoogroups.com
              Subject: Re: [ydn-javascript] More Simple Examples Please

               

              I just wondered why the examples use the body onload
              malarkey when you could easily re-use the events?

                    <script language="javascript">
                          var cal1;
                          function init() {
                                cal1 = new
              YAHOO.widget.Calendar("cal1","cal1Container");
                                cal1.render();
                          }
                          YAHOO.util.Event.addListener(window, "load", init,
              null);
                    </script>

              That way you can keep it in an own document and you
              don't have to hijack onload of the body exclusively
              for the calendar.




                   
                   
                         
              ___________________________________________________________
              Yahoo! Messenger - NEW crystal clear PC to PC calling worldwide with voicemail http://uk.messenger.yahoo.com

            • Steven Peterson
              Great example! I love when the calendar scales to be larger. :-) To get the date to display at the top right, you can add this line to the calcell class in
              Message 6 of 8 , Feb 15, 2006
              • 0 Attachment

                Great example! I love when the calendar scales to be larger. J To get the date to display at the top right, you can add this line to the “calcell” class in the CSS:

                 

                vertical-align:top;

                 

                That should get it working for you! If you need anything else, don’t hesitate to let me know.

                 

                Regards,

                 

                Steven Peterson

                Web Developer, Platform Engineering

                Yahoo!


                From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Ken Robinson
                Sent: Wednesday, February 15, 2006 4:06 AM
                To: ydn-javascript@yahoogroups.com
                Subject: Re: [ydn-javascript] More Simple Examples Please

                 

                I'm replying to my own post ... It's amazing what a good night's sleep does..

                At 12:04 AM 2/15/2006, Ken Robinson wrote:

                I finally got the simplest calendar to display, but it doesn't seem to use the CSS file.

                Here is my code:

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html>
                <head>
                         <title>Test Yahoo Calendars</title>
                         <link type="text/css" href="calendar.css" media="screen" />


                I forgot the 'rel="stylesheet"' clause in the <link> statement.

                I've uploaded my latest attempt. I've been able to change some of the look and feel of the calendar display. One thing I can't get to work, yet, is to get the day number to appear in the upper right corner of the day box.

                You can run my script at < http://www.kis-hosting.com/calendar_test/> .

                Ken

              • Fabio Gomes
                Nice point, i had to use something simillar in the past with ajax, cause i use some templates in php that doesnt allow me to change the body onload, so i used
                Message 7 of 8 , Feb 15, 2006
                • 0 Attachment
                  Nice point, i had to use something simillar in the past with ajax, cause i use some templates in php that doesnt allow me to change the body onload, so i used this:

                  function init() {
                    some_function_here();
                   }
                  window.onload=init;

                  at least this always worked for me :)

                  On 2/15/06, Steven Peterson <peterson@... > wrote:

                  Christian,

                   

                  This is a very valid point. J When I initially coded the examples for internal use it was before our Event utility had been developed. In retrospect, I should go back and update the examples to do so. Thanks for pointing that out! I'll add that to my list. J

                   

                  Regards,

                   

                  Steven Peterson

                  Web Developer, Platform Engineering

                  Yahoo!

                   


                  From: ydn-javascript@yahoogroups.com [mailto: ydn-javascript@yahoogroups.com] On Behalf Of Christian Heilmann
                  Sent: Wednesday, February 15, 2006 7:39 AM
                  To: ydn-javascript@yahoogroups.com
                  Subject: Re: [ydn-javascript] More Simple Examples Please

                   

                  I just wondered why the examples use the body onload
                  malarkey when you could easily re-use the events?

                        <script language="javascript">
                              var cal1;
                              function init() {
                                    cal1 = new
                  YAHOO.widget.Calendar("cal1","cal1Container");
                                    cal1.render();
                              }
                              YAHOO.util.Event.addListener(window, "load", init,
                  null);
                        </script>

                  That way you can keep it in an own document and you
                  don't have to hijack onload of the body exclusively
                  for the calendar.




                       
                       
                             
                  ___________________________________________________________
                  Yahoo! Messenger - NEW crystal clear PC to PC calling worldwide with voicemail http://uk.messenger.yahoo.com



                  SPONSORED LINKS
                  C programming language Computer programming languages Java programming language
                  The c programming language C programming language Concept of programming language


                  YAHOO! GROUPS LINKS




                • Ken Robinson
                  ... Thanks. That did it. Now to add in the AJAX stuff to get the event data I currently have in MySQL databases... Ken
                  Message 8 of 8 , Feb 15, 2006
                  • 0 Attachment
                    Quoting Steven Peterson <peterson@...>:

                    > Great example! I love when the calendar scales to be larger. :-) To get the
                    > date to display at the top right, you can add this line to the "calcell"
                    > class in the CSS:
                    >
                    > vertical-align:top;
                    >
                    > That should get it working for you! If you need anything else, don't
                    > hesitate to let me know.

                    Thanks. That did it.

                    Now to add in the AJAX stuff to get the event data I currently have in MySQL
                    databases...

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