2017-01-30 4 views
1

Perの答えはソリューションの大きな部分を占めていました。完全性のためにここで私はやらなければならなかったのです。Xpages:ブートストラップテーマで動作するFullCalendarを取得する

まず、Perが言及したAMDの問題を修正する必要がありました。

次に、適切なライブラリが適切な順序でロードされていることを確認するために、Xpageを変更する必要がありました。このうちのいくつかは試行錯誤して行われました。

リソース集約設定をtrueに設定する必要がありましたが、この設計要素に対してのみ設定してください。私はなぜなのか理解していない。

次に、2つのライブラリと1つのCSSライブラリを追加する必要がありました。モーメントライブラリは最初に読み込まれ、ヘッドタグを使用してロードされなければなりませんでした。次に、fullcalendar.min.jsファイルを読み込む必要がありましたが、headTagではなく単純なスクリプトを使用してから、CSSを使用してスタイルタグを使用して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> 

テーマコード:

<!-- 
    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 
関連する問題