2015-01-08 2 views
0

내 xpage에서 fullCalendar를 사용하고 싶습니다. FullCalendar 1.6.7에서는 작동하지만 2.2.5에서는 작동하지 않습니다 (아무 것도 표시되지 않음). 소스가 패키지 탐색기에 복사됩니다. 이 코드는 1.6.7 소스와 함께 작동 :xpage with fullcalendar 2.2.5

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 
<xp:this.resources> 
    <xp:styleSheet href="fullcalendar/fullcalendar.css"></xp:styleSheet> 

    <xp:script src="js/jquery.min.js" clientSide="true" 
     type="text/javascript"></xp:script> 
    <xp:script src="fullcalendar/fullcalendar.min.js" 
     clientSide="true" type="text/javascript"></xp:script> 
</xp:this.resources> 

<xp:panel id="CalendarContainer"></xp:panel> 
<xp:scriptBlock id="scriptBlock1"> 
    <xp:this.value><![CDATA[var calCon = $("[id$=CalendarContainer]"); 
calCon.fullCalendar({});]]></xp:this.value> 
</xp:scriptBlock> 

다음 코드는 2.2.5 소스와 함께 작동하지 않습니다

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 
<xp:this.resources> 
    <xp:styleSheet href="fullcalendar/fullcalendar.min.css"></xp:styleSheet> 

    <xp:script src="js/moment.min.js" clientSide="true" 
     type="text/javascript"></xp:script> 

    <xp:script src="js/jquery.min.js" clientSide="true" 
     type="text/javascript"></xp:script> 

    <xp:script src="fullcalendar/fullcalendar.min.js" 
     clientSide="true" type="text/javascript"></xp:script> 

</xp:this.resources> 

<xp:panel id="CalendarContainer"></xp:panel> 
<xp:scriptBlock id="scriptBlock1"> 
    <xp:this.value><![CDATA[var calCon = $("[id$=CalendarContainer]"); 
calCon.fullCalendar({});]]></xp:this.value> 
</xp:scriptBlock> 
</xp:view> 

어떤 아이디어?

+0

가능한 중복 :-) 그것을 할 수있는 가장 우아한 방법을 http://stackoverflow.com/ 질문/24307884/eonasdan-datetimepicker-for-bootstrap-3-in-xpages) – AeroX

답변

3

마크가 옳다, 당신은 작업 코드를 도장 여기
전에 라이브러리를로드하는 것입니다 필요

<div class="cal"></div> 
<xp:this.resources> 
    <xp:headTag tagName="script"> 
     <xp:this.attributes> 
      <xp:parameter name="type" value="text/javascript" /> 
      <xp:parameter name="src" value="jquery-2.1.3.min.js" /> 
     </xp:this.attributes> 
    </xp:headTag> 
    <xp:headTag tagName="script"> 
     <xp:this.attributes> 
      <xp:parameter name="type" value="text/javascript" /> 
      <xp:parameter name="src" value="moment.min.js" /> 
     </xp:this.attributes> 
    </xp:headTag> 
    <xp:headTag tagName="script"> 
     <xp:this.attributes> 
      <xp:parameter name="type" value="text/javascript" /> 
      <xp:parameter name="src" value="fullcalendar.min.js" /> 
     </xp:this.attributes> 
    </xp:headTag> 
    <xp:styleSheet href="fullcalendar.min.css"></xp:styleSheet> 
</xp:this.resources>  

<xp:panel id="CalendarContainer"></xp:panel> 
<xp:scriptBlock id="scriptBlock1"> 
<xp:this.value><![CDATA[var calCon = $(".cal"); 
calCon.fullCalendar({});]]></xp:this.value> 
</xp:scriptBlock> 
</xp:view> 
4

FullCalender가 v2에서 JavaScript 용 AMD 로더를 사용하기 시작했다고 생각합니다. XPages에서 Dojo와 잘 작동하지 않습니다. 자세한 내용 및 가능한 해결 방법은 내 대답 here을 참조하십시오.

1

문제는 - 마크 언급처럼 - 현재 버전에 AMD를 사용하는 "순간"이라는 다른 라이브러리를로드하십시오. 이것은 초기에 fullcalendar.js 파일의 압축되지 않은 버전에서 검사 할 수 있습니다.

테마를 만들고 별도로 페이지 자원도

<theme 
extends="yeti" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd"> 
<resource> 
    <content-type>application/x-javascript</content-type> 
    <href>bower_components/moment/moment.js</href> 
</resource> 
<resource> 
    <content-type>application/x-javascript</content-type> 
    <href>bower_components/fullcalendar/dist/fullcalendar.js</href> 
</resource> 
<resource> 
    <content-type>text/css</content-type> 
    <href>bower_components/fullcalendar/dist/fullcalendar.min.css</href> 
</resource> 

또는

부하처럼 거기 moment.js을 모든 자원을로드 : 나는 이런 식으로 작업했다.

/*! 
* FullCalendar v2.2.5 
* Docs & License: http://arshaw.com/fullcalendar/ 
* (c) 2013 Adam Shaw 
*/ 

(function(factory) { 
/* 
    if (typeof define === 'function' && define.amd) { 
     define([ 'jquery', 'moment' ], factory); 
    } 
    else { 
    */ 
     factory(jQuery, moment); 
    //} 
})(function($, moment) { 

;; 

내가 코드를 보려면 여기를 압축되지 않은 버전을 사용하지만, 압축 된 하나입니다

그런 다음 fullcalendar.js 파일을 열고 다음과 같이 코드의 상단을 편집 (내가 만든 코멘트를 확인) 난독 화와 같은 것은 아니기 때문에 거기에 덧글을 추가 할 수 있어야합니다.

난 그냥 토마스 '대답했다 편집 - 그 ([xPages에서 부트 스트랩 3 Eonasdan에있는 DateTimePicker]의