Does anyone use the xe:calendarView control of the ExtLib? If so, how do the events work?

Question

I'm trying to use the xe:calendarView control in a real world application. So far, I can read data out of a view and display it in the calendar, that was easy.

But now I want to open an entry by double or singleclick, or I want to change the date of an entry by drag & drop. For that, the control has events like "onOpenEntry" where I can write SSJS. But I'm stuck here:

• In such an event, how do I get the UNID of the document for which the event was generated? "this" is an com.ibm.xsp.extlib.dwa.component.calendar.UICalendarView object. I found some source code for this class, but I don't see any way to access a the document which should be opened.

• Furthermore, the "onOpenEntry" event is only fired one time when the control is loaded. After that, it does not fire on click or doubleclick.

For me it looks like these events are not fully implemented... and in the ExtLib demo database there are not used, too. Does anyone know how this stuff works? Thanks!

Answer 1

The xe:calendar control is based on the iNotes calendar view. As a result the events only run Client-Side JavaScript, not Server-Side JavaScript. Using #{javascript:...} syntax you can pass in evaluated SSJS, e.g.

#{javascript:(userBean.accessLevel >= lotus.domino.ACL.LEVEL_AUTHOR) && userBean.canDeleteDocs}

This will check the user has at least Author access to the database and the delete privilege. Similarly you can use the following code to get the full URL for the current page to manipulate when creating the new URL to redirect to:

var path = #{javascript:"\"" + @FullUrl('/') + "\""};

Bear in mind that the Server-Side JavaScript will be evaluated when the function is written to the XPage, not when the button is clicked.

You can get the unid by using (as Client-Side Javascript, not Server-Side JavaScript) items[0].unid.

See the calendarView Custom Control in the Teamroom template that comes with Upgrade Pack 1 or the Extension Library for more details.

Answer 2

You can bind the event to the calendar entry using dojo or jquery. I found the below code for the entry which contain the unid.

So you should be able to do somthing like this

1. find the id ....calendarView1-entry0
2. get the unid attribute

3. Bind the id to the event you want and do a popup or whatever.

   <div id="home:_id1:dynC:_id556:calendarView1-entry0" class="s-cv-entry" calendar_type="Meeting" unid="723C2A5387AA7994C12579B30056D07E" calendar_date="20120622" calendar_index="0" calendar_start="20120622T000000,00$Z=-1$DO=1$DL=3 -1 1 10 -1 1$ZN=Western/Central Europe" calendar_end="20120622T010000,00$Z=-1$DO=1$DL=3 -1 1 10 -1 1$ZN=Western/Central Europe" calendar_start_notes="20120621T220000Z" calendar_bgcolor1="#C1DDF9" calendar_bgcolor2="#5495D5" calendar_fontcolor="undefined" calendar_bordercolor="undefined" calendar_external="0" onmouseover="dwa.cv.calendarView.prototype.cvHandler(event,this,'home:_id1:dynC:_id556:calendarView1');" onmouseout="dwa.cv.calendarView.prototype.cvHandler(event,this,'home:_id1:dynC:_id556:calendarView1');" onclick="dwa.cv.calendarView.prototype.cvHandler(event,this,'home:_id1:dynC:_id556:calendarView1');" ondblclick="dwa.cv.calendarView.prototype.cvHandler(event,this,'home:_id1:dynC:_id556:calendarView1');" oncontextmenu="dwa.cv.calendarView.prototype.cvHandler(event,this,'home:_id1:dynC:_id556:calendarView1');" style="top: 0px; left: 504px; width: 114px; height: 48px; "><canvas id="home:_id1:dynC:_id556:calendarView1-entry0-gradient" class="s-cv-entry" style="top:0px;left:0px;width:100%;height:100%;" color2="#C1DDF9" color="#5495D5" width="114" height="48"></canvas><div tabindex="0" class="s-cv-entry-innerframe s-cv-entry-innerframe-height s-cv-text" unselectable="on" aria-describedby="home:_id1:dynC:_id556:calendarView1-entry0-target" aria-haspopup="true" role="menu" style="top:0px;left:0px;width:100%;color:undefined;white-space: nowrap;" com_ibm_dwa_ui_draggable_redirect="home:_id1:dynC:_id556:calendarView1"><img alt="Meeting" src="/xsp/.ibmxspres/.dwa/common/images/transparent.gif" width="13" height="11" style="border-width:0px;background-position: -0px -0px; background-image: url(/xsp/.ibmxspres/.dwa/common/images/colicon1.gif);">&nbsp;Midsommar<br>8clfux40</div>