Xpages: Получение FullCalendar для работы с темой начальной загрузки

Question

Ответ Перга был большой частью решения. Для полноты это то, что мне пришлось сделать.

Во-первых, мне пришлось исправить проблему AMD, о которой упоминалось.

Затем мне пришлось изменить мою Xpage, чтобы убедиться, что соответствующие библиотеки загружены в правильном порядке. Некоторые из них были сделаны с проб и ошибок.

Мне пришлось установить для параметра агрегации ресурсов значение true, но только для этого элемента дизайна. Я не понимаю, почему.

Тогда мне нужно было добавить 2 библиотеки js и одну библиотеку css. Сначала нужно было загрузить библиотеку, и с помощью тега заголовка. Затем мне пришлось загрузить файл fullcalendar.min.js, но НЕ использовать headTag, но простой скрипт, а затем css для fullcalendar, используя тег стиля.

Выполнение этого все сработало. Ниже приведен код, и ниже, что моя тема .....

Design Код:

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

======== ================================================== ========

Я хочу использовать FullCalendar в моих приложениях Xpages.

Этот код будет работать, если я не использую стандартную тему. Так «webstandard» и «платформа по умолчанию» не проблема, но Bootstrap не работает, ни моя тема, которая проходит самозагрузки (смотри ниже)

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

Answer 1

FullCalendar использует AMD загрузки. Dojo и AMD загружают конфликты, поэтому удалите часть AMD из fullcalendar.min.js.

Изменение первой части источника от этого:

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

к этому:

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