elstar IT

In one of my XPages projects there was the need of a calendar display of data. First stop was the Demo application of the OpenNTF Extension Library, which contains a calendar control.

After some attempts to get my data displayed in this control, I skipped it and moved to a JQuery plugin, FullCalendar. I was surprised by how the easiness to get everything up and running.

 

Get started

For this project I already used Bower to include all the required client side frameworks, I run Bower once again to install the full calendar files in my application. How to use Bower in your XPages application, see my blog about it.

 

Make it work

In your XPages app, add the javascript file via the resource tags

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]

 

Further down the page include a div tag, with the id of calendar (1). At the bottom of the page I included a script block, with the call to the full calendar javascript object. In the call I added some parameters to tell the code how to display the code and what to display. Documentation of all the parameters can be found on the website of the Fullcalendar plugin.

I added code to get my data and language from a Java Controller (2 and 3)

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]

 

Last thing is to get the data as JSON from my Java Controller class. With the use of the build in ‘

com.ibm.commons.util.io.json.JsonJavaObject’ I build my JSON, every event entry is a entry of an array.

The JSON array entry should have as minimum the obviuos values like title, start and end date

title: ‘Click for Google’,

url: ‘http://google.com/’,

start: ‘2015-02-28’

end: ‘2015-02-28’

 

After the data is collected from my Java Contoller my entry data for the full Calendar looks like this

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]

 

Final result

The final result looks, in my opinion very good.

[dropshadowbox align=”none” effect=”lifted-both” width=”600px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ][/dropshadowbox]