Xpages：让FullCalendar使用引导主题

佩尔的回答是解决方案的重要组成部分。为了完整性，我最后不得不做的就是这样

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

首先，我必须修复Per提到的AMD问题

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

然后我不得不修改我的Xpage，以确保以正确的顺序加载正确的库。其中一些是通过反复试验完成的

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

我必须将资源聚合设置设置为true，但仅限于此设计元素。我不明白为什么

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

然后我需要添加2个js库和一个css库。必须首先加载力矩库，并使用head标记。接下来，我必须加载fullcalendar.min.js文件，但不使用headTag，而是一个简单的脚本，然后使用样式标记加载fullcalendar的css

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

这样做一切都奏效了。下面是代码，下面是我的主题

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

设计规范：

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

我试着把我需要在我的主题中使用的js/css，按照它们需要使用的顺序，但是这也不起作用

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

我在许多应用程序中都使用scoBootstrap，不想在需要日历的应用程序中使用它。一定有办法让我的javascript生活在一起

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

以下是Xpage的代码：

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

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

    <xp:this.properties>
        <xp:parameter name="xsp.resources.aggregate" value="true" />
     </xp:this.properties>

    <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="KendoUI/js/jquery.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/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/fullcalendar.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/fullcalendar.min.js" />
             </xp:this.attributes>
         </xp:headTag>
         <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources> 

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

</xp:view>

---

FullCalendar使用AMD加载。Dojo和AMD加载冲突，因此请从fullcalendar.min.js中删除AMD部分

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

从以下位置更改源的第一部分：

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

!function(t){"function"==typeof define&&define.amd?define

为此：

<xp:this.properties>
    <xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>

<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="FullCalendar/moment.min.js" />
         </xp:this.attributes>
         </xp:headTag>
        <xp:script src="FullCalendar/fullcalendar.min.js"
            clientSide="true">
        </xp:script>
        <xp:styleSheet href="FullCalendar/fullcalendar.min.css"></xp:styleSheet>
    </xp:this.resources>

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

</xp:view>

!function(t){"function"==typeof define&&false?define

---

它感觉AMD加载有问题，但这只是一个猜测