Tutorial for sucking data from Where's The Dance


Life starts out simple. Then... It get's complicated.

Let's start with the simple. In the beginning, there were just dates. Every schedule has dates.

==========
===
==========

The above table might be the most minimalistic dance schedule that you could imagine and this is the code that would generate that table...

==

<script type="text/javascript" wtd-table="table1" src="https://wheresthedance.com/userData/wtdSchedule.php?sponsorID=HuntPout1&col_1=date"></script>

==

Copy the above code and put it on a web page that exists on your web site and see if you get the schedule as shown above. If you did, we're starting off great!

The above script says that we are going to work with a table that we randomly decided to call 'table1'. (We give it a name so that we can refer to it specifically in case we decide to have more than one table on a page.)

We also specify that we want the data for sponsorID 'HuntPout1'. (If you would like to see your club's data as we work through this tutorial, substitute your sponsorID (or leaderID if you are a caller or cuer).

Lastly, we specify that we want to show the date in column 1.

==

Onward to add your 1st custom field...

Life should be so simple. But alas, it is not. We don't always dance in the same location, to the same caller, and we don't always do the same thing, and then too, sometimes we have themes to make things even a bit more interesting.

So here is where the fun begins. You get to decide what additional columns you want to display.

One typical need might be to display the names of upcoming Guest Callers. Let's add another column to our table.
==

<script type="text/javascript" wtd-table="table2" src="https://wheresthedance.com/userData/wtdSchedule.php?sponsorID=HuntPout1&col_1=date&col_2=caller"></script>

==

Adding that 2nd column in the script now results in a slightly more advanced table. (Did you see that we gave the 2nd table a different name so that we could have 2 tables on the same page?)

==========
==========

The resulting table is not all that pretty with those callers scrunched up against the date but we are going to just get the data figured out first, then we'll work on making it pretty (ugly). :-)

Notice in our example schedule that some of the callers have hyperlinked names. That will automatically happen if the callers have web sites. If the caller is calling a dance that is in a state different from the state that they live in, we're adding the state following their name. If the caller lives in another country from where the dance is happening, we'll add their country of residence.

Let's now add a column for the description of the dances. Visitors will want to know what level or such will occur. To add another column, we'll just add it to the end of the string that we have thus far. Here's what it should look like now.

==

<script type="text/javascript" wtd-table="table3" src="https://wheresthedance.com/userData/wtdSchedule.php?sponsorID=HuntPout1&col_1=date&col_2=caller&col_3=description"></script>

==

And here is the result...

==========

Some of our sample events have hyperlinked descriptions. Those will be links to flyers that have been added to those events.

==

<script type="text/javascript" wtd-table="table4" src="https://wheresthedance.com/userData/wtdSchedule.php?sponsorID=HuntPout1&col_1=date&col_2=caller&col_3=description&col_4=flyer"></script>

==

And here is the result...

==========

Those flyers are a bit large but we'll show you how to control their size in a short bit of time.

==

<script type="text/javascript" wtd-table="table5" src="https://wheresthedance.com/userData/wtdSchedule.php?sponsorID=HuntPout1&col_10=levelIcon&col_20=date&col_30=caller&col_40=description&col_50=flyer"></script>

==

And here is the result...

==========

Ok. I think you get the idea so far. If you have replaced your sponsorID, hopefully you are seeing what you expect. Onward to share more of the available columns of information that you've been dying to get ahold of.
Columns of data available to be displayed in a table 

	(Column names are case sensitive!)
	(Every column name after the first column name MUST be preceded by an ‘&’)

address		- Fully qualified mailing address, hyperlinked to map URL
caller		- Comma separated list of all square dance callers (Title defaults to ‘Caller’)
callers		- Comma separated list of all square dance callers (Title defaults to ‘Callers’)
caption		- The table will use the value as a title for the table
cuer			- Comma separated list of all round dance cuers (Title defaults to ‘Cuer’)
cuers		- Comma separated list of all round dance cuers
date		- Date of event
				Default date format is: Sep 8, 2016
				Alternate formats can be achieved by following the styles noted 
				in the PHP documentation at
				https://php.net/manual/en/function.date.php
				Some examples:
					&dateFormat=j, M Y		result: 7, Sep 2016
					&dateFormat=d.m.Y		result: 07.09.2016
dateRange	- Starting date and ending date of a multidate event displayed with => separator
description	- Description of dance event (with 'flyer’ hyperlink if a flyer exists)
directions		- Directions to facility if available
dow			- A full textual representation of the day (ie. Friday, Saturday, Sunday)
endDate		- Ending date of event
				See above for notes specific to the display of date
endTime		- Ending time of event
				See below for notes specific to the display of time
facilityName	- Name of facility (with ‘map’ hyperlink)
flyer		- Thumbnail representation of flyer with link to actual flyer
gps			- Lat – Lng
instructor		- Comma separated list of all other instructors  (Title defaults to ‘Instructor’)
instructors	- Comma separated list of all other instructors 
leaderPicture		- Captioned pictures all callers, cuers, instructors, horizontally 
leaderPictures		- Captioned pictures all callers, cuers, instructors, horizontally 
leaders		- Complete list of all callers, cuers, instructors listed in that order, 
				separated by newline. Includes hyperlinks to leader’s web site
				if one is known 
level			- levels offered at dance event
levelIcon		- Icon representing level/type of dance
logo			- Image of club logo (if available)
notes		- Notes
sponsorName	- Name of sponsor, includes hyperlink to club website if available
startDate		- Starting date of event, for use with multidate events.  
				Note: if single day event, same as ‘date’
				See above for notes specific to the display of date
startTime		- Starting time of event
				See below for notes specific to the display of time
theme		- Theme of dance
time			- Total event time, start to finish.  Example: 8:00pm – 10:00pm
				Default time format is: 8:00 pm
				Alternate formats can be achieved by following the styles noted 
				in the PHP documentation at
				https://php.net/manual/en/function.date.php
				Some examples:
					timeFormat=H:I	result: 19:30
week		- Week number of the given year, starting with the first Sunday as the first week

===

Titles of columns default to display the same as the selected column option but capitilized
	 (ie., date will have the title “Date”, caller will have the title “Caller”, etc),
	 however you can opt to name your own column headers.
	 The format for naming of column headers is similar to selection of specific options
	 but replace ‘col’ with ‘title’, example:

col_1=facilityName&title_1=Location

The above will display the facility in column 1 but the column header will read 'Location'

===
Filters
 
sponsorID	- an association ID will get you all events w/in that association.
leaderID
facilityID

	Note that filters are additive; the more you use, the less you see.

activity  - show only events with those activities  (class, workshop, dance)
dow       – show only those events on DAYOFWEEK date (1 = Sunday, 2 = Monday, …, 7 = Saturday)


displayDark=no / yes (default) if set to no, dark events will not be displayed
noHeaders	- Supresses column headers

===

All WTD table elements are classed as WTD, WTD_name.

Each row will have one of the following classes:
	wtd_class
	wtd_classDance
	wtd_classDanceWorkshop
	wtd_dance
	wtd_danceWorkshop
	wtd_workshop
 

CSS can color a row based on activity type, example:
 
.wtd_dance {
     background-color: yellow;
}
.wtd_class {
     background-color: blue;
}

	Examples of CSS:

<style>
.wtd_date {
width: 130px;
}
</style>
=== Other types of CSS that might be added could be items like these... table, th, td, .wtd { border: 1px solid black; } th, td, .wtd { padding:2px 4px 2px; } .wtd_center { text-align:center; } .wtd_dataTable { width: 800px; } .wtd_dark { font-weight: bold; color: red; } .wtd_description { width: 400px; } yellow { background-color; yellow; } <<Some Sample Code so you can see how CSS works>>
CSS is typically put into the header immed
<style>
.wtd_caption {
text-align:center;
font-size: 135%;
font-weight: bold;
background-color: #CCFFAA;

}
.wtd_sectionHeader {
text-align:center;
font-size: 125%;
font-weight: bold;
background-color: #CCFFCC;
}

th {
text-align:center;
font-size: 140%;
background-color: #CCFFFF;
color: red;
}

td {
border: 1px solid orange;
}

</style>