Home/ Questions/Q 5976277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T21:12:19+00:00

Today I am trying to make Adam Arshaw’s fullCalendar to work inside my page.

  • 0

Today I am trying to make Adam Arshaw’s fullCalendar to work inside my page.
I ‘ve read the documentation provided in his webpage, and also whatever question I found it might help here, in Stack overflow, but whatever I have tried so far is doomed to failure!

Basically I have three jQuery-ui tabs. I want my calendar to be shown in the third one. I don’t care if it will be pre-loaded or if it will load when I click on the link for the third tab. (OK, I confess, I have absolutely no idea which one is the case :-P). Let’s assume though, that I want it to fire when I click on the third tab.

Here is my code:

<head>
    ...        
    <link rel="stylesheet" href="common/css/fullcalendar.css" 
        type="text/css" media="screen, projection" />

    <!-- This is a custom theme downloaded from jQuery UI -->
    <link rel="stylesheet" href="common/css/jquery-ui-user_area.css" 
        type="text/css" media="screen, projection" />

    ....
    <!-- Is the following OK? -->
    <script type="text/javascript" 
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
    </script>
    <script type="text/javascript" 
        src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js">
    </script>

    <script type="text/javascript" src="common/js/fullcalendar.js"></script>
    <script type="text/javascript" src="common/js/gcal.js"></script>

    <!-- The fullCalendar initiallizing code follows: -->
    <script> 
        $(function() {
            $ ('a#plan_tab').live('click', function(){
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

                $('#plan_calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    editable: true,
                    theme: true
                });            
            });
        });
    </script>
</head>

For the latest script I have also tried:

<script> 
    $(document).ready(function(){      
        var date = new Date();
        ...     
    });
</script>

as long as other flavors and ways.

So, basically, in the html body, my calendar should be located around here:

<body>
    ...
    <section id="main_content">
        <div  class="user_area">
            <div id="area_tabs">
                <ul>
                    <li><a href="#overview">Overview</a></li>
                    <li><a href="#activity">Activity</a></li>
                    <li><a href="#plan" id="plan_tab">Travel Plan</a></li>
                </ul>
                <div id="overview">Some blahs</div>
                <div id="activity">Some other blahs</div>
                <div id="plan">
                    <!-- Here it should be me calendar! Arrrh -->
                    <div id="plan_calendar></div>
                </div>
            </div>
        </div>
     </section>
     ...
</body>

But it’s not! … Do you see any clues, where it might hiding? 😀

By the way i thought it would be helpful to have the project live somewhere (used Dropbox public folder…), so you could view the page I am talking about. It won’t stay there forever, though.
Anyway, I apologize for the lengthy questions.
Thanks in advance for your help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    there is a good reason the previous code is not working, your selectors are not correct, consider this one for example:

    $ ('a#plan').live('click', function(){
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

    there is no such Anchor with the id=”plan” in your HTML, you need to add this ID and your selector will start to work.
    I’ve modified the code inline and got the full calendar to work, but with some UI issues.

    the way it goes with me is to make the Anchor code look like this:

    <a href="#plan" id="plan">Travel Plan</a>

    and the code just worked.

    just let me know if this fixed your issue regardless of the UI ones, thanks.

    Update:
    After you modified the code, the solution has to be changed too, here is my thoughts and solution for your issue:

    The code was hooking the event using the .live() method, but since we don’t need to, handling the .click() event directly did the trick and the calendar is now working fine

    Here is the full code after these modifications. 

     $(function() {
    $ ('a#plan_tab').click(function(){
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();
                $('#plan_calendar').fullCalendar({
                header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
                },
                editable: true,
                theme: true
        });
    });
});

    let me know if it worked for you, and don’t forget to mark as answer.

    • 0