Here we would create a similar component and try to display the status of the recent wiki activity.

As usual go ahead and create a new component using the component wizard in the CRXDE.

Once done open up the JSP page and add following piece of code to retrieve the nodes.

String queryStatment = "select * from wiki:Topic where jcr:path like '"+currentPage.getPath()+"/wiki/%'order by wiki:lastModified desc";
Query q = currentNode.getSession().getWorkspace().getQueryManager().createQuery(queryStatment,Query.SQL);
NodeIterator nodeIter = q.execute().getNodes();

Iterate through the node entries and retrieve the version history like

VersionHistory vh = node.getVersionHistory();
long size = vh.getAllVersions().getSize();


For newly added wiki entries the version size would be 1 and for all other updated entries it will be greater than 1.

After adding valid wiki entries and adding the component to the page it should resemble like given below.

I would provide a simpler approach to achieve the same.

• Create a new component let’s say upcoming events.

• Open up the newly created JSP and add the following logical steps
• Retrieve the Calendar Source in the desired page either by looping through the child pages or parametrize the calendar location as a dialog entry for the component. In our case we shall assume that the dialog entry exists and proceed.
• if(calendarLocation == null || calendarLocation.equals(""))
{
PageFilter filter = new PageFilter(request);
Iterator iter = currentPage.listChildren(filter);
while(iter.hasNext())
{
Page currPage = iter.next();
Resource r = currPage.getContentResource("par/calendar");
if( r != null) {
calendarManager = currPage.getContentResource().getResourceResolver().adaptTo(CalendarManager.class);
if(calendarManager != null){
calendar = calendarManager.getCalendar(currPage.getPath());
calendarUrl = currPage.getPath()+".html";
break;
}
}// resource check
}
}
else {
calendarManager = currentPage.getContentResource().getResourceResolver().adaptTo(CalendarManager.class);
if(calendarManager != null){
calendar = calendarManager.getCalendar(calendarLocation);
calendarUrl = currentPage.getPath()+".html";
}
}

• Retrieve all the Calendar events using calendar API
• Iterate over all the events and for each event , read the event properties.
• If the event happens in future then display the event along with its read properties.
• Add the component to your webpage using the sidekick after enabling it.
• The component should resemble like given below once its published or previewed with appropriate data

However we can also customize the color for certain event types. Lets take a scenario where we can define new meeting types ( for our reference) and color code them.

This provides an intuitive experience for the user to decide the kind of event he/she is going to attend.

To achieve this we have to perform the following steps.

1. Copy the Calendar folder structure (/libs/collab/calendar)  to your local apps folder to customize the features.
2. Customize the Calendar edit form to include a meeting type, in our case its defined as four (Meeting,Seminar,Speech and Conference)
• Create a new Event Edit Form and associate that for the Calendar.
• 
• Create a new Event View Form and repeat the same except that now it is a read only mode.
• 
3. We have to modify the java script which renders the color for the various event types. This is available under the file MonthLens.js file
• The function createAllDayEventDiv retrieves the color for the all day event in question  like given below.
var color = CQ.collab.cal.Calendar.getColorFor(event);
Replace the default function with a custom one like
var color = CQ.collab.cal.Calendar.getEventColorFor(event);
• Perform the same changes for renderTimeEvents function too ( i.e. replace the default one with the custom function getEventColorFor).
4. The Event Type to the color code can be done in multiple ways, but here we will take a look at the simplest approach of matching the event Type with predefined color.
• Open the Calendar.js file and add the following piece of code

/**
* Returns the color to use for an event. This color will be the same
* for all events from the same calendar/subscription.
*
* @return {String} a hex color value in the form of "FF0000"
*/
getEventColorFor: function(event) {
var colorValue = "40864B";
var eventType = event.get("eventType");
if(eventType == "seminar") {
colorValue = "ED1C24"; // RED
}
else if (eventType == "meeting") {
colorValue="00A2E8"; // BLUE
}
else if (eventType == "speech") {
colorValue="FF7F27"; // orange
}
else if (eventType == "conference") {
colorValue="22B14C"; // GREEN
}
return colorValue;
}

•  Edit the calendar and add events of each type.
• Once completed the calendar should looking similar to what is displayed here.

Color Coded Calendar