In our previous posts we've created a blank calendar and then added some data to it. While this is all well and good, it's not very reusable in it's current state. It's quite dependent on a view being formatted a particular way. What if you already have a view with the data you want to put on the calendar and don't want to change that view? Well, this is what we're going to address today. With these changes the calendar really takes on the form of something useful and not something that only works on your machine.

In this SnTT I will show you how to make your calendar more reusable and we'll also add the framework for some navigation to each cell to open up a day view, week view and month view (the month view may be redundant and I haven't yet decided on if we need to keep it). Also being addressed here is if you want text other than what is in the calendar to show up in the dojo tool tip. As a bonus, we'll also do the blank view with an editable area so you can use your own custom control to display data.

So, with the requirements defined for this session, we're now ready to begin. Looking at the code for the dayCells computed field on the ccCalendar custom control, you'll notice our view name is hard coded along with the column values. This is where the problem lies, we want this to be configurable. We can use "Property Definitions" to address this issue. Property Definitions allow us to define our own properties for a custom control. These get stored in the "compositeData" object(?) and are available for you to use anywhere within that custom control.

Here we need to define some properties for the following:

• The View Name - lookupViewName - String
• The Data Column - lookupViewDataCol - Integer
• The Column that contains the UNID - lookupViewUNIDCol - Integer
• The Column that contains the Tool Tip text - lookupViewToolTipCol - Integer
• The text that will used in the lookupViewToolTipCol if no Tool Tip text is available - NoTooltipText - String

Now, open the default XPage, highlight the ccCalendar custom control (it'll be under facets) and fill in the properties we defined. Except here you can use values for your own view instead of the one included in this DB:


Once you save and close and view the calendar in the browser, it should look exactly like it did when we left off from Part 2 of the SnTT. The only difference is that the tool tips will now be populated with whatever is in the column defined for the tool tips.

With these changes, the calendar takes on a more useful role, we can now use views we've already designed and just change the properties to match each view. But what if you want to design your own custom control to display data the way you want it displayed? In this case, we can use an Editable Area instead of putting all the data computation within a computed field on the calendar itself. This will allow us to put a custom control onto the editable area on the XPage instead of within the ccCalendar custom control. So, to support this, in the sample database (located in the downloads section) I've added another custom control called ccCalendarEditable. I've modified the dayCells computed field to only spit out the html to begin the column and include the number for the day and start the div which contains all the data for that particular day. We also changed the name of this computed field to beginTD. You'll notice also, that now the day is included within a span instead of a div and also that there is a function call that is within another span. I will get to this shortly.
var beginTD = '<td class="calDay"><div class="dayNum"><span class="viewMenu">' + buildMenu(compositeData.dayViewXPage,compositeData.weekViewXPage,compositeData.monthViewXPage) + '</span><span class="dayNumSpan">' + (calVar+1) + '</span></div><div class="allDay">'; return beginTD;

I added another computed field named endTD which contains the code closing the column and data div.
return "</div></td>"

Now, in between these 2 computed fields I've added an Editable Area and gave it a Name of calData and a Facet Name of calData:

When we drag this custom control (ccCalendarEditable) onto a new XPage I think I did find a bug which I discussed in my previous blog entry about being able to drop a custom control onto an editable area which is contained within a repeat. Since this is the case we'll have to hand code the embedding of the custom control I created to contain the data onto the facet within the XPage. This is a simple process and shouldn't cause too much headache. But, I created a new custom control called ccCalData. This control basically contains the code we removed from the dayCells computed field and put into a computed field on the ccCalData custom control. I did it this way to really just show the ability of being able to split up the data and design a little bit more. Also, please forgive my lack of a useful naming convention, since I'm just now really getting started with XPages I haven't really come up with a naming convention I use all the time. But to hand code the embedding of the ccCalData custom control onto the XPage this is the format. Notice the "xp:key" item defines the name of the Editable Area (calData in our case):
<xp:this.facets> <xc:ccCalendarEditable xp:key="ContentControl" dayViewXPage="day" monthViewXPage="editablecal" weekViewXPage="week"> </xc:ccCalendarEditable> <xc:ccCalData xp:key="calData" lookupViewDataCol="3" lookupViewName="luDates" lookupViewToolTipCol="5" lookupViewUNIDCol="4" NoTooltipText="undefined"> </xc:ccCalData> <xc:partLeftSideBar xp:key="LeftSideBarControl"></xc:partLeftSideBar> </xp:this.facets>

So, we now have 2 different ways to make our calendar more reusable. You can use @DbLookups to a view that you've already designed and just change the properties to return the data you want on the calendar or you can design your own custom control to drop onto the calendar. Also, in the case of this sample db the calendar should look at react exactly the same as it did when we left off with part 2. Either way makes this much more useful. Now, in preparation for having a "day view" and "week view" I've added a small drop down menu to allow you to switch views. Read on...