带有完整日历 2.2.5 的 XP页面

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

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 2

我认为FullCalender在v2中开始使用AMD加载器来制作他们的JavaScript。这在XPages中的Dojo中效果不佳。有关更多详细信息和可能的解决方案，请参阅我的答案 这里.

Answer 3

问题在于 - 就像马克提到的 - 当前版本使用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>

或

加载时刻.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) {
;;

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

编辑我刚刚看到了托马斯的回答 - 这是最优雅的方式：-）