Skip to Content
Author's profile photo Former Member

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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Excellent Blog. Waiting for part 2

      Author's profile photo Maheshchandra VVNS
      Maheshchandra VVNS

      Thanks for your blog post, it really helps.

      link broken in this line

      • Creating a custom component editor using this guide
      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks for pointing out, I've updated the link now.

      Author's profile photo Huaishu Li
      Huaishu Li

      It is very good! But it only for the 7.0 not the 7.3.Thanks

      Author's profile photo Former Member
      Former Member

      Could you  please share the wpc_cal.xsl?

      Author's profile photo Swapnil Shelke
      Swapnil Shelke

      Hi All,

      I am facing issue to get the WPC Editor and could not create the Sites folder under wpccontent folder in KM.

      I have tried with above option but still there is same issue.

      With this issue, can any one help to resolve it? Currently I am on SAP EP 7.0 SP13..
      please fill free to contact or send information on


      Swapnil Shelke