You are here:   Home Tutorials Health Club

Health Club Manager Calendar

Click here to activate Web2Cal Demo

 

In this tutorial, We will see how Web2Cal can be used in a health-club to display events. The aim of this tutorial is to help you understand the integration of the calendar and how to create custom templates and integrate them using callback methods.

For the impatient, Click Here to view the demo in a new window.

 

Read on for More Explanation

Manager calendar will have the ability to schedule New Training Session in the club.

For this screen, we will

1. Define Event Data Object
2 Design the Preview Element
3 Designing the Form to collect information
4 Creating the Events List to be displayed
5 Writing call back methods to effectively control the behaviour

Define Data Structure

We will identify the information required by the calendar to display events on the web calendar.

		var anEvent = {
		  startTime:new Date()
		, endTime: new Date()
		, eventId:0
		, groupId:0
		, eventName: ""
		, eventDesc: ""
		, movable: true
		, resizable: true
		, showPreview: true
		, eventType: ""
		, leadDaysToCancel: 0
		, maxWaitList:0
		, facility: ""
		, publishStatus:""
		, capacity: 0
		, trainers: [
				"Trainer 1", "Trainer 2", "Trainer 3"
			]
		, registerMembers: [
			 { memberId: 0, firstName : "", lastName: "" }
			,{ memberId: 0, firstName : "", lastName: "" }
			,{ memberId: 0, firstName : "", lastName: "" }
		]
	}

Designing Preview

Shown below is the preview. This element will be displayed when the user clicks on any event in the calendar.

${eventName}
Start: ${function: printStartDate}
End: ${formattedEndTime}		 Location: ${location}
Conducted By: ${instructor}
Facility: ${facility}
Event Type: ${eventType}		 Capacity: ${capacity}
Lead Days to Cancel: ${leadDaysToCancel}
Description:
${description}

Note that the attributes of the JSON object  are surrounded with a ${ }. Web2Cal will replace these attributes with actual values when preview is invoked. You can further customize it by providing a callback method onPreview (For More Information check the Callbacks section of this article). You can further customize each attribute by providing a function. ${function: printTime}. This function will be invoked when Web2Cal parses the the preview element. In the example shown below, We print just the Date and Month for Start Time:


function printStartDate(eventObject)
{
return eventObject.startTime.getDate() +"/" +  eventObject.startTime.getMonth();
}


Don't forget to return the string.


${formattedStartTime} and   ${formattedEndTime}  are attributes added by web2cal. These attributes will contain the Start Time and End Time of the Event as 9:15 PM or 10:30 AM.

The HTML for preview element is shown below

<div id="gmCalendarEventPreview" style="position:absolute; width:330px; border: 1px solid #5A595A; ">		 
  <div class="aPointer p-left" style="display: block; z-index: 2; "> </div> 		 
  <div class="header">		 
	${eventName}		 
  </div>		 
  <table width="100%">		 
  <tr>		 
	<td valign="top">		 
		<span class="labelXSmall">Start: </span>		 
		<span class="startTime">${function: printStartDate}</span>		 
		<br/>		 
		<span class="labelXSmall">End: </span>		 
		<span class="startTime">${formattedEndTime}</span>		 
	</td>		 
	<td valign="top">		 
		<span class="labelXSmall">Location:  </span>		 
		<span class="startTime">${location}</span>		 
		<br/>		 
		<span class="labelXSmall">Conducted By:  </span>		 
		<span class="startTime">${instructor}</span>		 
				 
	</td>		 
  </tr>		 
  <tr>		 
	<td valign="top">		 
		<span class="labelXSmall">Facility: </span>		 
		<span class="startTime">${facility}</span>		 
		<br/>		 
		<span class="labelXSmall">Event Type: </span>		 
		<span class="startTime">${eventType}</span>		 
	</td>		 
	<td valign="top">		 
		<span class="labelXSmall">Capacity:  </span>		 
		<span class="startTime">${capacity}</span>		 
		<br/>		 
		<span class="labelXSmall">Lead Days to Cancel:  </span>		 
		<span class="startTime">${leadDaysToCancel}</span>		 
				 
	</td>		 
  </tr>					 
  <tr> 		 
	<td colspan="2" align="left">		 
		<span class="callabel TextSizeXSmall">		 
			Description:		 
		</span>					 
		<div  class="EventDescription">		 
			${description}		 
		</div>		 
	</td>		 
  </tr> 		 
  </table>		 
  <ul class="actions">		 
	<li>		 
	<a href="#" name="edit">		 
	Edit event		 
	</a>		 
	</li>		 
	<li>		 
	<a href="#" name="delete">		 
	Delete event		 
	</a>		 
	</li>		 
	<li> 		 
  </ul>		 
</div>

onPreview function is a useful hook if you need to fetch the most recent information from database before showing preview, you may want to make the DB call before showing the preview.

Design Form to collect New Event Info

In the next step, we will design the form to create the new event.

We will implement the "onNewEvent" callback, to populate the appropriate text fields. When the user clicks "Save Event" button, the information in the form will be persisted in a database( or any other datastore ) and the newly added event will be displayed in the calendar by invoking ical.addEvent(<new event object>).

Custom form to create a new event

Create New Event
Select Product
Facility
Trainers
From Date
To Date
Start Time
End Time
Capacity
Notes
After occurrences
On



Controlling Calendar with Callback functions

The Calendar exposes rich set of callback events to enable fine grained control of the behavior. For the above Health Club example we will focus on:

onNewEvent

This callback event is invoked when user attempts to create a new event by either dragging the mouse or clicking Quick Add. Use this callback method to populate the custom fields of your form.

The parameters for the onNewEvent callback are

  • eventObject is object containing startTime and endTime. The Structure is
    Object = { startTime: Date Object, endTime: Date Object }
  • groups is the list of unique groups that are being displayed in the calendar.
  • allday is a boolean indicator to indicate if it is an All-Day Event.

 

onUpdateEvent

This callback is invoked when user moves an event or resizes an event in any view. 
A typical implementation is

  function updateEvent(event){          
 //Update my Database.        
 //Once update to DB is successful, Update Web2Cal as well.         
 ical.updateEvent(event); 
 }

  • The parameter event is event object with updated startTime and endTime

 

onPreview

This callback is invoked when user clicks on any event displayed in Web2Cal. The Default implementation will attempt to convert and display your preview element( Explained above ) with the actual event data.

This callback will be particularly useful if you need to get real-time data to show the preview.
An example would be, if you want to get the Registered / Waitlisted members list for an event.

A typical implementation is

 function showEventPreview(calEvent, dataObject, defaultHTML) {     
 var updatedHTML=defaultHTML+"<div> This is my new preview." 
 + " The time now is: </div>"+new Date();      
 ical.showPreview(calEvent, updatedHTML); 
 }

The parameters are

  • calEvent This is the calendar event html object that you clicked on.
  • dataObject Corresponding data object used to render this event.
  • defaultHTML This is the default HTML that will be shown.

When you are ready to show the updated preview, you must invoke ical.showPreview(calEvent, updatedHTML);

Download this example

Coming Soon... Please check again..

Comments (2)
  • 05/22/2009 | benjm77  - Nice Demo
    Works well... Can we show the preview on mouse over instead of click?
    Reply
  • 11/01/2009 | Anonymous
    this is very nice tutorial exaplained, i realy enjoy when read this page that you give full of detail.
    Reply
Write comment
Please input the anti-spam code that you can read in the image.