357 Lotus blogs updated hourly. Who will post next? Home | Downloads | Events | Pods | Blogs | Search | myPL | About 
 
Latest 7 Posts
On SocialBizUg: Modern Domino: Bootstrap 3 Inheritable Layout
Fri, May 30th 2014 174
XMage, your XPrentice will surely miss you
Mon, May 12th 2014 331
On SocialBizUg - Web Worker Basics
Sun, Apr 13th 2014 237
Popover to Google Maps
Wed, Jan 1st 2014 217
My first impressions of using Titanium Appcelerator
Sun, Dec 8th 2013 306
Asymmetric Modernization Explained
Mon, Nov 25th 2013 189
2 Days with Domino 9.0.1 Mobile Controls - And I'm not happy
Wed, Oct 30th 2013 256
Top 10
XMage, your XPrentice will surely miss you
Mon, May 12th 2014 331
My first impressions of using Titanium Appcelerator
Sun, Dec 8th 2013 306
2 Days with Domino 9.0.1 Mobile Controls - And I'm not happy
Wed, Oct 30th 2013 256
On SocialBizUg - Web Worker Basics
Sun, Apr 13th 2014 237
JQuery FullCalendar in XPages
Sun, Feb 17th 2013 225
Easy Mobile Browser Detection
Tue, Nov 27th 2012 221
Popover to Google Maps
Wed, Jan 1st 2014 217
Implementing a Dojo Scrollable pane with the XPages Mobile Controls
Mon, Jul 29th 2013 210
Make your Bootstrap site Responsive
Fri, Sep 20th 2013 190
Asymmetric Modernization Explained
Mon, Nov 25th 2013 189


SnTT: XPages Calendar Control (Part 4), adding day and week views
Keith Strickland    

In our last sessions we created a blank monthly calendar, then put some data on the calendar and last we made it reusable so we can use it in any application. While this is all well and good, we need to be able to see the breakdown of times on a daily and weekly basis. So in this SnTT we will be adding blank day and week views. I'm doing blank views because I can't quite figure out how to place entries so that they span the correct amount of time. If anyone has any ideas about this please speak up as I'm stumped as to where to go next. I was thinking that maybe Dojo could help out here but I haven't had the time to sit down and actually try anything yet. As of this release there is also an OpenNTF project for this of which I'm looking for people to contribute and be a part of the development of this project. Like I said before, I'm going to need people smarter than myself.

OK, so I started with making a couple of new XPages (day and week) and dragging the required XPages Framework elements onto the page, save and close. I then created a new custom control and called it ccCalDay. This control will have the following features/requirements

  • Navigate forward/back a day
  • Be able to configure the hours display (12 or 24)
  • At a later date, be able to add data to the view
  • Clicking the Month View sidebar link should take us to the selected month view
  • Clicking the Week View sidebar link should take us to the selected week view

We've now got our requirements so lets start putting this all together. I added a panel and called it "container". This panel holds the entire day view calendar. I added 2 other panels within the container panel and called those dayNavContainer and dayHoursContainer. Now that we've got our layout we can proceed. In order to display the proper day, we'll need some variables from the Month View calendar. I changed all the viewScope variables in the previous SnTTs to now be sessionScope variables instead of viewScope. This allows us to pass the date back and forth between different views. It also allows us to just manipulate one date at a time to change everything on a page. So, in the ccCalDay custom control, BeforePageLoad event we've got this:


If you recall, in our menu for each day on the monthly calendar we have a function which builds a list and we pass the day in a URL parameter. This is what allows us to define a specific day, we then just use the month and year from the "dispDate" sessionScope variable and then recompute all the other variables even though they aren't needed for the day view. I do this so if you go back to the month view we still have these values to build the monthly calendar, no matter how many days you navigate through on the day view. Also, I've built an array based on a property definition of all the times we want to display.

Now for the navigation, we want to be able to navigate forward or back by 1 day. This should be a fairly simple process but it did give me quite a bit of grief. Per Jeremy Hodge I tried setting the dispDate sessionScope varible like:
sessionScope.put("dispDate", sessionScope.get("dispDate").setDate(3));
but never could get this to work, along with several other methods I tried with using the set???? method of a Javascript Date, so that is one of the reasons why I had such a hard time with the navigation. I was also having some issues with the onClick event of the navigation links, the onClick code was firing at page load and incrementing/decrementing the sessionScope variables. I addressed that in this post. Just as an FYI, don't use the All Properties tab to edit event code, it screws things up. OK, now for the navigation we have a link that goes back 1 day, a computed field which displays the current date we're looking at and then another link to go forward 1 day. The back 1 day link has this onClick event code:


All this does is check the current day date, if it's 1, then we check if the month is 0 (Jan), if it is then we decrement the year by 1 and set the date to 12/31. If the month isn't 0 then we just decrement the month by 1. If the day isn't 1 we just decrement the day by 1. Once all of that is done, we set all the sessionScope variables.

For the date display, it's really simple:

For the day forward link, it's pretty much the same as the back link with the exception that we check if the day is the last day of the month and if it's the last month of the year.

The only thing left here is to build the table which contains all the different times. I defined a property definition for the timeHourFormat to be either 12 or 24. If you set it to 12, the times go from 12:00 AM to 11:59 PM. If you define 24 you get hours from 0 to 24. I also build a 4 row table within each data column which don't really contain anything right now. I'm hoping that by assigning these rows an id that we can place a div and have it span the proper amount of time. But this will probably change as I learn more about placing divs in specific spots on a page. So, at the top of the day view I display the date, week day, month and year, just like on the Notes Mail calendar day view. I use 3 separate computed fields so that we can place them where we want them and control their font sizes independently. The code for these are really straight foward and I'm not going to go into detail about these:

Big Date Number:


Big Week Day:


Big Month Year:


Then the remaining rows which are contained within a computed field which is contained within a repeat object:


All this does is loop through and build each row of the table based on the timeVar. timeVar is defined as the "collectionName" in the repeat control which is set to repeat 24 times. Then in each data column, build a 4 row table (for 0 min, 15 min, 30 min, 45 min).

And that's it for the day view of the calendar. You should end up with something looking like this:
dayView.jpg
Continue Reading for the week view....



---------------------
http://www.keithstric.com/A55BAC/keithstric.nsf/d6plinks/KSTD-835TWG
Mar 01, 2010
35 hits



Recent Blog Posts
174


On SocialBizUg: Modern Domino: Bootstrap 3 Inheritable Layout
Fri, May 30th 2014 6:35p   Keith Strickland
I've got a new post over on SocialBizUg. Modern Domino: Bootstrap 3 Inheritable Layout [read] Keywords: domino
331


XMage, your XPrentice will surely miss you
Mon, May 12th 2014 3:45p   Keith Strickland
I am truly saddened and devastated by the news I received today of the death of Tim Tripcony. I would like to express my heartfelt condolences and sympathy to Tim's family and friends. I would also like to explain how Tim helped change both my personal and professional life. The loss of Tim has already left me feeling a rather large empty space where he once stood. Before I was hired at GBS I learned a lot from Tim's blog and the few chat sessions I had with him. I had never met him [read] Keywords: xpages development
237


On SocialBizUg - Web Worker Basics
Sun, Apr 13th 2014 11:26a   Keith Strickland
Over on SocialBizUg - Web Worker Basics [read] Keywords:
217


Popover to Google Maps
Wed, Jan 1st 2014 11:34a   Keith Strickland
Posted over on SocialBizUg - Popover to Google Maps [read] Keywords: google
306


My first impressions of using Titanium Appcelerator
Sun, Dec 8th 2013 11:48a   Keith Strickland
A couple of weeks ago I started messing with Titanium Appcelerator. Coming from Domino Designer and Eclipse the IDE will look very familiar. It's eclipse and it's based off of Aptana Studio. I guess the biggest issue to being productive is the learning curve for the API. But honestly when is that not the case? So starting to delve into this, Titanium apps are purely client side javascript based. You write the CSJS that builds the UI, Business Logic, Layout, everything. While this may [read] Keywords: domino ibm lotus notes notes client application dojo eclipse iphone javascript mobile oop openntf wiki
189


Asymmetric Modernization Explained
Mon, Nov 25th 2013 6:32a   Keith Strickland
Posted Asymmetric Modernization Explained over on SocialBizUg. [read] Keywords:




256


2 Days with Domino 9.0.1 Mobile Controls - And I'm not happy
Wed, Oct 30th 2013 1:42p   Keith Strickland
OK, so today is the 2nd day I've spent with the Mobile controls from Domino 9.0.1. I must say the lack of a 9.0.1 Beta is quite obvious. So some of the "improvements" IBM made to the mobile controls are the addition of onBeforeTransitionIn/Out onAfterTransitionIn/Out. While these events are sorely needed, the implementation IBM chose to use doesn't work is kind-of odd. So, a brief rundown of the transition events pre 9.0.1. I posted a while back about how to implement these methods i [read] Keywords: domino ibm application community dojo mobile network server
190


Make your Bootstrap site Responsive
Fri, Sep 20th 2013 2:50p   Keith Strickland
Just posted over on SocialBizUg a tutorial for putting together a responsive layout for your XPage Applications. [read] Keywords: applications
165


The Modern Notes Developer
Mon, Aug 19th 2013 8:09a   Keith Strickland
On SocialBiz User Group - The Modern Notes Developer [read] Keywords: notes xpages
210


Implementing a Dojo Scrollable pane with the XPages Mobile Controls
Mon, Jul 29th 2013 4:45p   Keith Strickland
Check out my first NotesIn9 video about adding a Dojo Scrollable Pane in order to get a fixed bottom tab bar with the Extension Library Mobile Controls. A big thanks to David Leedy for publishing my video. Hope you enjoy the video. [read] Keywords: xpages dojo mobile planetlotus planetlotus.org




Created and Maintained by Yancy Lent - About - Blog Submission - Suggestions - Change Log - Blog Widget - Advertising - Mobile Edition