Jump to content
AndZyk

Music! at the town church Pforzheim

Recommended Posts

musik-stadtkirche-pforzheim.thumb.png.d5998a82c4541c7a5459fd7e8977c398.png

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

musik-stadtkirche-pforzheim-events.png.5195f0dd054befd2d8f6df54d7402738.png

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

musik-stadtkirche-pforzheim-event-download.png.e2814c636948063d529d5a0708bfe74f.png

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:

 

Regards, Andreas

 

  • Like 5

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

  • Like 4

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Peter Knight
      Hi guys
      I know some of you are UIKit fans like me. I built a site recently using UIKit 3 and I'm having some layout issues on IE 11 and largest breakpoints.
      You have to set quite a big resolution or have a large monitor to experience this as it only happens on largest breakpoints.
      The main column in the above URL is successfully centered in most browsers except IE11.
      On IE 11, it shifts to the right. Basically it's a DIV using the uk-width-expand selector and then I have a custom max width and a margin in there to centre the content horizontally.
      Here's a simple CodeKit and JSFiddle of the issue
      https://codepen.io/edenstudios/pen/qvWpGo
      https://jsfiddle.net/EdenSt/auekfgqt/8/
      Thanks
      P
       
       
    • By snobjorn
      I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point
      I have found the following resources:
      https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?
    • By AndZyk
      Gallery Claeys is a art gallery in Freiburg, Germany, with focus on exhibitions of female artists. Our agency designconcepts developed a website that features the latest exhibitions of the gallery as well as an archive of previous exhibitions. Every artist has its own page with an excerpt of their works and a vita of the artist.
      The website was build with help of the framework UIkit and Barba.js for smooth transitions between pages.
      www.galerie-claeys.de
       
      Features:
      Exhibitions Page transitions  
      Exhibitions
      On the homepage you can find a preview of upcoming or current exhibitions as well as an archive of previous exhibitions. Based on the date the exhibitions get automatically sorted in one of the three categories (preview, current or archive). Each category has its own deep-link with URL segment.
       
      Page transitions
      The smooth fading page transitions are made with Barba.js.
       
      Modules used:
      Front-End Page Editor Markup Sitemap XML ProCache Tracy Debugger Upgrades  
      Regards, Andreas
    • By SwimToWin
      Hi, I am in the process of creating a local news site, based on ProcessWire.
      Among other things, the site will be presenting local events, and I have a question specifically about recurring events.
      Events (recurring or not) shall be shown in *one* list, like in this example:
      10.01.2019 19:30 - Some event (Page #1235) 11.01.2019 17:15 - Another event (Page #1237) 12.01.2019 16:00 - The Final Event (Page #1239) When I have recurring events, I would like to keep these on the same page (using a Repeater field) as shown here:
      10.01.2019 19:00 - A Star is Born film, showing in Cinema ABC (Page #1234 holds all occurrences) 10.01.2019 19:30 - Some event (Page #1235) 11.01.2019 19:30 - A Star is Born film, showing in Cinema ABC (Page #1234 holds all occurrences) 11.01.2019 17:15 - Another event (Page #1237) 12.01.2019 20:00 - A Star is Born film, showing in Cinema ABC (Page #1234 holds all occurrences) 12.01.2019 16:00 - The Final Event (Page #1239) The editing interface will use these fields:
      id title date_start - a datetime field (use for one-time events) time_start - a text field dates - Repeat field with these sub-fields: date_start - a datetime field (use for recurring events) time_start - a text field Listing events by date_start is simple when the site only has run-once events (using the 'date_start' field). But when repeated events enter the picture, it is necesssary to generate all occurrences for each repeated event ('dates.date_start') - and join these with the list of run-once events ('date_start'). I am unsure if that is possible?
      PS: I am aware that Ryan created an Events fieldtype module, unfortunately the site needs more detail about each event than this module offers so it is easier to create a site-specific set of Event fields.
    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Four unique color options Beautifully redesigned login screens Modern typografy using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, so you can continue using all current and future AdminThemeUikit features Option to activate theme for all users   Updated and Releases
      There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss.   Color Variants:
      ProcessWire Blue


       
      Dark Black


       
      Vibrant Blue

       
      Happy Pink

      Requirements
      Requires a current ProcessWire version with AdminThemeUikit installed and activated.
      Installation
      Make sure AdminThemeUikit is activated Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeBoss“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“

      Manual Installation
      Make sure the above requirements are met Download the theme files from GitHub or the ProcessWire Modules Repository. Copy all of the files for this module into /site/modules/AdminThemeBoss/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeBoss“ Module
×
×
  • Create New...