Music! at the town church Pforzheim

[AndZyk]

This is a website for the musical area of the protestant town church Pforzheim, Germany. Our agency designconcepts developed a website that provides informations about the choirs, ensembles and orchestras as well as dates for their rehearsals, services and concerts.

The website was build with help of the framework UIkit.

www.musik.stadtkirche-pforzheim.de

 

Features:

• Events
• Download dates

 

Events

The events for rehearsals, services and concerts were created in Microsoft Excel and then imported as pages from CSV. For better organization, events are cross-referenced with choirs, ensembles and orchestras. Services and concerts are displayed in a events list, but rehearsals are only displayed on the page of the choir, ensemble or orchestra, to make the events list more compact.

 

Download dates

It is possible to download every event date as ICS file, which will be generated on clicking the download button. You can then add this event easily to your calendar app and stay up-to-date.

 

Modules used:

• Email Obfuscation (EMO)
• Front-End Page Editor
• Import Pages from CSV
• Markup Sitemap XML
• ProCache
• Tracy Debugger
• Upgrades
• Wire Mail SMTP

 

Regards, Andreas

 

[horst]

Very nice site!

May I ask how you realized the calendar.ics part?

I'm currently building the same. I created two templates, a parent container and the ics-calendar children. Every calendar event will be build as a childpage. The childpages will be embedded per pagereference field where needed. The URL is included, and when downloading the type is text/calendar.

Have you experiences if the compact vcalendar format you uses is suffient with different MS-Outlook applications? I found some examples in the web with additional X-MS-OLK- and X_Microsoft-... Params.

[pwired]

Quote

The website was build with help of the framework UIkit.

What uikit version did you use ? I don't see any of this: /*! UIkit 3.x.x | http://www.getuikit.com | (c) 2014 - 2018 YOOtheme | MIT License */
in your loaded uikit css file.

[AndZyk]

58 minutes ago, horst said:

Very nice site!

May I ask how you realized the calendar.ics part?

I'm currently building the same. I created two templates, a parent container and the ics-calendar children. Every calendar event will be build as a childpage. The childpages will be embedded per pagereference field where needed. The URL is included, and when downloading the type is text/calendar.

Have you experiences if the compact vcalendar format you uses is suffient with different MS-Outlook applications? I found some examples in the web with additional X-MS-OLK- and X_Microsoft-... Params.

Thank you. ?

My solution was to include a script for converting PHP to ICS, if you visit the event template with the URL segment "/download/".

Tricky was to format all data for the ICS format. Here is my version of the script mentioned above:

<?php namespace ProcessWire;

// Variables used in this script:
//   $summary     - text title of the event
//   $datestart   - the starting date (in seconds since unix epoch)
//   $dateend     - the ending date (in seconds since unix epoch)
//   $address     - the event's address
//   $uri         - the URL of the event (add http://)
//   $description - text description of the event
//   $filename    - the name of this file for saving (e.g. my-event-name.ics)
//
// Notes:
//  - the UID should be unique to the event, so in this case I'm just using
//    uniqid to create a uid, but you could do whatever you'd like.
//
//  - iCal requires a date format of "yyyymmddThhiissZ". The "T" and "Z"
//    characters are not placeholders, just plain ol' characters. The "T"
//    character acts as a delimeter between the date (yyyymmdd) and the time
//    (hhiiss), and the "Z" states that the date is in UTC time. Note that if
//    you don't want to use UTC time, you must prepend your date-time values
//    with a TZID property. See RFC 5545 section 3.3.5
//
//  - The Content-Disposition: attachment; header tells the browser to save/open
//    the file. The filename param sets the name of the file, so you could set
//    it as "my-event-name.ics" or something similar.
//
//  - Read up on RFC 5545, the iCalendar specification. There is a lot of helpful
//    info in there, such as formatting rules. There are also many more options
//    to set, including alarms, invitees, busy status, etc.
//
//      https://www.ietf.org/rfc/rfc5545.txt



$filename = page()->name . ".ics";

// 1. Set the correct headers for this file
header('Content-type: text/calendar; charset=utf-8');
header('Content-Disposition: attachment; filename=' . $filename);

// 2. Define helper functions

// Converts a unix timestamp to an ics-friendly format
// NOTE: "Z" means that this timestamp is a UTC timestamp. If you need
// to set a locale, remove the "\Z" and modify DTEND, DTSTAMP and DTSTART
// with TZID properties (see RFC 5545 section 3.3.5 for info)
//
// Also note that we are using "H" instead of "g" because iCalendar's Time format
// requires 24-hour time (see RFC 5545 section 3.3.12 for info).
function dateToCal($timestamp) {
	return gmdate('Ymd\THis\Z', $timestamp);
}

// Escapes a string of characters
function escapeString($string) {
	return preg_replace('/([\,;])/','\\\$1', $string);
}

// 3. Echo out the ics file's contents
?>
BEGIN:VCALENDAR
CALSCALE:GREGORIAN
VERSION:2.0
PRODID:-//Stadtkirche Pforzheim//NONSGML ProcessWire//DE
<?php
	if (page()->template == "event"):

		$summary = page()->getUnformatted("headline");
		$dateStart = page()->dateStart;
		$dateEnd = page()->dateEnd;
		$address = page()->place->getUnformatted("title");
		$uri = page()->httpUrl;
		$description = strip_tags(page()->getUnformatted("summary"));
?>
BEGIN:VEVENT
DTEND:<?= dateToCal($dateEnd) . "\n"; ?>
UID:<?= uniqid() . "\n"; ?>
DTSTAMP:<?= dateToCal(time()) . "\n"; ?>
LOCATION:<?= escapeString($address) . "\n"; ?>
DESCRIPTION:<?= escapeString($description) . "\n"; ?>
URL;VALUE=URI:<?= escapeString($uri) . "\n"; ?>
SUMMARY:<?= escapeString($summary) . "\n"; ?>
DTSTART:<?= dateToCal($dateStart) . "\n"; ?>
END:VEVENT
<?php
	elseif (page()->template == "ensemble"):

		$eventsPage = pages()->get("template=events");
		$events = pages()->find("template=event, has_parent=$eventsPage, ensemblesSinging|ensemblesPlaying=$page, sort=dateStart, dateStart>" . time());

		foreach ($events as $event):

			$summary = $event->getUnformatted("headline");
			$dateStart = $event->dateStart;
			$dateEnd = $event->dateEnd;
			$address = $event->place->getUnformatted("title");
			$uri = $event->httpUrl;
			$description = strip_tags($event->getUnformatted("summary"));
?>
BEGIN:VEVENT
DTEND:<?= dateToCal($dateEnd) . "\n"; ?>
UID:<?= uniqid() . "\n"; ?>
DTSTAMP:<?= dateToCal(time()) . "\n"; ?>
LOCATION:<?= escapeString($address) . "\n"; ?>
DESCRIPTION:<?= escapeString($description) . "\n"; ?>
URL;VALUE=URI:<?= escapeString($uri) . "\n"; ?>
SUMMARY:<?= escapeString($summary) . "\n"; ?>
DTSTART:<?= dateToCal($dateStart) . "\n"; ?>
END:VEVENT
<?php
		endforeach;

	endif;
?>
END:VCALENDAR

I have never bothered to try any other calendar format than ICS, because ICS is the only standard calendar format I know of.

 

27 minutes ago, pwired said:

What uikit version did you use ? I don't see any of this: /*! UIkit 3.x.x | http://www.getuikit.com | (c) 2014 - 2018 YOOtheme | MIT License */
in your loaded uikit css file.

I usually use the latest version installed with Yarn and then compile the source SCSS. The source SCSS files don't seem to have the comment.