Jump to content

Music! at the town church Pforzheim


AndZyk
 Share

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
Link to comment
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.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Rudy
      Hi all 👋
      I made this searchable UIkit 3.x documentation site to share with everyone. The official doc is great but you can't search across the whole doc.
      Anyway, here is the URL: https://uikitdocs.netlify.app/
      What's missing is the live examples. Perhaps some of you can contribute? Github repo link is on the website as well.
      Cheers
    • By Chris Bennett
      https://github.com/chrisbennett-Bene/AdminThemeTweaker
      Inspired by @bernhard's excellent work on the new customisable LESS CSS getting rolled into the core soon, I thought I would offer up the module for beta testing, if it is of interest to anyone.

      It takes a different approach to admin styling, basically using the Cascade part of CSS to over-ride default UiKit values.
      Values are stored in ModuleConfig Module creates a separate AdminThemeTweaker Folder at root, so it can link to AdminThemeTweaker.php as CSS AdminThemeTweaker.php reads the module values, constructs the CSS variables then includes the CSS framework Can be switched on and off with a click. Uninstall removes everything, thanks to bernhard's wonderful remove dir & contents function.
      It won't touch your core. It won't care if stuff is upgraded. You won't need to compile anything and you don't need to touch CSS unless you want to.

      It won't do much at all apart from read some values from your module config, work out the right CSS variables to use (auto contrast based on selected backgrounds) and throw it on your screen.
      You can configure a lot of stuff, leave it as it comes (dark and curvy), change two main colors (background and content background) or delve deep to configure custom margins, height of mastheads, and all manner of silly stuff I never use.

      Have been developing it for somewhere around 2 years now. It has been (and will continue to be) constantly tweaked over that time, as I click on something and find something else to do.
      That said, it is pretty solid and has been in constant use as my sole Admin styling option for all of those 2 years.

      If nothing else, it would be great if it can provide any assistance to @bernhard or other contributor's who may be looking to solve some of the quirkier UiKit behavior.
      Has (in my opinion) more robust and predictable handling of hidden Inputfields, data-colwidths and showIf wrappers.
      I am very keen to help out with that stuff in any way I can, though LESS (and any css frameworks/tools basically) are not my go.
      I love CSS variables and banging-rocks-together, no-dependency CSS you can write with notepad.



       

    • By AndZyk
      The Architekturforum Freiburg sees itself as a regional platform for information and exchange about architecture, urban planning, landscape architecture and building culture. On the website you can register for events, view presentations or become a member.
      The website uses UIkit as framework and Workbox for the PWA.
      architekturforum-freiburg.de
       
      Features:
      Dynamic primary color Structured data  
      Dynamic primary color

      The events are grouped in programs and every program can have its own color. For this I used the awesome module Color. I defined a fixed color palette, so that no ugly colors could be selected and I worked for the first time with CSS variables. With CSS variables you are more flexible than with f.e. SCSS variables and can change the primary color for the whole website on the fly. This is used on the detail page of events with a different primary color.
       
      Structured data
      It was important for me to provide the correct structured data for the events. Since the pandemic they have been enhanced for online, offline and mixed events.
       
      Modules used:
      Repeater Matrix Form Builder Functional Fields Map Marker ProCache Upgrades TOTP two-factor authentication Tracy Debugger Color Sitemap Email Obfuscation (EMO)  
      Regards, Andreas
    • By fruid
      could someone help me find the javascript bug?
      https://codepen.io/bbblgmsp/pen/LYxWJJa
      or here:
      https://foobar.roofaccess.org/carousell/
      I want it to be NOT draggable on desktop but draggable on mobile devices. Also, on mobile, the element that I drag into focus should automatically be active, but on desktop, only when I click it.
      It works fine on desktop, but when you drag on mobile, after the dragged element is active and you click it, it switches back and forth between this and the previous element (assigns the active class to the previous element).
      I already tried to find help elsewhere, since this is not directly PW related but only frontend, but it's hard to find support or a community for uikit. PW seems to be using it quite a lot though…
      Thanks for help
    • By schwarzdesign
      We're currently working on a few sites that have some users with very limited access; most importantly, some users can only edit their own profile and nothing else in the backend. We're using AdminThemeUiKit, so the CMS navbar only contains the site logo and the username for those users. The problem is that the crucial "View site" link that gets you back to the frontend is hidden in the dropdown behind the username. This isn't immediately obvious (and TBH it does feel out of place there, even when you know it's there).
      I'm looking for ways to make the "back to site" link more visible – and I also think this is worth a discussion for AdminThemeUiKit in general. Here's what I have considered:
      Ideally, clicking the logo would take you back to the frontend (currently, you just get a blank page with nothing but an 'edit profile' button). I checked the settings, but the Uikit theme only has options to open the site tree or open a side navigation. Maybe a new option to go back to the frontend could be added? Or maybe the method that gets the logo link should be made hookable, so I could retain the default behaviour for editors, but change the link for users with limited access. An additional link in the menu would also work. But the only way I can think of to add this would be a Process module that just redirects to the homepage. But that's a bit overcomplicated, and I would like to do this without the additional redirect. Of course, copying the theme and modifying it manually or inserting a prominent link with JavaScript would work, but both options are sort of hacky and require some upkeep. Is there a better way? Have you come across this problem yet, and how did you solve it? I'm looking forward to suggestions!
×
×
  • Create New...