带有全日历 2.2.5 的 xpage

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

马克是对的，你需要在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 2

我认为 FullCalender 在 v2 中开始为他们的 JavaScript 使用 AMD 加载程序。这与 XPages 中的 Dojo 不兼容。有关更多详细信息和可能的解决方案，请参阅我的回答 here。

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>

或

在您的页面资源中也单独加载 moment.js。

然后打开fullcalendar.js文件，编辑最上面的代码如下（查看我做的cmets）：

    /*!
 * 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) {

;;

我在这里使用了未压缩的版本来查找代码，但压缩的版本没有混淆，所以你应该也可以在那里添加那些cmets。

编辑 我刚刚看到了 Thomas 的回答——这是最优雅的方式 :-)