xpage with fullcalendar 2.2.5 - fullcalendar

Question

I'd like to use fullCalendar in my xpage. It works with fullCalendar 1.6.7, not with 2.2.5 (nothing is displayed).
The sources are copied in package Explorer. This code works with the 1.6.7 sources:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="fullcalendar/fullcalendar.css"></xp:styleSheet>
<xp:script src="js/jquery.min.js" clientSide="true"
type="text/javascript"></xp:script>
<xp:script src="fullcalendar/fullcalendar.min.js"
clientSide="true" type="text/javascript"></xp:script>
</xp:this.resources>
<xp:panel id="CalendarContainer"></xp:panel>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[var calCon = $("[id$=CalendarContainer]");
calCon.fullCalendar({});]]></xp:this.value>
</xp:scriptBlock>
The following code doesn't work with the 2.2.5 sources:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="fullcalendar/fullcalendar.min.css"></xp:styleSheet>
<xp:script src="js/moment.min.js" clientSide="true"
type="text/javascript"></xp:script>
<xp:script src="js/jquery.min.js" clientSide="true"
type="text/javascript"></xp:script>
<xp:script src="fullcalendar/fullcalendar.min.js"
clientSide="true" type="text/javascript"></xp:script>
</xp:this.resources>
<xp:panel id="CalendarContainer"></xp:panel>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[var calCon = $("[id$=CalendarContainer]");
calCon.fullCalendar({});]]></xp:this.value>
</xp:scriptBlock>
</xp:view>
Any ideas?

Answer 1

Mark is right, You need to load the libraries before dojo
Here is the working code
<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="jquery-2.1.3.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="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.min.js" />
</xp:this.attributes>
</xp:headTag>
<xp:styleSheet href="fullcalendar.min.css"></xp:styleSheet>
</xp:this.resources>
<xp:panel id="CalendarContainer"></xp:panel>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[var calCon = $(".cal");
calCon.fullCalendar({});]]></xp:this.value>
</xp:scriptBlock>
</xp:view>

Answer 2

I think that FullCalender started using an AMD loader for their JavaScript in v2. That doesn't play well with Dojo in XPages. See my answer here for more details and a possible solution.

Answer 3

The problem is - like Mark mentioned - that the current version uses AMD to load another library called "moment". This can be examined in the uncrompressed version of the fullcalendar.js file at the beginning. I made it working like this:
Create a theme and load all the resources there like
<theme
extends="yeti"
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>bower_components/moment/moment.js</href>
</resource>
<resource>
<content-type>application/x-javascript</content-type>
<href>bower_components/fullcalendar/dist/fullcalendar.js</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>bower_components/fullcalendar/dist/fullcalendar.min.css</href>
</resource>
OR
load the moment.js also in your page resources separately.
Then open the fullcalendar.js file and edit the top of the code as follows (check the comments I made):
/*!
* FullCalendar v2.2.5
* Docs & License: http://arshaw.com/fullcalendar/
* (c) 2013 Adam Shaw
*/
(function(factory) {
/*
if (typeof define === 'function' && define.amd) {
define([ 'jquery', 'moment' ], factory);
}
else {
*/
factory(jQuery, moment);
//}
})(function($, moment) {
;;
I used the uncompressed version here to find the code but the compressed one is not such as obfuscated, so you should be able to add those comments there, too.
EDIT
I just saw Thomas' answer - that's the most elegant way to do it :-)