Xpages: Getting FullCalendar to work with a bootstrap theme

问题

Per's answer was a big part of the solution. For completeness here is what I ended up having to do.

First, I had to fix the AMD problem that Per mentioned.

Then I had to modify my Xpage to make sure that the proper libraries were loaded in the proper order. Some of this was done with trial and error.

I had to set the resource aggregation setting to true, but only for this design element. I do not understand why.

Then I needed to add 2 js libraries and one css library. The moment library had to be loaded first and by using a the head tag. Next I had to load the fullcalendar.min.js file but NOT using the headTag but a simple script, and then the css for fullcalendar using the style tag.

Doing this everything worked. Below is the code, and below that is my theme.....

Design code:

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

Theme code:

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

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

I want to use FullCalendar in my Xpages applications.

This code will work, as long as I don't use my standard theme. So "webstandard" and "platform default" are no problem, but Bootstrap doesn't work, nor my theme which extends bootstrap (see below)

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

When I try to use my theme I get this error:

Uncaught TypeError: calCon.fullCalendar is not a function

I tried putting the js/css that I need to use in my theme, in the order that they need to be used, but this didn't work either.

I use the scoBootstrap throughout many applications, and don't want to not use it in applications that need a calendar. There must be some way for my javascript to live together...

Here is the code for the 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>

回答1:

FullCalendar uses AMD loading. Dojo and AMD loading conflicts so remove the AMD part from fullcalendar.min.js.

Change the first part of the source from this:

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

to this:

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

来源：https://stackoverflow.com/questions/41947304/xpages-getting-fullcalendar-to-work-with-a-bootstrap-theme

标签

fullcalendar

xpages