2017-01-30 55 views
1

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

感觉与AMD装载一个问题,但它只是一种猜测 –

回答

1

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

更改源从这个第一部分:

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

这样:

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