Creating templates is an easy way to customize the look and feel of many elements within Web2Cal. Ability to create templates makes web2calendar flexible enough to use in different kinds of applications.

"Template" is any HTML element that needs to be displayed. Template can contain formatting along with attribute names surrounded with ${}. The attribute names will be replaced with the attribute value of the object. 

Template		Object		Result
		event={ name: "Cardio Cross Training", startTime: "12:00 PM", endTime: "2:30 PM", capacity: "6", eventType: "PT", leadDays: 1 };

Consider for example a simple Object and a corresponding template. The template displays Event Name, Event Desc and Time in a particular format. This template will be parsed by web2cal and the attributes surrounded with {} will be replaced with the object's value during run time. 

Event Data Object 
 Class Event
 {

int eventId=0;
 String eventName="";
 String eventDesc="";
Date  aDate=new Date();
}

Template for the above object 

<div id="event${eventId}">
<div class='header'>${function: displayTime} ${eventName}</div> 
 <div class='body'> 

${eventDesc}

</div>
</div>

function displayTime(anObject)
{
 anObject.aDate.getYear()+"/"+anObject.aDate.getMonth()+"/"+anObject.aDate.getDate();
 }
 

You can control the conversion process, by specifying a function. This function will then be invoked for a data object. In the template below, displayTime will be invoked and the event object will be provided as parameter. Click here to see using templates effectively. 

When using web2calendar you can create your own custom templates for: 

Preview Template

This is the template displayed when user clicks on an event displayed in calendar. You can have a different one for month view, week view, w2cview and workshiftview.

To Change the preview template, 

var ical =new Web2Cal('containerID', {weekPreviewTemplate :"mytemplateForWeek" ,
                              wsPreviewTemplate: "myTemplateForWS",
                              monthPreviewTemplate: "myTemplateForMonth" ,
                              w2cPreviewTemplate: "myTemplateForMonth" 
});

New Event Template

This is the template shown when user attempts to create a new event. A callback method is fired to populate other fields in the template.

You can have a different one for each view. Agenda view uses the same template as week view. 

var ical=new Web2Cal('containerID', {monthNewEventTemplate: "myNewTemplateID",
                           weekNewEventTemplate: "myNewTemplateID",
                           w2cNewEventTemplate: "myNewTemplateID",
                           wsNewEventTemplate: "myNewTemplateID"
});

Event Template

This is the actual event displayed on the calendar. By Default the event Name is displayed in the body of the event. You can change this by creating your custom template and instructing calendar to use this template. This is done during initialization of Web2Cal. You can specify a different template for each view.  

var ical = new Web2Cal('containerID', {weekDataTemplate: "myDataTemplateID",
                               w2cDataTemplate: "myDataTemplateID",
                               monthDataTemplate: "myDataTemplateID",
                               wsDataTemplate: "myDataTemplateID",
                              agendaDataTemplate:"agendaViewTemplate"
 });

Quick Filter Template

This is the template displayed in the quick filter box. You can use this template to edit a group. 

To Change the quick filter template, 

var ical =new Web2Cal('containerID', {
                              quickFilterTemplate: "myQuickFilterTemplate" 
});

Works with Web2Cal 1.3.6 and above