There are many calendar plugins to use with jQuery. Here is an article where someone decides which are the top ten. I entertained using some of these, specifically #1 and #6 in the list, until I discovered "jQuery Datepicker" by Keith Wood, which for some reason was not on this list. Once I discovered this one, I knew straight away that my search was over. In this post, I will show you how I used jQuery Datepicker (datepick.js) within an XPage.
Generally, this calendar is used like most datepickers, where it is shown via a button and then hidden again. However, in my use case, I wanted a full month calendar that was always visible in the left side navigation as shown below. Below is the 'finished' result.
|This is the finished result. The random number is there so I know it refreshes, but later will be meaningful content.|
How I made it workThe first step is to download the source and copy it to your WebContent folder in your application. I recommend creating a "js" subdirectory and placing the files in there. You then need to reference the files in your XPage using the <script> tag.
|Step 1: Download and add to page|
The second step is to create a place to put the calendar and give it a class. I created a panel and gave it a class of ".calHere".
|Step 2 - Add a class where to put the calendar|
|Step 3 - Format the calendar and figure out what to do with result|
Code ExplanationFirst it launches the calendar, and then assigns a function to the calendar's onSelect event. Finally, it also prevents the user from selecting weekends, which is something in my specific requirements.
Here is how I went about updating the backend data with the value selected in the calendar:
- Then update a hidden input control in the content panel with the formatted date. I make use here of Marky Roden's X$ function for selecting Domino ID's in jQuery.
- Lastly, I force a partial refresh of the content panel using the built-in XSP object.