Das könnte Ihre Homepage sein

Hier sehen sie ein Beispiel, wie sie Ihre Schultermine automatisch auf ihrer Schul-Homepage darstellen können

Menü

Homepage
…
…
…
Termine
…
…
Anleitung

Termine der Beispielschule

Die folgenden Termine gelten für das laufende Schuljahr. Bitte beachten Sie, dass einzelne Termine noch veränderlich sind.

Wir unterstützen schultermine.de. Teilnehmer erhalten Änderungen automatisch durch eine Benachrichtigung auf ihr Mobilgerät. Wenden Sie sich an ihren Klassenlehrer um die Zugangsdaten für die Klasse ihres Kindes zu erhalten.

Lade Termine...

Termine ändern

Diese Termine wurden direkt aus dem schultermine-Portal geladen und hier dargestellt. Klicken sie auf die folgende Schaltfläche, um die technischen Details zu erfahren.

Wie es funktioniert

Die Anzeige der Schultermine auf der Homepage ist sehr einfach. Ihr Webmaster wird damit keine Probleme haben. Der folgende Codeabschnitt demonstriert, wie die Daten aus dem Portal geladen und dargestellt werden können.

Hierzu wird zunächst ein div-Element benötigt, in das die Daten geladen werden

1 <div id="termine">Lade Termine...</div>

Als nächstes wird ein JavaScript Baustein erstellt, der die Daten vom Webservice lädt und eine HTML-Tabelle aufbaut. Natürlich kann diese dann individuell gestaltet werden.

1 jQuery(document).ready(function(){
2      //
3      // Important: The school access code is required and passed as parameter to the service
4      //
5      var stdataURL = "https://www.schultermine.de/ServiceV1/RestService/GetSchoolTimes/?school=CDU6KA";
6      var returnData = "";
7      jQuery.ajax({
8          type: "GET",
9          dataType: "json",
10          async: true,
11          url: stdataURL,
12          error: function(request, status, error) { alert(request.responseText) },
13          success: function(data) {
14              jQuery("div#termine").html(" ");
15              var temp = document.createElement('div');
16              returnData = "<table><tr><th>Termin</th><th>Veranstaltung</th><th>Bemerkung</th></tr>";
17              for (var i = 0; i < data.length; i++) {
18                var date=new Date(data[i]["date"])
19                let hoursDiff = date.getHours() - date.getTimezoneOffset() / 60;
20                let minutesDiff = (date.getHours() - date.getTimezoneOffset()) % 60;
21                date.setHours(hoursDiff);
22                date.setMinutes(minutesDiff);
23                var newdate=date.getDate()+'.'+(date.getMonth()+1)+'.'+date.getFullYear();
24                temp.textContent = data[i]["name"];
25                var name=temp.innerHTML;
26                temp.textContent = data[i]["description"];
27                var description=temp.innerHTML;
28                returnData += "<tr><td>" + newdate 
29                            + "</td><td>" + name + "</td><td>"
30                           + description + "</td></tr>";
31              }
32              returnData = returnData + "</table>";
33              jQuery("div#termine").html(returnData);
34          }
35      });
36      return (false);
37 });

1	jQuery(document).ready(function(){
2	//
3	// Important: The school access code is required and passed as parameter to the service
4	//
5	var stdataURL = "https://www.schultermine.de/ServiceV1/RestService/GetSchoolTimes/?school=CDU6KA";
6	var returnData = "";
7	jQuery.ajax({
8	type: "GET",
9	dataType: "json",
10	async: true,
11	url: stdataURL,
12	error: function(request, status, error) { alert(request.responseText) },
13	success: function(data) {
14	jQuery("div#termine").html(" ");
15	var temp = document.createElement('div');
16	returnData = "<table><tr><th>Termin</th><th>Veranstaltung</th><th>Bemerkung</th></tr>";
17	for (var i = 0; i < data.length; i++) {
18	var date=new Date(data[i]["date"])
19	let hoursDiff = date.getHours() - date.getTimezoneOffset() / 60;
20	let minutesDiff = (date.getHours() - date.getTimezoneOffset()) % 60;
21	date.setHours(hoursDiff);
22	date.setMinutes(minutesDiff);
23	var newdate=date.getDate()+'.'+(date.getMonth()+1)+'.'+date.getFullYear();
24	temp.textContent = data[i]["name"];
25	var name=temp.innerHTML;
26	temp.textContent = data[i]["description"];
27	var description=temp.innerHTML;
28	returnData += "<tr><td>" + newdate
29	+ "</td><td>" + name + "</td><td>"
30	+ description + "</td></tr>";
31	}
32	returnData = returnData + "</table>";
33	jQuery("div#termine").html(returnData);
34	}
35	});
36	return (false);
37	});