IBM Worklight - jQuery FullCalendar library not getting displayed

StackOverflow https://stackoverflow.com//questions/22010253

Question

I am trying to integrate the FullCalendar(v1.6.4) library into my application, developed using IBM Worklight 6.1.0.

The calendar control loads and functions properly in the simulator. However when the same application is installed in a device (iPad, Android), the calendar control does not load and it throws the following error:

'undefined' is not a function (evaluating '$('#calendar').fullCalendar')

Code:

<script type="text/javascript" src="js/jsapi/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jsapi/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jsapi/jquery-ui.js"></script>
<script type="text/javascript" src="js/general.js"></script>

<script type="text/javascript" src="js/moment.min.js"></script>

<!-- Calendar Starts Here -->

<link href="css/fullcalendar.css" rel='stylesheet' />
<link href="css/fullcalendar.print.css" rel='stylesheet' media='print' />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>  

<script src="js/fullcalendar.min.js"></script>
<!-- Calendar Ends Here -->
Was it helpful?

Solution

You did not add the most crucial and relevant information to your question, namely how exactly you have implemented it. The references in the HEAD element are nice, but also are not helpful at all...

I have done the below and it works fine for me:

common\index.html

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>CalenderApp</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
            <link rel="stylesheet" href="css/main.css">
            <link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.1.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
            <script src="jqueryMobile/jquery.mobile-1.4.1.js"></script>

            <!-- Calendar -->
            <link rel="stylesheet" href="css/fullcalendar.css">
            <script src="js/fullcalendar.js"></script>
            <script src="js/gcal.js"></script>
            <!-- End Calendar -->

        </head>
        <body style="display: none;">
            <div data-role="page" id="page">
                <div data-role="content" style="padding: 15px">
                    <div id='calendar'></div>
                </div>
            </div>
            <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

common\main.js

function wlCommonInit(){
     $('#calendar').fullCalendar({
         weekends: false
     });
}

End result (in Nexus 5 running Android 4.4, but will be the same in iOS) enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top