Question

我想在我的xpage中使用fullCalendar。它适用于fullCalendar 1.6.7，而不是2.2.5（不显示任何内容）。源包将复制到包资源管理器中。此代码适用于1.6.7源：

<?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>

有什么想法吗？

Answer 1

我认为FullCalendar在v2中开始使用AMD加载器来实现他们的JavaScript。这与XPage中的Dojo不一致。有关详细信息和可能的解决方案，请参阅我的回答here。

Answer 2

Mark是对的，你需要在dojo之前加载库这是工作代码

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

Answer 3

问题是 - 像Mark提到的那样 - 当前版本使用AMD来加载另一个名为“moment”的库。这可以在开头的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>

OR

分别在页面资源中加载moment.js。

然后打开fullcalendar.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) {

;;

我在这里使用了未压缩的版本来查找代码，但是压缩的代码并没有被混淆，所以你也应该能够在那里添加这些注释。

修改我刚刚看到托马斯的答案 - 这是最优雅的方式： - ）

xpage with fullcalendar 2.2.5

3 个答案: