Skip to Content

WPC wysiwyg Calendar (Part 1)

With the ability of Web page composer to create custom form types and having worked with the brilliant FullCalendar jQuery plug-in, I decided to try my hand at match making and getting the two married 😉 . The idea would be to store, edit and display a calendar with events using the underlying WPC technology.

An intro to FullCalendar

FullCalendar is a jQuery plug-in that provides a drag & drop event calendar and can use AJAX to fetch event data.FullCalendar is highly customizable and can easily be configured to adapt to your own needs. Below is a screen shot showing a calendar using one of the jQuery themes.


however the purpose of FullCalendar is mainly for displaying events, so extra event manipulation and management is left to the developer 😏

Outline of Tasks

Below is a summary of the main tasks carried out and related documents that were referenced:

I’ll discuss each briefly and the approach taken to realise them.

Creating a new Web Form

This task is to provide the document presentation details and perform the necessary KM configuration for making a new WPC form available in the portal.

I’ll briefly just mention the workings and requirements of WPC for creating a custom form: WPC content is created and stored as XML documents within KM,

in order to display these XML documents to the end user the XML documents are transformed using a corresponding XML stylesheet. WPC requires two files: 1 presentation file (.xsl file) and 1 web form (.xml file), the Web form file describes what editor components will be used to create the KM XML content.

Web Form: wpc_cal.xml

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


            <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” />


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



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”>


    <property type=“fileName” prop_ns= prop_name=“displayname”/>

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



    <element type=“cal”>


[{“id”:1281,“title”:“Fund  raiser”,“start”:“2012-05-10T05:30:46Z”,“url”:,“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”}]








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.

You must be Logged on to comment or reply to a post.