infra/hackcal
2
0
Fork 0
Code Issues Pull requests Wiki Activity Actions

simplified js a bit and added ccs example

Browse source
This commit is contained in:
Patrick Schwarz 2024-01-12 12:13:13 +01:00
parent eef688d41b
commit 35639c7dde
1 changed files with 14 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

18
README.md
View file

@ -12,7 +12,7 @@ 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.
## Example integration using vanilla ja
## Example integration using vanilla js
You will need to include a ``<div id="hackcal"></div>`` placeholder in your html page.
@ -29,9 +29,10 @@ document.addEventListener("DOMContentLoaded", function () {
items.push("<div data-date='" + date + "'><span>" + day.toLocaleDateString(true, {weekday:'short', day:'numeric', month:'long', year: 'numeric'}) + "</span></div>");
Object.keys(data[date]).forEach(function (uid) {
var event = data[date][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>");
var location = (event.location)?event.location.replace(/\n/g,"<br>").replace(uri_regex, "<a href='$1' target='_blank'>$1</a>"):'';
var description = (event.description)?event.description.replace(/\n/g,"<br>").replace(uri_regex, (url) => {event.summary = `<a href='${url}' target='_blank'>${event.summary}</a>`; return "";}):'';
var categories = (event.categories)?"<i>" + event.categories.replace(",", "</i> <i>") + "</i>":'';
items.push("<div data-uid='" + uid + "'><span>" + event.datestr + "</span><span><b>" + event.summary + "</b> | " + location + "<br/>" + description + categories + "</span></div>");
});
});
document.querySelector('#hackcal').innerHTML = items.join( "" );
@ -41,3 +42,12 @@ document.addEventListener("DOMContentLoaded", function () {
```
## Sample CSS
```
#hackcal {border: 1px solid #CCC}
#hackcal div {display: flex; padding: 8px 14px}
#hackcal [data-date] {background: #CCC; font-weight: bold}
#hackcal [data-uid] {font-size: .9em; gap: .5em; line-height: 1.5em}
#hackcal [data-uid] span:first-child {flex: 0 0 3em; font-weight: bold}
```