WPC wysiwyg Calendar (Part 1)

<documenttype id=“wpc_cal” description=“xml.xlbl.wpc_cal” showpreview=“true” showelementlist=“true”>

      <properties>

            <property id=“fileName” description=“xml.xlbl.filename” type=“inputfield” size=“25” isrequired=“true” isfilename=“true”/>

            <property id=“title” description=“xml.xlbl.title” type=“inputfield” size=“25” isrequired=“false” />

      <elements>

            <element id=“cal” description=“cal” type=“wpccal” default=“true” />

      </elements>

</documenttype>

Creating a custom component editor

The gist of this task is to create the editor component that will determine how the editor is displayed and how a component’s data is saved, this involves creating the portal par project and implementing the required editor classes.The approach taken here was to save the calendar’s json data between XML CDATA sections, the resultant wpc (xml stored in km) document is shown below:

wpc xml doc:

<document document=“wpc_cal”>

  <properties>

    <property type=“fileName” prop_ns=“http://sapportals.com/xmlns/cm“ prop_name=“displayname”/>

    <property type=“title”>events</property>

  </properties>

  <elements>

    <element type=“cal”>

      <![CDATA[[

[{“id”:1281,“title”:“Fund  raiser”,“start”:“2012-05-10T05:30:46Z”,“url”:“http://fund.raising.fr/events/1281“,“end”:“2012-05-10T07:30:46Z”,“allDay”:false,“location”:“eastern  block”},

{“id”:1265,“title”:“Golf  Day”,“start”:“2012-05-22T12:18:59Z”,“url”:“”,“end”:null,“allDay”:true,“location”:“golf  course”},

{“id”:3262,“title”:“Important  Conference”,“start”:“2012-05-28T12:22:22Z”,“url”:“”,“end”:“2012-05-31T12:22:22Z”,“allDay”:true,“location”:“far  far away”}]

]

]]>

    </element>

  </elements>

  <relatedlinks/>

  <relatedfiles/>

</document>

The editor in WPC will show something like this:

the usual way for editor components to extract the editor data from the form is by reading the form fields, this is typically, since most components have and keep track of only one value, the (maybe simplest? but not best) approach taken here was to store the entire json string in a hidden form field.

Apart from this, some client side javascripting is also employed to synchronize the hidden form field with the calendars state when events are dragged, added, edited or update.

Below are more screen shots showing the event editing functionality and the navigation view.

newly added event being dragged:

event details being updated,the form fields are used only on the client side to manipulate event json data:

exact time slots are specified by dragging the event in day view, by default an event is ‘all day’:

the form is saved usually as any other WPC form:

the calendar is also used in a WPC page as any other form:

result in site navigation:

in the next blog I’ll discuss extending the calendar to allow the user to save a calendar event as an MS outlook appointment.