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>
それはAMDのロードに問題があることを感じているが、それは唯一の推測 –