Skip to main content link. Accesskey SBanner Product Logo
  • OpenNTF

keithstric.com

  • Home
  • Full Archive
  • Downloads
submit search
BlogSphere dojo Domino Family Fun Holiday How-To Java Linux Lotus Notes LotusPhere Mac Misc Movies OpenSource PHP Projects Reef SnTT Soapbox Technology Website Windows XBlog XPages
  • Full Posts
  • Comments
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012

Full Archive
  • : Chris Toohey
  • : David Leedy
  • : Declan Lynch
  • : John Jardin
  • : Karsten Lehmann
  • : Mark Leusink
  • : Niklas Heidloff
  • : Nathan Freeman
  • : Patrick Kwinten
  • : Per Henrik Lausten
  • : Peter Presnell
  • : Red Pill Development
  • : Stephan Wissel
  • : Tim Tripcony

 

Prominic.NET

 

  • Email: Keith Strickland
  • Facebook: Keith Strickland
  • Bleed Yellow: Keith Strickland
  • LDD: Keith Strickland
  • Resume for Keith Strickland
  • About Me

  • scrollable.nsf
  • mobileevent.nsf
  • fullCalendar.nsf
  • MIMEBean.nsf
  • imgImport.nsf

All Downloads

The opinions and ideas posted on keithstric.com are not necessarily the opinions and ideas of my employer. The solutions, techniques and code provided here are not guaranteed or warranted in any way and are free for you to use at your own risk.


Creative Commons License
keithstric.com is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at www.keithstric.com.


All code samples and downloads are copyright Keith Strickland and licensed under Apache License 2.0

A Request to IBMHomeWouldn't it be cool if....

JQuery FullCalendar in XPages

Keith Strickland Feb 17, 2013 Tags:XPagesjQuery 879 Views 5 Comments
fullCalendar.nsf

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:

  1. Must be responsive
  2. Must work in a mobile interface
  3. Must be functional and offer Month, Week and Day views
  4. 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.


Post your Comment
Comments (5):

Mark Roden
1 Re: JQuery FullCalendar in XPages
On: February 17, 2013 10:41 PM
I love FullCalendar. It was the first full on jQuery plugin I used in my domino dev a few years ago. Thanks for writing about it and I look forward to hearing more about what you have done with it. :)

Marky

Karsten Lehmann
1 Re: JQuery FullCalendar in XPages
On: February 18, 2013 12:15 AM
There is a fork of FullCalendar that adds a pretty nice resource planning view: {link} . Just used it recently for a customer project.

Petter Kjeilen
1 Re: JQuery FullCalendar in XPages
On: February 18, 2013 03:34 AM
This is very interesting ! Been waiting for this. How is this calender compared to the one used in the Teamroom XL template ? Looking forward to when you make a demo db available for download

Steve Smillie
4 Re: JQuery FullCalendar in XPages
On: February 18, 2013 07:08 AM
I was trying to get the JQuery Full Calendar to work in my OneUI app last week and was having problems where all the links (of the OneUI areas) would open new pages below the existing page. I am curious what you did differently and be taking a closer look at code above to see what you did differently.

Declan Lynch
5 Re: JQuery FullCalendar in XPages
On: February 18, 2013 11:29 AM
FullCalendar is great, I have been using it in an internal application for some time now and the ExtLib REST service is the perfect way to get data to the calendar.

patrick kwinten
6 Re: JQuery FullCalendar in XPages
On: April 08, 2013 11:33 AM
test test
Powered by XBlog - The XPages Blog Platform


/A55BAC/keithstric.nsf/