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:
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”
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” clientSide=”true”></xp:script>
<xp:script src=”http://code.jquery.com/jquery-migrate-1.1.1.min.js” 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” 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:
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:
http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/
Job Wanted
Looking for a creative brain? Try me!
After an x number of years working in the same environment I have decided to look for a new challenge. Are you looking for a smart companion?
