Proof By Design

Building web applications since 1997

DanceUpClose Test

DanceUpClose is a dance events organizer and search engine we wrote. It is entirely web based and works on all mobile and desktop browsers, adapting itself to the platform it is on. For more information see the DanceUpClose site.

This page demonstrates how to deliver the agenda/schedule for an organizer on your own web site by simply adding a couple of JavaScript include statements and one CSS (you can use your own if you like).

You need an Html element in your page into which we load the agenda. Put this anywhere you like and style it how you like. On page-load, the element is loaded with the schedule from the DanceUpClose public site.

Here are the script and link tags you need in your header section:

<script type="text/javascript" src="http://danceupclose.com/CommonContent/Scripts/jquery-1.6.4.min.js"></script>    
<script src="http://danceupclose.com/Scripts/dzapplClient.js" type="text/javascript"></script>
<link href="http://danceupclose.com/Content/dzapplMobileClient.css" rel="stylesheet" type="text/css" />
<script src="http://danceupclose.com/Home/GetClientJavaScript/your-organizer-id?targetElementId=schedule"
    type="text/javascript"></script>

If you are already including jQuery elsewhere on your page, you can exclude that script tag. The last script tag calls the server to get one line of Javascript that bootstraps the client code. There are two required arguments on the call: the id of the organizer (which can be copied from the DanceUpClose admin site after you have logged in), and the id of your target element.

There are three other query arguments you can specify if you want to change the defaults:

startDate	Format: 'yyyy-mm-dd'. Changes the start date of the schedule. The default is today.
endDate	Format: 'yyyy-mm-dd'. Changes the end date of the schedule. The default is 'startDate' plus the number of days we schedule ahead on the DanceUpClose server. Typically this is 90 days.
groupByMonth	true or false. The default is false, which groups events by day.

The div element below contains a an example from the DanceUpClose schedule. Note that this is all test data and does not represent actual events but it is coming from the live server. Any content you put in the div will be replaced during load, initially with a 'loading...' message and then the content of your schedule.