Menu

Templates

Templates provide the power necessary to let you customize Web2Cal for different kinds of applications with no frustration.

Templates look like regular HTML, with embedded attribute expressions. 

An attribute expression is a ${, some contents, followed by a } 

The attribute expressions will be replaced with the attribute value of the object. 

 

Example:

Event Object and a corresponding template. The template displays Event Name, Event Description and Time in a custom format. This template will be evaluated by web2cal and the attribute expressions will be replaced with the object's value during run time.

Event JSON object

var event = { eventId:521, eventName:"Pick up pizza", eventDesc:"from Joe's", date: new Date() };


Template for the above object

<div id="event${eventId}">
<div class='header'>${function: displayTime} ${eventName}</div>
<div class='body'>
${eventDesc}
</div>
</div>
<script> //Function used in template above.
function displayTime(anObject)
{
anObject.aDate.getYear()+"/"+anObject.aDate.getMonth()+"/"+anObject.aDate.getDate();
}

</script>

Results in

<div id="event521">
<div class='header'>2013/11/26 Pick up pizza</div>
<div class='body'>
from Joe's
</div>
</div>

 

ABOUT US