This discussion is archived
1 2 Previous Next 22 Replies Latest reply: Mar 6, 2013 2:30 AM by Vedant RSS

Full Calendar display on form

Vedant Explorer
Currently Being Moderated
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 Guru
    Currently Being Moderated
    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 Explorer
    Currently Being Moderated
    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 Explorer
    Currently Being Moderated
    Hi,
    Is there another to achive this?
  • 4. Re: Full Calendar display on form
    Nicolette Expert
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Explorer
    Currently Being Moderated
    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 Expert
    Currently Being Moderated
    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 Explorer
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Explorer
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Explorer
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Explorer
    Currently Being Moderated
    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

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points