Per的答案是解决方案的重要组成部分。为了完整起见,我最终不得不这样做。Xpages:让FullCalendar与引导主题一起工作
首先,我必须解决Per提到的AMD问题。
然后我不得不修改我的Xpage,以确保正确的库加载正确的顺序。其中一些是通过试验和错误完成的。
我必须将资源聚合设置设置为true,但仅限于此设计元素。我不懂为什么。
然后,我需要添加2个js库和一个css库。时刻库必须首先加载并使用头标签。接下来,我必须加载fullcalendar.min.js文件,但不是使用headTag,而是使用简单脚本,然后使用style标记使用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>
主题代码:
<!--
Use this pattern to include resources (such as style sheets
and JavaScript files that are used by this theme.
-->
<theme
extends="Bootstrap3"
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>/.ibmxspres/domino/KendoUI/js/jquery.min.js</href>
</resource>
--><resource>
<content-type>text/css</content-type>
<href>/.ibmxspres/domino/KendoUI/styles/kendo.common.min.css</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>/.ibmxspres/domino/KendoUI/styles/kendo.blueopal.min.css</href>
</resource>
<resource>
<content-type>application/x-javascript</content-type>
<href>/.ibmxspres/domino/KendoUI/js/kendo.all.min.js</href>
</resource>
</theme>
======== ================================================== ========
我想在我的Xpages应用程序中使用FullCalendar。
只要我不使用我的标准主题,此代码将起作用。因此,“webstandard”和“平台默认的”都没有问题,但引导不起作用,也不是我的主题延伸引导(见下文)
<theme
extends="Bootstrap3"
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>/.ibmxspres/domino/KendoUI/js/jquery.min.js</href>
</resource>
--><resource>
<content-type>text/css</content-type>
<href>/.ibmxspres/domino/KendoUI/styles/kendo.common.min.css</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>/.ibmxspres/domino/KendoUI/styles/kendo.blueopal.min.css</href>
</resource>
<resource>
<content-type>application/x-javascript</content-type>
<href>/.ibmxspres/domino/KendoUI/js/kendo.all.min.js</href>
</resource>
</theme>
当我尝试使用我的主题我得到这个错误:
Uncaught TypeError: calCon.fullCalendar is not a function
我试着把我需要在我的主题中使用的js/css,按照它们需要使用的顺序,但是这也不起作用。
我在许多应用程序中使用scoBootstrap,并且不想而不是在需要日历的应用程序中使用它。必须有某种方式为我的JavaScript来一起生活...
下面是XPAGE代码:
<?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>
感觉与AMD装载一个问题,但它只是一种猜测 –