CALENDARIO: A responsive calendar plugin

Calendars can be a very tricky thing when it comes to their layout and responsiveness. Calendrio is a jQuery plugin to display a calendar layout for both, small and big screens and keeping the calendar structure fluid when possible.

Here follows a brief description how you can utilize the plugin in your IBM Notes – XPages application.


Copy the resources to the WebContent folder via the Package Explorer:


Calendar display

Next I created an XPage to display the calendar:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”;
pageTitle=”Responsive Calendar with calendario.js”
<!–[if IE 9]><html class=”no-js ie9″><![endif]–>
<!–[if gt IE 9]><!–>
<xp:metaData name=”charset” content=”utf-8″></xp:metaData>
<xp:metaData name=”http-equiv” content=”IE=edge,chrome=1″></xp:metaData>
<xp:metaData name=”viewport” content=”width=device-width, initial-scale=1.0″></xp:metaData>
<xp:script src=”scripts/modernizr.custom.63321.js” clientSide=”true”></xp:script>
<xp:script src=”; clientSide=”true”></xp:script>
<xp:script src=”; clientSide=”true”></xp:script>
<xp:script src=”scripts/jquery.calendario.js” clientSide=”true”></xp:script>
<xp:script src=”data.xsp” clientSide=”true”></xp:script>
<xp:linkResource href=”styles/screen.css” rel=”stylesheet” media=”all” target=”_self” charset=”UTF-8″></xp:linkResource>
<html class=”no-js”><!–<![endif]–>
<script type=”text/javascript”>
$(document).ready(function(){ var cal = $( ‘#calendar’).calendario( { onDayClick : function( $el, $contentEl,
dateProperties ) {
for( var key in dateProperties ) { console.log( key + ‘ = ‘ + dateProperties[ key ] ); }}, caldata : webdesigner } ), $month = $( ‘#custom-month’).html( cal.getMonthName() ), $year = $( ‘#custom-year’).html( cal.getYear() );
$( ‘#custom-next’ ).on( ‘click’, function() {
cal.gotoNextMonth( updateMonthYear ); } ); $( ‘#custom-prev’).on( ‘click’, function() { cal.gotoPreviousMonth(updateMonthYear ); } ); $( ‘#custom-current’ ).on( ‘click’,function() { cal.gotoNow( updateMonthYear ); } );
function updateMonthYear() { $month.html( cal.getMonthName()); $year.html( cal.getYear() ); }
<div class=”container”>
<div class=”custom-calendar-wrap custom-calendar-full”>
<div class=”custom-header clearfix”>
<h2>Responsive Calendar</h2>
<h3 class=”custom-month-year”>
<span id=”custom-month” class=”custom-month”></span>
<span id=”custom-year” class=”custom-year”></span>
<span id=”custom-prev” class=”custom-prev”></span>
<span id=”custom-next” class=”custom-next”></span>
<span id=”custom-current” class=”custom-current” title=”Got to current date”></span>
<div id=”calendar” class=”fc-calendar-container”></div>
</div><!– /container –>


To create content for the data I created a Notes form with 2 fields: date and title. Also create a Notes view that is sorted by the date field.

To collect the data for the calendar.xsp create another XPage that will behave like an “XAgent”:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”; rendered=”false” viewState=”false”>
var externalContext = facesContext.getExternalContext();
var response = externalContext.getResponse();
var writer = response.getWriter();

response.setHeader(“Cache-Control”, “no-cache”);
var v:NotesView = database.getView(“entries”);
v.AutoUpdate = false;
var viewData = “var webdesigner = {“;
if (v.getEntryCount() != 0){
var vDoc:NotesDocument = v.getFirstDocument();
while (vDoc != null){
var nextvDoc:NotesDocument = v.getNextDocument(vDoc);

//viewDataDT:NotesDateTime = session.createDateTime(vDoc.getItemValueDateTimeArray(“date”));
//viewDataDT = vDoc.getItemValueDateTimeArray(“date”);
//viewData = viewData + viewDataDT.getDateOnly();
var dt:NotesDateTime = vDoc.getItemValueDateTimeArray(“date”).elementAt(0);
var day = @Day(dt.getDateOnly());
var str = “” + day;
var pad = “00”
var day = pad.substring(0, pad.length – str.length) + str;

var month = @Month(dt.getDateOnly());
var str = “” + month;
var pad = “00”
var month = pad.substring(0, pad.length – str.length) + str;
var year = @Year(dt.getDateOnly());
var cDate = month + “-” + day + “-” + year;

viewData = viewData + “‘” + cDate + “‘ : “;
var title = vDoc.getItemValueString(“title”);

viewData = viewData + “‘<a href=\”” + “entry.xsp?documentId=”+ vDoc.getUniversalID() + “\”>” + title + “</a>’,”;
var vDoc:NotesDocument = nextvDoc;
viewData = @LeftBack(viewData,1);
viewData = viewData + “};”;
writer.write( viewData);



Open the calendar.xsp. In small screen it should look like:


For larger screens (tablets/desktop) the calendar should look like:


Not bad ain’t it? I am not sure how responsive iNotes 9 is, my 8.5.3 version could use some.

Demo download

I have uploaded a sample database which can be found here.

Also look at the following site to read the options for this interesting jQuery plugin:

Job Wanted

Looking for a creative brain? Try me!


6 thoughts on “CALENDARIO: A responsive calendar plugin

  1. Oliver Busse 2013-April-8 / 8:30 pm

    Thanks for sharing! This is cool stuff that I will sure figure out! Maybe this can replace the “fullCalendar” plugin in my applications soon 🙂

  2. Patrick Kwinten 2013-April-8 / 9:19 pm

    @Oliver: I thought that jQuery full calendar was actually quite nice. What’s wrong with it?

  3. Oliver Busse 2013-April-8 / 11:33 pm

    There is nothing wrong with it except that this plugin is responsive and looks more “fancy”. It’s all about having the right solution for the customer’s needs.

  4. Sean Cull 2018-February-7 / 1:32 pm

    hello Patrick, would you still recommend this approach and is the demo db still available ? Thanks, Sean – sean at

    • Patrick Kwinten 2018-February-7 / 7:24 pm

      the post is from 2013. not sure what the current status of the plugin is. have u looked at (modern) alternatives?

  5. Chris 2018-February-21 / 10:09 pm

    Hi Patrick, is there a (modern) alternative you’d recommend? I’m also still interested in doing this.
    thanks for the great site and info!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s