For some time now, we've been internally using an API that facilitates remote access to the inner workings of MotorsportReg.com. Today, we're excited to announce general availability of the service to our customers and partners. Customers with or without development expertise in house can take advantage of our API to incorporate their data into their own applications and websites. Understand the implications are very powerful: this can eliminate manual updates to your website for event-related information! We'll show you two ways you can integrate these listings directly onto your own website.

The Flexible Way

Most of the service endpoints require authentication to keep data secure, but we have exposed the organization event calendar feed without restriction. Every customer can quickly get started with the API and include their event calendar on their own website, in this example, using pure Javascript. There are more sophisticated ways but we'll start simple and expand over time. For this example, we are using jQuery, a popular and very powerful Javascript library. Our example below includes the library and depends upon it to function. Take a look:

MotorsportReg.com Calendar API Test
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<br>$(document).ready(function()<br>{<br>	$.getJSON('https://api.motorsportreg.com/rest/calendars/organization/{your-club-id-here}.jsonp?jsoncallback=?'<br>		,{ <br>			dataType: "jsonp"<br>			,cacheBuster: new Date()<br>		 }<br>		,function(json) <br>		{<br>			var tbl = '<table>';<br>			$.each(json.response.events, function(i, evt) <br>			{<br>				tbl += '<tr>';<br>				tbl += '<td><a href="' + evt.detailuri + '">' + evt.name + '</a></td>';<br>				tbl += '<td>' + evt.type + '</td>';<br>				tbl += '<td>' + evt.venue.city + ', ' + evt.venue.region + '</td>';<br>				tbl += '<td>' + evt.start + '</td>';<br>				tbl += '<td>' + evt.end + '</td>';<br>				tbl += '<td>' + ((typeof(evt.registration.start) === 'undefined') ? '' : evt.registration.start) + '</td>';<br>				tbl += '</tr>';<br>			});<br>			<br>			tbl += '<' + '/table>';<br>			$('#msrCalendar').append(tbl);<br>		}<br>	);	<br>});			<br><br>
</script>
<div id="msrCalendar"> </div>

Once you replace {your-club-id-here} with your actual ID (contact us for details), then you'll see something like the following in your browser:

Obviously, without any styles applied, it will look very generic but when embedded in your site it will inherit the style of your other tables. Using the HTML ID "msrCalendar", you can apply styles specifically to this table to enhance the listings.

The Easy Way

Now, some of you might be looking at this with glossy eyes wondering if there could be a one line solution that would get your calendar on your site. How about a calendar like this one for PCA Northern New Jersey?Would that work? Yes you say? Well, then here be it - one line of code to rule them all:

<iframe style="border: 1px solid #ccc; margin: 10px 0; display: block;" src="https://api.motorsportreg.com/rest/calendars/organization/EF396322-CFC3-7452-49FF38E2C1A34BD0.html" width="560" height="200"></iframe>

This approach gives you less control. For example, there is no way to adjust the styling outside of the border, but it really couldn't be any simpler. Just get your organization ID from us and you're up and running 30 seconds later.We recommend that you leave the width as 100% so it will take up as much space as the bounding container (whatever HTML surrounds it) will allow. This will likely lead to the best display output.