As you might or might not have known, I've been striving for a calendar in XPages since XPages were introduced. I created the XPages Calendar project which was a poor attempt at building a calendar. When I built it the extensibility API was not available and neither was the Extension Library. So, while it basically worked, it was not a very elegant implementation, especially the data handling.
I recently had a need for a calendar implementation that met a few different criteria:
-
Must be responsive
-
Must work in a mobile interface
-
Must be functional and offer Month, Week and Day views
-
Must be able to feed it events via REST
In steps the jQuery Plugin called FullCalendar. This plugin seems to be very solid. It works well in the Extension Library mobile components, can get it's content via REST and has all the views above plus a couple of others. This plugin has been a joy to work with and produces some rather nice looking calendars on a full on browser, phone and tablet, which is certainly a bonus.
To implement this calendar is quite simple and just takes a bit of CSJS to make it work. Here is an example of the REST calendar in the demo db.
var calCon = $("[id$=calendarContainer1]");
var urlVal = function() {
var baseUrl = location.href;
var restUrl = baseUrl.substring(0, baseUrl.indexOf(".xsp") +4);
restUrl = restUrl + "/calendarData";
return restUrl;
}
calCon.fullCalendar({
firstDay: 0,
header: {
left: "prev,next today",
center: "title",
right: "month,basicWeek,basicDay"
},
disableDragging: true,
events: {
url: urlVal(),
type: "GET",
error: function() {
alert("something asploded");
}
},
dayClick: function(date, allDay, jsEvent, view) {
console.log("date=",date);
console.log("allDay=",allDay);
console.log("jsEvent=",jsEvent);
console.log("view=",view);
}
});
But take a look at the demo I put together here. I think you'll like it. It seems that I'm not able to attach files which is probably a permissions issue, but when I get that rectified I'll be sure and attach that demo db here.