1 2 Previous Next 22 Replies Latest reply: Mar 6, 2013 4:30 AM by Vedant RSS

    Full Calendar display on form

    Vedant
      Hi,

      I am using Apex 4.2 and want to display full calender on form.

      to do this I am using

      http://www.mredkj.com/javascript/calendar.html

      link.

      i have created two items on form :P1_MONTH AND :P2_YEAR and created submit button on page.



      code defined below is given in this link.
      <html>
      <head>
      <title>Calendar</title>
      
      <script language="JavaScript" src="CalendarDisplay110.js"></script>
      <script language="JavaScript">
      <!--
      
      calendarTry = new CalendarDisplay();
      calendarTry.setNavigationOn("calendarTry");
      calendarTry.setOpenOn();
      calendarTry.setAutoCloseOn();
      calendarTry.setLinkOn("fillInFields");
      calendarTry.setDayFormat(calendarTry.TWO_LETTER);
           
      function calendarOpener(frm)
      {
           var m = frm.month.options[frm.month.selectedIndex].value;
           var d = frm.day.value;
           var y = frm.year.value;
           var showMonth = true;
           if (frm.yearMonth[1].checked)
           {
                showMonth = false;
           }
                
           if (showMonth)
           {
                calendarTry.createMonth(m, d, y);
           }
           else
           {
                calendarTry.createYear(m, d, y);
           }
           
      }
      
      function fillInFields(month, day, year)
      {
           document.frmCalendar.month.selectedIndex = month;
           document.frmCalendar.day.value = day;
           document.frmCalendar.year.value = year;
      }
      
      //-->
      </script>
      </head>
      
      <body>
      
      <form name="frmCalendar">
      <table border="1" cellpadding="5" cellspacing="0">
           <tr>
                <td>Month</td>
                <td>Day (1-31)</td>
                <td>Year (e.g. 2002)</td>
           </tr>
           <tr>
                <td align="center">
                     <select name="month">
                          <option value="0">January</option>
                          <option value="1">February</option>
                          <option value="2">March</option>
                          <option value="3">April</option>
                          <option value="4">May</option>
                          <option value="5">June</option>
                          <option value="6">July</option>
                          <option value="7">August</option>
                          <option value="8">September</option>
                          <option value="9">October</option>
                          <option value="10">November</option>
                          <option value="11">December</option>
                     </select>
                </td>
                <td align="center"><input type="text" name="day" size="3" /></td>
                <td align="center"><input type="text" name="year" size="5" value="2002" /></td>
           </tr>
           <tr>
                <td colspan="3" align="center">
                <input type="radio" name="yearMonth" value="month" checked /> Month
                <input type="radio" name="yearMonth" value="year" /> Year
                </td>
           </tr>
           <tr>
                <td colspan="3" align="center">
                <input type="button" value="Open Calendar" onclick="calendarOpener(this.form);" />
                </td>
           </tr>
      </table>
      </form>
      
      </body>
      </html>
      what changes i should in the body section of this code to use my own item :P1_MONTH and :P1_YEAR in place of html code.


      Thansk & Regards
      Vedant.

      Edited by: Vedant on Feb 25, 2013 10:01 PM
        • 1. Re: Full Calendar display on form
          jariola
          Hi,

          Just wonder why you like use this code? It is not maintained in over 10 years.
          There is "build in" calendar item and region in APEX.

          Please explain in details what you try archive.

          Regards,
          Jari
          -----
          My Blog: http://dbswh.webhop.net/htmldb/f?p=BLOG:HOME:0
          Twitter: http://www.twitter.com/jariolai
          • 2. Re: Full Calendar display on form
            Vedant
            Hi Jari,

            Thanks for reply.
            As there is option to show the full year calendar with all the months.

            I want to show this full year calendar on my apex page. So i am using this link to show the calendar with all the months on same page.

            If there is such type of functionality in oracle apex. Please Suggest me.






            Thanks & Regards
            Vedant
            • 3. Re: Full Calendar display on form
              Vedant
              Hi,
              Is there another to achive this?
              • 4. Re: Full Calendar display on form
                Nicolette
                Vedant

                You mean something [url http://apex.oracle.com/pls/apex/f?p=VANBAREN_FORUM_TRY_OUT:DATEITEMOPTIONS:0&c=VANBAREN]like this.

                This uses the normal datepicker. Whit the setting Show other months Yes and the number of months at 12.

                Nicolette
                • 5. Re: Full Calendar display on form
                  VC
                  Vedant wrote:
                  Hi,
                  Is there another to achive this?
                  You can do that simply with the built-in datepicker item:

                  *1.* Go to Settings > Highlighted Date > enter *01-JAN-2013* this can also be a variable based on page item like &PX_ITEM_NAME.

                  *2.* set Show other Months to Yes

                  *3.* set Number of Months to *[3,4]* This will display months in 3 rows and 4 columns. Enter the array that determines the number of rows and columns to display

                  See http://apex.oracle.com/pls/apex/f?p=1983:5

                  Vikram
                  • 6. Re: Full Calendar display on form
                    Vedant
                    Hi,

                    Thanks for reply .I don't want this basically.

                    basically I want to do , On page i want to create one item. This would be text field type. If I enter value 2013 and click on submit button .2013 Full year Calendar should Display On my home page. i don't want to use date picker item.
                    • 7. Re: Full Calendar display on form
                      Nicolette
                      Vedant

                      What about calendar region see the [url http://docs.oracle.com/cd/E37097_01/doc/doc.42/e35125/bldapp_cal.htm#BABEDEFB]documentation

                      Nicolette
                      • 8. Re: Full Calendar display on form
                        Vedant
                        Hi,
                        i have created already region calendar which is based on sql statement.But on a page i can see one month calendar at a time , to move to next month we use nevigation links.but i want to display region calendar with all the months on same page and want to use nevagations links for next year , not to next month.

                        Can i make changes into region calendar so that i can display with all the months.






                        Thanks & Regards
                        Vedant
                        • 9. Re: Full Calendar display on form
                          VC
                          Vedant wrote:
                          Hi,

                          Thanks for reply .I don't want this basically.

                          basically I want to do , On page i want to create one item. This would be text field type. If I enter value 2013 and click on submit button .2013 Full year Calendar should Display On my home page. i don't want to use date picker item.
                          OK, What will you do with that Full year display then? What are you trying to achieve?
                          • 10. Re: Full Calendar display on form
                            Vedant
                            Hi,
                            Full year calendar display is my project requirement . Basically what i have to do is full year calendar display on the page and when i click on any date of the month,Opportunities corresponding to that date will display as a report on next page. This is my project requirement.







                            Thanks & Regards
                            Vedant
                            • 11. Re: Full Calendar display on form
                              VC
                              Vedant wrote:
                              Hi,
                              Full year calendar display is my project requirement . Basically what i have to do is full year calendar display on the page and when i click on any date of the month,Opportunities corresponding to that date will display as a report on next page. This is my project requirement.
                              Thanks & Regards
                              Vedant
                              You can use the built-in jquery with some custom code and achieve this

                              1. Create a empty div on your page:
                              <div id="fullyear"></div>
                              2. Create a text field lets say P1_DATE

                              3. Add the below code to page header > JavaScript
                              $(function() {
                                  $("#fullyear").datepicker({
                                    numberOfMonths: [3,4],
                                    //you can set the year using page item for example replace 2013 with &PX_ITEM.
                                    defaultDate: new Date(2013, 1 - 1, 1),
                                    onSelect: function(date) {
                                          //on select populate date into a page item
                                          $s('P1_DATE',date);
                                          //submit page
                                          apex.submit({request:"ANY_REQUEST",showWait: true});
                                      }
                                  });
                              });
                              http://apex.oracle.com/pls/apex/f?p=46417:46
                              • 12. Re: Full Calendar display on form
                                Vedant
                                Hi Vc,

                                Thanks it is working.

                                I need a small help again.


                                i have placed code On my page header javacript and i replaced year with my page item. How i can create .JS file in shared component means i do not want to pass code on page header and want to call as js file in page header.How i can do this.
                                {$(function() {
                                    $("#fullyear").datepicker({
                                      numberOfMonths: [3,4],
                                      //you can set the year using page item for example replace 2013 with &PX_ITEM.
                                      defaultDate: new Date(&P3_YEAR., 1 - 1, 1),
                                      onSelect: function(date) {
                                            //on select populate date into a page item
                                            $s('P3_DATE',date);
                                            //submit page
                                            apex.submit({request:"ANY_REQUEST",showWait: true});
                                        }
                                    });
                                });
                                Thanks & Regards
                                Vedant
                                • 13. Re: Full Calendar display on form
                                  VC
                                  create a js file lets say myjs.js make sure you replace &P3_YEAR. with $v('P3_YEAR')

                                  Upload into shared components > static files

                                  And reference it using &WORKSPACE_IMAGES. or #WORKSPACE_IMAGES#

                                  See http://docs.oracle.com/cd/E37097_01/doc/doc.42/e35125/bldapp_js.htm#BABIGDIJ
                                  • 14. Re: Full Calendar display on form
                                    Vedant
                                    Hi Vc,
                                    i have created file as calender.js and stored into static files


                                    code i placed in file is
                                    <script>
                                    {$(function() {
                                        $("#fullyear").datepicker({
                                          numberOfMonths: [3,4],
                                          //you can set the year using page item for example replace 2013 with &PX_ITEM.
                                          defaultDate: new Date($v('P3_YEAR'), 1 - 1, 1),
                                          onSelect: function(date) {
                                                //on select populate date into a page item
                                                $s('P3_DATE',date);
                                                //submit page
                                                apex.submit({request:"ANY_REQUEST",showWait: true});
                                            }
                                        });
                                    });
                                    </script>
                                    and refered on page header using
                                    <script type="text/javascript" language="javascript" src="#WORKSPACE_IMAGES#calender.js"></script> statement.

                                    and placed
                                     <div id="fullyear"></div>
                                    statement on page region.

                                    is there i have to change in p3_date item in code or keep it as it is?


                                    IT IS NOT WORKING.
                                    1 2 Previous Next