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.

Resources

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

webfolder

Calendar display

Next I created an XPage to display the calendar:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core&#8221;
pageTitle=”Responsive Calendar with calendario.js”
createForm=”false”>
<!–[if IE 9]><html class=”no-js ie9″><![endif]–>
<!–[if gt IE 9]><!–>
<xp:this.resources>
<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=”http://code.jquery.com/jquery-1.9.1.min.js&#8221; clientSide=”true”></xp:script>
<xp:script src=”http://code.jquery.com/jquery-migrate-1.1.1.min.js&#8221; 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>
</xp:this.resources>
<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() ); }
});
</script>
<body>
<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>
<nav>
<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>
</nav>
</h3>
</div>
<div id=”calendar” class=”fc-calendar-container”></div>
</div>
</div><!– /container –>
</body>
</html>
</xp:view>

Data

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=”http://www.ibm.com/xsp/core&#8221; rendered=”false” viewState=”false”>
<xp:this.afterRenderResponse><![CDATA[#{javascript:
var externalContext = facesContext.getExternalContext();
var response = externalContext.getResponse();
var writer = response.getWriter();

response.setContentType(“application/javascript”);
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>’,”;
vDoc.recycle();
var vDoc:NotesDocument = nextvDoc;
}
viewData = @LeftBack(viewData,1);
}
viewData = viewData + “};”;
writer.write( viewData);
writer.endDocument();
facesContext.responseComplete();
}]]></xp:this.afterRenderResponse>

</xp:view>

Result

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

small

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

large

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:

http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/

Job Wanted

Looking for a creative brain? Try me!

job-wanted

Advertisements

3 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.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s