Changed example to vanilla js
This commit is contained in:
parent
4b9ec13fdd
commit
05309d3bfc
1 changed files with 16 additions and 12 deletions
28
README.md
28
README.md
|
@ -12,28 +12,32 @@ Just copy the files into your php capable webserver directory. Be sure, that the
|
||||||
|
|
||||||
Just call the url. You can filter by categories by adding /?filter=category to the request. You can expand the period of the events by adding /?period=<int> to the request. The number represents the amount of future months as an integer between 1..12.
|
Just call the url. You can filter by categories by adding /?filter=category to the request. You can expand the period of the events by adding /?period=<int> to the request. The number represents the amount of future months as an integer between 1..12.
|
||||||
|
|
||||||
## Example integration using jQuery.
|
## Example integration using vanilla ja
|
||||||
|
|
||||||
You will need to include a ``<div id="hackcal"></div>`` placeholder in your html page and embed also the jQuery js library.
|
You will need to include a ``<div id="hackcal"></div>`` placeholder in your html page and embed also the jQuery js library.
|
||||||
|
|
||||||
```
|
```
|
||||||
(function($) {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
|
||||||
var cal_uri = "https://YOURDOMAIN/hackcal/";
|
var cal_uri = "https://YOURDOMAIN/hackcal/";
|
||||||
var uri_regex = /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/\-_\.]*(\?\S+)?)?)?)/ig
|
var uri_regex = /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/\-_\.\:]*(\?\S+)?)?)?)/ig
|
||||||
|
|
||||||
$.getJSON(cal_uri, function(data) {
|
fetch(cal_uri).then(res => res.json()).then(data => {
|
||||||
var items = [];
|
var items = [];
|
||||||
$.each(data, function(date, day) {
|
Object.keys(data).forEach(function (date) {
|
||||||
items.push("<tr data-date='" + date + "'><th colspan='3'>" + day.name + "</th><th>" + day.weekday + "</th></tr>");
|
var day = new Date(date);
|
||||||
$.each(day.events, function(uid, event) {
|
items.push("<div data-date='" + date + "'><span>" + day.toLocaleDateString(true, {weekday:'short', day:'numeric', month:'long', year: 'numeric'}) + "</span></div>");
|
||||||
event.description = event.description.replace(/\n/g,"<br>").replace(uri_regex, "<a href='$1' target='_blank'>$1</a>");
|
Object.keys(data[date].events).forEach(function (uid) {
|
||||||
items.push("<tr data-uid='" + uid + "'><td>" + event.datestr + "</td><td>" + event.summary + "</td><td>" + ((event.location)?event.location:'') + "</td><td>" + ((event.description)?event.description:'') + "</td></tr>");
|
var event = data[date].events[uid];
|
||||||
|
if(event.location) event.location = event.location.replace(/\n/g,"<br>").replace(uri_regex, "<a href='$1' target='_blank'>$1</a>");
|
||||||
|
if(event.description) event.description = event.description.replace(/\n/g,"<br>").replace(uri_regex, (url) => {event.summary = `<a href='${url}' target='_blank'>${event.summary}</a>`; return "";});
|
||||||
|
items.push("<div data-uid='" + uid + "'><span>" + event.datestr + "</span><span><b>" + event.summary + "</b> | " + ((event.location)?event.location:'') + "<br/>" + ((event.description)?event.description:'') + "</span></div>");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
$('#hackcal').html("<table><tbody>" + items.join( "" ) + "</tbody></table>");
|
document.querySelector('#hackcal').innerHTML = items.join( "" );
|
||||||
});
|
});
|
||||||
|
|
||||||
})(jQuery);
|
});
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue