2014-02-25 5 views
0

IBM Worklight 6.1.0을 사용하여 개발 한 응용 프로그램에 FullCalendar (v1.6.4) 라이브러리를 통합하려고합니다.IBM Worklight - jQuery FullCalendar 라이브러리가 표시되지 않습니다.

캘린더 컨트롤이 시뮬레이터에서 올바르게로드되고 작동합니다. 동일한 응용 프로그램이 디바이스 (아이 패드, 안드로이드)에 설치되어 그러나 때 달력 컨트롤이로드되지 않으며 다음과 같은 오류가 발생합니다 :

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

코드 :

<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 --> 
+0

코드 jquery와 jquery-ui가 두 번 왜 생겼는지 확신 할 수 없습니다. –

+0

코드에서 가장 중요한 비트가 누락되었습니다. - 어디서 어떻게 사용하고 있습니까?! –

+0

내 대답보기. 이 질문을 해결할 수 있습니까? –

답변

0

당신은을 추가하지 않은를 귀하의 질문에 대한 가장 중요하고 관련성있는 정보, 즉 귀하가 그것을 정확히 구현 한 방법. HEAD 요소의 참조는 좋은 있지만, 또한 전혀 도움이되지 않습니다 ...

나는 아래 수행하고 나를 위해 잘 작동 :

공통 \ 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> 

공통 \ main.js

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

최종 결과 (Android 4.4를 실행하는 Nexus 5에서는 동일하지만 iOS에서는 동일합니다.) enter image description here

관련 문제