Created
January 27, 2016 19:24
-
-
Save kralo/8d727416f76efc826da1 to your computer and use it in GitHub Desktop.
Small demo how to display an html widget for calendar events from the teamup API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <p>requirejs is used here in order to make the html snippet / widget work in the 1&1 MyWebsite </p> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js"></script> | |
| <div id="CalData"><p>Wird geladen...</p> | |
| </div> | |
| <script type="text/javascript"> | |
| require.config({ | |
| paths: { | |
| moment: '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min', | |
| moment_de: 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/locale/de' | |
| } | |
| }); | |
| require(['moment', 'moment_de'], function (moment) { | |
| /* Creates a CORS request in a cross-browser manner | |
| This example is taken from the official API docs http://apidocs.teamup.com/#querying-the-api-via-javascript-/-cors | |
| with the display function added*/ | |
| function createCORSRequest(method, url) { | |
| var apiKey = 'your-api-token-here'; | |
| var xhr = new XMLHttpRequest(); | |
| if ("withCredentials" in xhr) { | |
| /* XHR for Chrome/Firefox/Opera/Safari/IE10+.*/ | |
| xhr.open(method, url, true); | |
| xhr.setRequestHeader('Teamup-Token', apiKey); | |
| } else if (typeof XDomainRequest != "undefined") { | |
| /* XDomainRequest for IE8/IE9.*/ | |
| xhr = new XDomainRequest(); | |
| /* XDomainRequest does not support querying HTTPS from HTTP pages*/ | |
| if (window.location.protocol === 'http:') { | |
| url = url.replace('https://', 'http://'); | |
| } | |
| if (-1 === ['GET', 'POST'].indexOf(method)) { | |
| alert('XDomainRequest only supports GET and POST methods'); | |
| return; | |
| } | |
| if (-1 === url.indexOf('?')) { | |
| url += '?_teamup_token=' + apiKey; | |
| } else { | |
| url += '&_teamup_token=' + apiKey; | |
| } | |
| xhr.open(method, url); | |
| } else { | |
| /* CORS not supported.*/ | |
| xhr = null; | |
| } | |
| return xhr; | |
| } | |
| /* Sends the actual CORS request.*/ | |
| function makeCorsRequest(url, successCallback, errorCallback) { | |
| var xhr = createCORSRequest('GET', url); | |
| if (!xhr) { | |
| alert('CORS not supported'); | |
| return; | |
| } | |
| /* Response handlers.*/ | |
| xhr.onload = function (xhr) { | |
| if (xhr.target.status < 400) { | |
| if (successCallback) successCallback(xhr.target); | |
| } else if (errorCallback) { | |
| errorCallback(xhr.target); | |
| } | |
| }; | |
| xhr.onerror = function (xhr) { | |
| if (errorCallback) { | |
| errorCallback(xhr.target); | |
| } | |
| }; | |
| xhr.send(); | |
| } | |
| function processAndDisplay(data) { | |
| var element = document.getElementById("CalData"); | |
| element.innerHTML = ''; | |
| var table = document.createElement('table'); | |
| for (event of data.events) { | |
| if (event.subcalendar_id == '1234567') /* only in a specific sub-calendar*/ { | |
| var terminstart = moment(event.start_dt); | |
| table.innerHTML = table.innerHTML + '<tr><td>' + terminstart.format('dd') + '</td><td>' + terminstart.format('L LT') + '</td></tr><tr><td></td><td>' + event.title.replace('FFW:', '') + '</td></tr>'; | |
| } | |
| } | |
| element.appendChild(table); | |
| } | |
| moment.locale('de'); | |
| queryEnd = moment().add(18, 'days'); | |
| /* Send a GET request for all events in a date range*/ | |
| makeCorsRequest( | |
| 'https://api.teamup.com/your-calendar-key-here/events?startDate=now&endDate=' + queryEnd.format('YYYY-MM-DD'), | |
| function (xhr) { | |
| var data = JSON.parse(xhr.responseText); | |
| processAndDisplay(data); | |
| }, | |
| function (xhr) { | |
| /*var data = JSON.parse(xhr.responseText); | |
| alert('Request failed with code '+ xhr.status +': ' + JSON.stringify(data));*/ | |
| } | |
| ); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Wow man.. That's awsome! Could i have a version of the script for obtaining the other appointment data?
For example:
"TITLE"
"START_DT"
"SUBCALENDAR_IDS"
"WHO"
"WHERE"
"NOTES"