2.6 KiB
Hackcal
This script is using PHP ICS Parser to parse ics files, e.g. from Nextcloud. The output is an very simple json for embedding the calender into html websites. Its presorted by days and preformatted to use less js on client side for date interpretation. The server part requires php-intl
Installation
Just copy the files into your php capable webserver directory. Be sure, that the cache folder is writeable by the script and the locale set in the index.php is available on the system.
Usage
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= to the request. The number represents the amount of future months as an integer between 1..12.
Example integration using vanilla js
You will need to include a <div id="hackcal"></div> placeholder in your html page.
document.addEventListener("DOMContentLoaded", function () {
var cal_uri = "https://YOURDOMAIN/hackcal/";
var uri_regex = /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/\-_\.\:]*(\?\S+)?)?)?)/ig
fetch(cal_uri).then(res => res.json()).then(data => {
var items = [];
Object.keys(data).forEach(function (date) {
var day = new Date(date);
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];
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( "" );
});
});
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}