ProcessWire - Veranstaltungskalender: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 325: Zeile 325:
 
=== Template Dateien ===
 
=== Template Dateien ===
  
−
'''events.php'''
+
==== events.php ====
 
<syntaxhighlight lang="php">
 
<syntaxhighlight lang="php">
 
<?php namespace ProcessWire;
 
<?php namespace ProcessWire;
 +
 +
$today = strtotime(date('Y-m-d'));
  
 
$additionalHeaderData .= '
 
$additionalHeaderData .= '
Zeile 352: Zeile 354:
 
'height' => '420',
 
'height' => '420',
 
);
 
);
−
$mySelector = 'template=event,event_no_location=0';
+
 
 +
$mySelector = "template=event,event_no_location=0,event_date>=$today";
 
$events = $pages->find($mySelector);
 
$events = $pages->find($mySelector);
 
$mapMarkup = $map->render($events, 'location' ,$options);
 
$mapMarkup = $map->render($events, 'location' ,$options);
Zeile 361: Zeile 364:
  
 
// LIST
 
// LIST
−
$mySelector = 'template=event,limit=8,sort=-date';
+
$mySelector = "template=event,limit=20,sort=event_date,event_date>=$today";
 
$events = $pages->find($mySelector);
 
$events = $pages->find($mySelector);
 
$eventListMarkup = '';
 
$eventListMarkup = '';
−
$timeMarkup = '';
+
 
−
$datemarkup = '';
 
  
 
$eventListWrap = '<ul class="uk-list uk-list-striped event-list">|</ul>';
 
$eventListWrap = '<ul class="uk-list uk-list-striped event-list">|</ul>';
Zeile 373: Zeile 375:
 
$timeWrap = '<div class="time">| Uhr</div>';
 
$timeWrap = '<div class="time">| Uhr</div>';
 
foreach($events as $event){
 
foreach($events as $event){
 +
$timeMarkup = '';
 +
$datemarkup = '';
 +
$bodyMarkup = '';
 
$infoMarkup = '';
 
$infoMarkup = '';
 +
$readMore = '';
 
// Headline
 
// Headline
−
$headline = '<h2><a href="'.$event->url().'">'.$event->title.'</a></h2>';
+
$headline = '<h3 class="no-margin-bottom"><a href="'.$event->url().'">'.$event->title.'</a></h3>';
 
// Body
 
// Body
−
$bodyMarkup = '
+
if(!empty($event->text)){
−
<div class="text">
+
$truncatedText = truncateText($event->text,200);
−
'.truncateText($event->text,200).'...
+
$bodyMarkup = '
−
</div>
+
<div class="text">
−
<p><a href="'.$event->url().'">Mehr lesen</a></p>
+
'.truncateText($event->text,200).'
−
';
+
</div>
 +
';
 +
( strlen($truncatedText) < strlen(trim($event->text) ) ) ? $readMore = '<p><a href="'.$event->url().'">Details</a></p>' : $readMore = '';
 +
}
 +
 
 
// Date
 
// Date
 
$dateMarkup =  $event->event_date;
 
$dateMarkup =  $event->event_date;
 
if($event->event_enddate){
 
if($event->event_enddate){
−
$dateMarkup .= ' - '.$event->event_enddate;
+
$dateMarkup .= ' <br>- '.$event->event_enddate;
 
}
 
}
 
$dateMarkup = wrap($dateMarkup,$dateWrap);
 
$dateMarkup = wrap($dateMarkup,$dateWrap);
 +
 
// Time
 
// Time
−
if($event->event_starttime){
+
//var_dump($event->event_starttime);
 +
if($event->event_starttime && $event->event_starttime != "00:00"){
 
$timeMarkup = $event->event_starttime;
 
$timeMarkup = $event->event_starttime;
 
if($event->event_endtime) $timeMarkup .= ' - '.$event->event_endtime;
 
if($event->event_endtime) $timeMarkup .= ' - '.$event->event_endtime;
 
$timeMarkup = wrap($timeMarkup,$timeWrap);
 
$timeMarkup = wrap($timeMarkup,$timeWrap);
 
}
 
}
−
 
+
// place
 +
$addressMarkup = '';
 +
if(!empty($event->address_custom)){
 +
$addressMarkup = implode(',',explode("\n", $event->address_custom));
 +
}
 
$eventMarkup = '
 
$eventMarkup = '
−
'.$headline.'
+
<div class="uk-grid uk-padding" uk-grid>
−
<div class="datebox uk-clearfix">
+
<div class="uk-width-auto">
−
<div class="uk-float-left uk-background-primary uk-margin-right uk-padding-small">
+
<div class="datebox uk-tile uk-tile-primary uk-padding-small uk-background-primary uk-margin-right">
−
'.$dateMarkup.'
+
'.$dateMarkup.'
−
'.$timeMarkup.'
+
'.$timeMarkup.'
 
</div>
 
</div>
−
'.$bodyMarkup.'
 
 
</div>
 
</div>
 +
<div class="uk-width-expand">
 +
'.$headline.'
 +
'.$bodyMarkup.'
 +
'.$addressMarkup.'
 +
'.$readMore.'
 +
</div>
 +
</div>
 +
 
';
 
';
  
Zeile 413: Zeile 436:
  
 
?>
 
?>
−
<div class="uk-width-expand" id="content">
+
<main id="main" class="homepage">
−
<h1>Veranstaltungen und Termine</h1>
+
<div class="uk-section uk-section-default uk-section-m uk-padding-remove-top" style="">
−
<div class="map">
+
<div class="uk-container uk-container-small">
−
<?=$mapMarkup?>
+
<h1><?=$page->title?></h1>
−
</div>
+
<div class="map">
−
<p class="uk-text-muted uk-padding-small">Hinweis: Diese Karte zeigt bis zu 100 der anstehenden Termine an.</p>
+
<?=$mapMarkup?>
−
<div class="uk-grid" uk-grid>
+
</div>
−
<div class="uk-width-expand">
+
<div class="uk-grid" uk-grid>
−
<?=$eventListMarkup?>
+
<div class="uk-width-expand">
−
</div>
+
<?=$eventListMarkup?>
−
<!--
+
</div>
−
<div class="uk-width-auto">
+
</div>
−
Search goes here
 
 
</div>
 
</div>
−
-->
 
 
</div>
 
</div>
−
</div>
 
  
−
<aside id="sidebar" class="pw-remove">
+
</main>
−
</aside>
 
  
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
'''event.php'''
+
==== event.php ====
 
<syntaxhighlight lang="php">
 
<syntaxhighlight lang="php">
 
<?php namespace ProcessWire;
 
<?php namespace ProcessWire;
Zeile 478: Zeile 497:
  
 
$pageWrap = '<div class="event uk-grid" uk-grid>|</div>';
 
$pageWrap = '<div class="event uk-grid" uk-grid>|</div>';
−
$dateWrap = '<div class="date">|</div>';
+
$dateWrap = '<h5 class="uk-margin-remove-bottom">Datum</h5><div class="date">|</div>';
 
$timeWrap = '<div class="time">| Uhr</div>';
 
$timeWrap = '<div class="time">| Uhr</div>';
−
$organizerWrap = '<div class="organizer"><h5>Veranstalter</h5><p>|</p></div>';
+
$organizerWrap = '<div class="organizer"><h5 class="uk-margin-remove-bottom">Veranstalter</h5><p class="uk-margin-remove-top">|</p></div>';
−
$placeWrap = '<div class="place"><h5>Ort</h5><p>|</p></div>';
+
$placeWrap = '<div class="place"><h5 class="uk-margin-remove-bottom">Ort</h5><p class="uk-margin-remove-top">|</p></div>';
 
$permanentLinkWrap = '<p class="uk-text-align-center permanentLink">|</p>';
 
$permanentLinkWrap = '<p class="uk-text-align-center permanentLink">|</p>';
  
Zeile 487: Zeile 506:
  
 
// Headline
 
// Headline
−
$headline = '<h1>'.$page->title.'</h1>';
+
$headline = '<h1 class="">'.$page->title.'</h1>';
  
 
// Body
 
// Body
Zeile 504: Zeile 523:
  
 
// Time
 
// Time
−
if($page->event_starttime){
+
// For a value with Hours and Mins...
 +
//$selector_time_string = date('H:m:00', $time); // or...
 +
//$selector_time_string = FieldtypeTime::formattedStringToTime(date('H:m', $time), 'HH24MM');
 +
//var_dump($page->event_starttime);
 +
if($page->event_starttime && $page->event_starttime != 0){
 
$timeMarkup = $page->event_starttime;
 
$timeMarkup = $page->event_starttime;
 
if($page->event_endtime) $timeMarkup .= ' - '.$page->event_endtime;
 
if($page->event_endtime) $timeMarkup .= ' - '.$page->event_endtime;
Zeile 520: Zeile 543:
 
if($page->address_email)  $organizerMarkup .= '<span class="email"><span uk-icon="icon:mail"></span> <a href="mailto:'.$page->address_email.'" class="">'.$page->address_email.'</a></span><br>';
 
if($page->address_email)  $organizerMarkup .= '<span class="email"><span uk-icon="icon:mail"></span> <a href="mailto:'.$page->address_email.'" class="">'.$page->address_email.'</a></span><br>';
 
if($page->address_phone)  $organizerMarkup .= '<span class="phone"><span uk-icon="icon:phone"></span> <a href="tel:'.$page->address_phone.'" class="">'.$page->address_phone.'</a></span><br>';
 
if($page->address_phone)  $organizerMarkup .= '<span class="phone"><span uk-icon="icon:phone"></span> <a href="tel:'.$page->address_phone.'" class="">'.$page->address_phone.'</a></span><br>';
−
$organizerMarkup = wrap($organizerMarkup,$organizerWrap);
+
if(!empty($organizerMarkup)) $organizerMarkup = wrap($organizerMarkup,$organizerWrap);
  
 
// Place
 
// Place
Zeile 533: Zeile 556:
 
// Together now...
 
// Together now...
 
$pageMarkup = '
 
$pageMarkup = '
−
<div class="uk-width-1-3@s uk-margin-top">
+
<div class="uk-grid uk-padding" uk-grid>
−
<div class=" uk-background-muted uk-padding-small">
+
<div class="uk-width-1-3@s uk-margin-top uk-background-muted uk-padding-small">
−
'.$dateMarkup.'
+
'.$dateMarkup.'
−
'.$timeMarkup.'
+
'.$timeMarkup.'
−
'.$organizerMarkup.'
+
'.$organizerMarkup.'
−
'.$placeMarkup.'
+
'.$placeMarkup.'
−
'.$permanentLink.'
+
'.$permanentLink.'
−
</div>
 
 
</div>
 
</div>
 
<div class="uk-width-2-3@s uk-margin-top">
 
<div class="uk-width-2-3@s uk-margin-top">
Zeile 546: Zeile 568:
 
'.$bodyMarkup.'
 
'.$bodyMarkup.'
 
</div>
 
</div>
 +
</div>
 +
<p><a href="'.$page->parent->url.'">Zurück zur Übersicht</a></p>
 
';
 
';
  
Zeile 553: Zeile 577:
 
?>
 
?>
  
−
<div class="uk-width-expand" id="content">
+
<main id="main" class="homepage">
−
<div class="map">
+
<div class="uk-section uk-section-default uk-section-m uk-padding-remove-top" style="">
−
<?=$mapMarkup?>
+
<div class="uk-container uk-container-small">
−
</div>
+
<h1><?=$page->title?></h1>
−
<div class="uk-grid" uk-grid>
+
<div class="map">
−
<div class="uk-width-expand">
+
<?=$mapMarkup?>
−
<?=$pageListMarkup?>
 
−
<div class="uk-margin-top">
 
−
<p><a href="<?=$page->parent->url()?>"><button class="uk-button uk-button-primary">Zurück zur Übersicht</button></a></p>
 
 
</div>
 
</div>
 +
<?=$pageMarkup?>
 
</div>
 
</div>
−
 
−
 
−
 
 
</div>
 
</div>
−
</div>
 
  
−
<aside id="sidebar" class="pw-remove">
+
</main>
−
</aside>
 
  
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
=== Template Import Code ===
+
==== Template Import Code ====
 
<syntaxhighlight lang="json">
 
<syntaxhighlight lang="json">
 
{
 
{
Zeile 767: Zeile 784:
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
== Sortierung und Seitennamen ==
 +
Im Backend wollen wir mehr Übersicht.
 +
 +
=== Datum bei Eventseiten anzeigen ===
 +
Im Event Template bei Erweitert unter pagelabelField (List der Felder....)
 +
title event_date
 +
eingeben
 +
 +
=== Nach Datum sortieren ===
 +
Im Events Template (Liste) unter  '''Familie > Sortierungseinstellungen für Unterseiten'''
 +
event_date und Umgekehrte Sortierreichenfolge
 +
Dann werden die aktuellsten Termine oben angezeigt.
 +
 +
=== Im Template keine vergangenen Termine anzeigen ===

Aktuelle Version vom 16. Oktober 2018, 09:36 Uhr

Kleines Tutorial um einen Veranstaltungskalender zu erstellen

Hinweise / Voraussetzungen[Bearbeiten]

Module[Bearbeiten]

LeafletMapMarker für Kartendarstellung
InputfieldTime für Zeit (besser als datetime

Fields[Bearbeiten]

Feldname / Feldlabel / Feldtyp
event_date Datum Datetime 	
event_enddate Enddatum Datetime
event_endtime Ende Time
event_no_location Kein Ort Checkbox 
event_organizer Veranstalter Text
event_starttime Beginn Time 
location Ort (Leaflet) LeafletMapMarker
address_zip
address_email
address_web
address_custom

Fields Import Code[Bearbeiten]

{
    "address_custom": {
        "id": 269,
        "type": "FieldtypeTextarea",
        "flags": 0,
        "name": "address_custom",
        "label": "Adresse",
        "notes": "Wird - wenn ausgefüllt - an Stelle der vom Geocoder ermittelten Adresse ausgegeben.",
        "textformatters": [
            "TextformatterEntities"
        ],
        "inputfieldClass": "InputfieldTextarea",
        "contentType": 1,
        "htmlOptions": [
            2,
            4
        ],
        "collapsed": 0,
        "minlength": 0,
        "maxlength": 0,
        "showCount": 0,
        "rows": 4,
        "columnWidth": 50,
        "icon": "address-book-o",
        "tags": "events",
        "showIf": "",
        "themeOffset": "",
        "themeBorder": "",
        "themeColor": "",
        "required": "",
        "requiredAttr": "",
        "requiredIf": "",
        "stripTags": "",
        "placeholder": ""
    },
    "address_email": {
        "id": 203,
        "type": "FieldtypeEmail",
        "flags": 0,
        "name": "address_email",
        "label": "E-Mail Adresse",
        "textformatters": [
            "TextformatterEntities"
        ],
        "collapsed": 0,
        "themeColor": "primary",
        "columnWidth": 25,
        "minlength": 0,
        "maxlength": 512,
        "showCount": 0,
        "size": 0,
        "tags": "-anbieter events",
        "icon": "address-card-o",
        "showIf": "",
        "themeOffset": "",
        "themeBorder": "",
        "required": "",
        "requiredAttr": "",
        "requiredIf": "",
        "placeholder": "",
        "confirm": ""
    },
    "address_phone": {
        "id": 215,
        "type": "FieldtypeText",
        "flags": 0,
        "name": "address_phone",
        "label": "Telefon",
        "textformatters": [
            "TextformatterEntities"
        ],
        "themeColor": "primary",
        "columnWidth": 25,
        "minlength": 0,
        "maxlength": 2048,
        "showCount": 0,
        "size": 0,
        "tags": "anbieter events",
        "icon": "address-card-o",
        "collapsed": 0,
        "showIf": "",
        "themeOffset": "",
        "themeBorder": "",
        "required": "",
        "requiredAttr": "",
        "requiredIf": "",
        "stripTags": "",
        "placeholder": "",
        "pattern": ""
    },
    "address_web": {
        "id": 204,
        "type": "FieldtypeURL",
        "flags": 0,
        "name": "address_web",
        "label": "Website",
        "textformatters": [
            "TextformatterEntities"
        ],
        "noRelative": 0,
        "allowIDN": 0,
        "allowQuotes": 0,
        "addRoot": 0,
        "collapsed": 0,
        "minlength": 0,
        "maxlength": 1024,
        "showCount": 0,
        "size": 0,
        "themeColor": "primary",
        "columnWidth": 25,
        "tags": "anbieter events",
        "icon": "address-book-o",
        "showIf": "",
        "themeOffset": "",
        "themeBorder": "",
        "required": "",
        "requiredAttr": "",
        "requiredIf": "",
        "placeholder": "",
        "pattern": ""
    },
    "event_date": {
        "id": 229,
        "type": "FieldtypeDatetime",
        "flags": 0,
        "name": "event_date",
        "label": "Datum",
        "dateOutputFormat": "j.n.Y",
        "collapsed": 0,
        "columnWidth": 25,
        "required": 1,
        "size": 10,
        "datepicker": 3,
        "timeInputSelect": 0,
        "dateInputFormat": "d.m.Y",
        "themeColor": "primary",
        "tags": "-events",
        "icon": "calendar-o",
        "showIf": "",
        "themeOffset": "",
        "themeBorder": "",
        "requiredIf": "",
        "timeInputFormat": "",
        "yearRange": "",
        "defaultToday": "",
        "placeholder": ""
    },
    "event_enddate": {
        "id": 265,
        "type": "FieldtypeDatetime",
        "flags": 0,
        "name": "event_enddate",
        "label": "Enddatum",
        "dateOutputFormat": "d.m.Y",
        "columnWidth": 25,
        "size": 10,
        "datepicker": 3,
        "timeInputSelect": 0,
        "dateInputFormat": "j.n.Y",
        "collapsed": 0,
        "themeColor": "primary",
        "tags": "events",
        "icon": "calendar-o",
        "showIf": "",
        "themeOffset": "",
        "themeBorder": "",
        "required": "",
        "requiredIf": "",
        "timeInputFormat": "",
        "yearRange": "",
        "defaultToday": "",
        "placeholder": ""
    },
    "event_endtime": {
        "id": 276,
        "type": "FieldtypeTime",
        "flags": 0,
        "name": "event_endtime",
        "label": "Ende",
        "format": "HH24MM",
        "themeColor": "primary",
        "columnWidth": 25,
        "tags": "events",
        "icon": "calendar-o",
        "useColons": 1,
        "collapsed": 0,
        "showIf": "",
        "themeOffset": "",
        "themeBorder": "",
        "required": "",
        "requiredIf": "",
        "inhibitClockPicker": ""
    },
    "event_no_location": {
        "id": 277,
        "type": "FieldtypeCheckbox",
        "flags": 0,
        "name": "event_no_location",
        "label": "Kein Ort",
        "collapsed": 0,
        "notes": "Veranstaltung ohne festen Ort (keine Kartenanzeige).",
        "columnWidth": 50,
        "checkboxLabel": "Kein fester Ort.",
        "tags": "events",
        "icon": "map",
        "showIf": "",
        "themeOffset": "",
        "themeBorder": "",
        "themeColor": "",
        "required": "",
        "requiredIf": ""
    },
    "event_organizer": {
        "id": 270,
        "type": "FieldtypeText",
        "flags": 0,
        "name": "event_organizer",
        "label": "Veranstalter",
        "textformatters": [
            "TextformatterEntities"
        ],
        "collapsed": 0,
        "minlength": 0,
        "maxlength": 2048,
        "showCount": 0,
        "size": 0,
        "columnWidth": 25,
        "tags": "events",
        "icon": "address-book-o",
        "showIf": "",
        "themeOffset": "",
        "themeBorder": "",
        "themeColor": "",
        "required": "",
        "requiredAttr": "",
        "requiredIf": "",
        "stripTags": "",
        "placeholder": "",
        "pattern": ""
    },
    "event_starttime": {
        "id": 275,
        "type": "FieldtypeTime",
        "flags": 0,
        "name": "event_starttime",
        "label": "Beginn",
        "format": "HH24MM",
        "collapsed": 0,
        "themeColor": "primary",
        "columnWidth": 25,
        "tags": "events",
        "icon": "calendar-o",
        "useColons": 1,
        "showIf": "",
        "themeOffset": "",
        "themeBorder": "",
        "required": "",
        "requiredIf": "",
        "inhibitClockPicker": ""
    },
    "location": {
        "id": 268,
        "type": "FieldtypeLeafletMapMarker",
        "flags": 0,
        "name": "location",
        "label": "Ort (Leaflet)",
        "schemaVersion": 1,
        "collapsed": 0,
        "defaultAddr": "Decatur, Georgia",
        "height": 500,
        "defaultZoom": 12,
        "defaultProvider": "OpenStreetMap.Mapnik",
        "defaultLat": "33.7748275",
        "defaultLng": "-84.2963123",
        "tags": "events",
        "icon": "map-o",
        "showIf": "event_no_location!=1",
        "themeOffset": "",
        "themeBorder": "",
        "themeColor": "",
        "columnWidth": 100,
        "required": "",
        "requiredIf": ""
    }
}

Templates[Bearbeiten]

Templates: 

events.php (Liste)
event.php (Einzelansicht)

Template Dateien[Bearbeiten]

events.php[Bearbeiten]

<?php namespace ProcessWire;

$today = strtotime(date('Y-m-d'));

$additionalHeaderData .= '
<!-- Styles supporting the use of Leaflet.js -->
<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'vendors/leaflet/leaflet.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'styles/MarkerCluster.Custom.css" />

<!-- Scripts supporting the use of Leaflet.js -->
<script type="text/javascript" src="'.$config->urls->templates.'vendors/leaflet/leaflet.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-providers/leaflet-providers.js"></script>
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/MarkupLeafletMap.js"></script>

<!-- Extend Leaflet with Awesome.Markers -->
<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.css" />
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.min.js"></script>
';

// MAP
$map = wire('modules')->get('MarkupLeafletMap');
$options = array(
	'markerColour' => 'green',
	'height' => '420',
);

$mySelector = "template=event,event_no_location=0,event_date>=$today";
$events = $pages->find($mySelector);
$mapMarkup = $map->render($events, 'location' ,$options);
// Dont't forget to include font awesome if not present




// LIST
$mySelector = "template=event,limit=20,sort=event_date,event_date>=$today";
$events = $pages->find($mySelector);
$eventListMarkup = '';


$eventListWrap = '<ul class="uk-list uk-list-striped event-list">|</ul>';
$eventWrap = '<li>|</li>';
$infoWrap = '<div class="uk-tile uk-tile-default">|</div>';
$dateWrap = '<div class="date">|</div>';
$timeWrap = '<div class="time">| Uhr</div>';
foreach($events as $event){
	$timeMarkup = '';
	$datemarkup = '';
	$bodyMarkup = '';
	$infoMarkup = '';
	$readMore = '';
	// Headline
	$headline = '<h3 class="no-margin-bottom"><a href="'.$event->url().'">'.$event->title.'</a></h3>';
	// Body
	if(!empty($event->text)){
		$truncatedText = truncateText($event->text,200);
		$bodyMarkup = '
		<div class="text">
			'.truncateText($event->text,200).'
		</div>
		';
		( strlen($truncatedText) < strlen(trim($event->text) ) ) ? $readMore = '<p><a href="'.$event->url().'">Details</a></p>' : $readMore = '';
	}

	// Date
	$dateMarkup =  $event->event_date;
	if($event->event_enddate){
		$dateMarkup .= ' <br>- '.$event->event_enddate;
	}
	$dateMarkup = wrap($dateMarkup,$dateWrap);

	// Time
	//var_dump($event->event_starttime);
	if($event->event_starttime && $event->event_starttime != "00:00"){
		$timeMarkup = $event->event_starttime;
		if($event->event_endtime) $timeMarkup .= ' - '.$event->event_endtime;
		$timeMarkup = wrap($timeMarkup,$timeWrap);
	}
	// place
	$addressMarkup = '';
	if(!empty($event->address_custom)){
		$addressMarkup = implode(',',explode("\n", $event->address_custom));
	}
	$eventMarkup = '
	<div class="uk-grid uk-padding" uk-grid>
		<div class="uk-width-auto">
			<div class="datebox uk-tile uk-tile-primary uk-padding-small uk-background-primary uk-margin-right">
				'.$dateMarkup.'
				'.$timeMarkup.'
			</div>
		</div>
		<div class="uk-width-expand">
			'.$headline.'
			'.$bodyMarkup.'
			'.$addressMarkup.'
			'.$readMore.'
		</div>
	</div>

	';

	$eventListMarkup .= wrap($eventMarkup,$eventWrap);
}
$eventListMarkup = wrap($eventListMarkup,$eventListWrap);


?>
<main id="main" class="homepage">
	<div class="uk-section uk-section-default uk-section-m uk-padding-remove-top" style="">
		<div class="uk-container uk-container-small">
			<h1><?=$page->title?></h1>
			<div class="map">
				<?=$mapMarkup?>
			</div>
			<div class="uk-grid" uk-grid>
				<div class="uk-width-expand">
					<?=$eventListMarkup?>
				</div>
			</div>
		</div>
	</div>

</main>

event.php[Bearbeiten]

<?php namespace ProcessWire;

$mapMarkup = '';
$mapAddress = '';
if(!$page->event_no_location){
	$mapAddress = $page->location->address;
	$additionalHeaderData .= '
	<!-- Styles supporting the use of Leaflet.js -->
	<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'vendors/leaflet/leaflet.css" />
	<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/MarkerCluster.css" />
	<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'styles/MarkerCluster.Custom.css" />

	<!-- Scripts supporting the use of Leaflet.js -->
	<script type="text/javascript" src="'.$config->urls->templates.'vendors/leaflet/leaflet.js"></script>
	<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/leaflet.markercluster.js"></script>
	<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-providers/leaflet-providers.js"></script>
	<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/MarkupLeafletMap.js"></script>

	<!-- Extend Leaflet with Awesome.Markers -->
	<link rel="stylesheet" type="text/css" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.css" />
	<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.min.js"></script>
	';

	// MAP
	$map = wire('modules')->get('MarkupLeafletMap');
	$options = array(
		'markerColour' => 'green',
		'height' => '420',
	);
	$mapMarkup = $map->render($page, 'location' ,$options);
}


// EVENT DETAILS
$pageListMarkup = '';
$pageMarkup = '';
$timeMarkup = '';
$datemarkup = '';

$pageWrap = '<div class="event uk-grid" uk-grid>|</div>';
$dateWrap = '<h5 class="uk-margin-remove-bottom">Datum</h5><div class="date">|</div>';
$timeWrap = '<div class="time">| Uhr</div>';
$organizerWrap = '<div class="organizer"><h5 class="uk-margin-remove-bottom">Veranstalter</h5><p class="uk-margin-remove-top">|</p></div>';
$placeWrap = '<div class="place"><h5 class="uk-margin-remove-bottom">Ort</h5><p class="uk-margin-remove-top">|</p></div>';
$permanentLinkWrap = '<p class="uk-text-align-center permanentLink">|</p>';

$infoMarkup = '';

// Headline
$headline = '<h1 class="">'.$page->title.'</h1>';

// Body
$bodyMarkup = '
<div class="text">
	'.nl2br($page->text).'
</div>
';

// Date
$dateMarkup =  $page->event_date;
if($page->event_enddate){
	$dateMarkup .= ' - '.$page->event_enddate;
}
$dateMarkup = wrap($dateMarkup,$dateWrap);

// Time
// For a value with Hours and Mins...
//$selector_time_string = date('H:m:00', $time); // or...
//$selector_time_string = FieldtypeTime::formattedStringToTime(date('H:m', $time), 'HH24MM');
//var_dump($page->event_starttime);
if($page->event_starttime && $page->event_starttime != 0){
	$timeMarkup = $page->event_starttime;
	if($page->event_endtime) $timeMarkup .= ' - '.$page->event_endtime;
	$timeMarkup = wrap($timeMarkup,$timeWrap);
}

// Permanent Link
$permanentLink = '<a href="'.$page->url().'"><button class="uk-button">Permanent Link</button></a>';
$permanentLink = wrap($permanentLink,$permanentLinkWrap);

// Organizer
$organizerMarkup = '';
if($page->event_organizer)  $organizerMarkup .= '<span class="organizer">'.$page->event_organizer.'</span><br>';
if($page->address_web)  $organizerMarkup .= '<span class="web"><span uk-icon="icon:world"></span> <a href="'.$page->address_web.'" class="">www</a></span><br>';
if($page->address_email)  $organizerMarkup .= '<span class="email"><span uk-icon="icon:mail"></span> <a href="mailto:'.$page->address_email.'" class="">'.$page->address_email.'</a></span><br>';
if($page->address_phone)  $organizerMarkup .= '<span class="phone"><span uk-icon="icon:phone"></span> <a href="tel:'.$page->address_phone.'" class="">'.$page->address_phone.'</a></span><br>';
if(!empty($organizerMarkup)) $organizerMarkup = wrap($organizerMarkup,$organizerWrap);

// Place
$placeMarkup='';
if(!empty($page->address_custom)) {
	$placeMarkup = nl2br($page->address_custom);
}else if(!empty($mapAddress)) $placeMarkup = $mapAddress;
if(!empty($placeMarkup)) $placeMarkup = wrap($placeMarkup,$placeWrap);



// Together now...
$pageMarkup = '
<div class="uk-grid uk-padding" uk-grid>
	<div class="uk-width-1-3@s uk-margin-top uk-background-muted uk-padding-small">
		'.$dateMarkup.'
		'.$timeMarkup.'
		'.$organizerMarkup.'
		'.$placeMarkup.'
		'.$permanentLink.'
	</div>
	<div class="uk-width-2-3@s uk-margin-top">
		'.$headline.'
		'.$bodyMarkup.'
	</div>
</div>
<p><a href="'.$page->parent->url.'">Zurück zur Übersicht</a></p>
';

$pageListMarkup .= wrap($pageMarkup,$pageWrap);


?>

<main id="main" class="homepage">
	<div class="uk-section uk-section-default uk-section-m uk-padding-remove-top" style="">
		<div class="uk-container uk-container-small">
			<h1><?=$page->title?></h1>
			<div class="map">
				<?=$mapMarkup?>
			</div>
			<?=$pageMarkup?>
		</div>
	</div>

</main>

Template Import Code[Bearbeiten]

{
    "event": {
        "id": 74,
        "name": "event",
        "fieldgroups_id": "event",
        "flags": 0,
        "cache_time": 0,
        "useRoles": 1,
        "editRoles": [
            "editor"
        ],
        "addRoles": [],
        "createRoles": [
            "editor"
        ],
        "rolesPermissions": [],
        "noInherit": 0,
        "childrenTemplatesID": 0,
        "sortfield": "",
        "noChildren": 1,
        "noParents": "",
        "childTemplates": [],
        "parentTemplates": [],
        "allowPageNum": 0,
        "allowChangeUser": 0,
        "redirectLogin": 0,
        "urlSegments": 0,
        "https": 0,
        "slashUrls": 1,
        "slashPageNum": 0,
        "slashUrlSegments": 0,
        "altFilename": "",
        "guestSearchable": 0,
        "pageClass": "",
        "childNameFormat": "",
        "pageLabelField": "fa-calendar-o title",
        "noGlobal": 0,
        "noMove": 0,
        "noTrash": 0,
        "noSettings": 0,
        "noChangeTemplate": 0,
        "noShortcut": 0,
        "noUnpublish": 0,
        "noLang": 0,
        "compile": 3,
        "nameContentTab": 0,
        "noCacheGetVars": "",
        "noCachePostVars": "",
        "useCacheForUsers": 0,
        "cacheExpire": 0,
        "cacheExpirePages": [],
        "cacheExpireSelector": "",
        "label": "Termin",
        "tags": "-events",
        "titleNames": 0,
        "noPrependTemplateFile": 0,
        "noAppendTemplateFile": 0,
        "prependFile": "",
        "appendFile": "",
        "tabContent": "Termin",
        "tabChildren": "",
        "nameLabel": "",
        "contentType": "",
        "errorAction": 0,
        "ns": "ProcessWire",
        "_exportMode": true,
        "roles": [
            "guest",
            "editor"
        ],
        "fieldgroupFields": [
            "event_date",
            "event_enddate",
            "event_starttime",
            "event_endtime",
            "title",
            "single_image",
            "address_custom",
            "text",
            "event_organizer",
            "address_web",
            "address_email",
            "address_phone",
            "event_no_location",
            "location"
        ],
        "fieldgroupContexts": {
            "event_date": [],
            "event_enddate": [],
            "event_starttime": [],
            "event_endtime": [],
            "title": {
                "columnWidth": 33
            },
            "single_image": {
                "columnWidth": 34
            },
            "address_custom": {
                "columnWidth": 33
            },
            "text": [],
            "event_organizer": {
                "columnWidth": 25,
                "themeColor": "primary"
            },
            "address_web": [],
            "address_email": [],
            "address_phone": [],
            "event_no_location": [],
            "location": []
        }
    },
    "events": {
        "id": 94,
        "name": "events",
        "fieldgroups_id": "events",
        "flags": 0,
        "cache_time": 0,
        "useRoles": 1,
        "editRoles": [],
        "addRoles": [
            "editor"
        ],
        "createRoles": [],
        "rolesPermissions": [],
        "noInherit": 1,
        "childrenTemplatesID": 0,
        "sortfield": "",
        "noChildren": "",
        "noParents": "",
        "childTemplates": [],
        "parentTemplates": [],
        "allowPageNum": 0,
        "allowChangeUser": 0,
        "redirectLogin": 0,
        "urlSegments": 0,
        "https": 0,
        "slashUrls": 1,
        "slashPageNum": 0,
        "slashUrlSegments": 0,
        "altFilename": "",
        "guestSearchable": 0,
        "pageClass": "",
        "childNameFormat": "",
        "pageLabelField": "fa-calendar title",
        "noGlobal": 0,
        "noMove": 0,
        "noTrash": 0,
        "noSettings": 0,
        "noChangeTemplate": 0,
        "noShortcut": 0,
        "noUnpublish": 0,
        "noLang": 0,
        "compile": 3,
        "nameContentTab": 0,
        "noCacheGetVars": "",
        "noCachePostVars": "",
        "useCacheForUsers": 0,
        "cacheExpire": 0,
        "cacheExpirePages": [],
        "cacheExpireSelector": "",
        "label": "",
        "tags": "events",
        "titleNames": 0,
        "noPrependTemplateFile": 0,
        "noAppendTemplateFile": 0,
        "prependFile": "",
        "appendFile": "",
        "tabContent": "Event-Liste",
        "tabChildren": "",
        "nameLabel": "",
        "contentType": "",
        "errorAction": 0,
        "ns": "ProcessWire",
        "_exportMode": true,
        "roles": [
            "guest",
            "editor"
        ],
        "fieldgroupFields": [
            "title",
            "menus"
        ],
        "fieldgroupContexts": {
            "title": [],
            "menus": []
        }
    }
}

Sortierung und Seitennamen[Bearbeiten]

Im Backend wollen wir mehr Übersicht.

Datum bei Eventseiten anzeigen[Bearbeiten]

Im Event Template bei Erweitert unter pagelabelField (List der Felder....) 

title event_date

eingeben

Nach Datum sortieren[Bearbeiten]

Im Events Template (Liste) unter Familie > Sortierungseinstellungen für Unterseiten 

event_date und Umgekehrte Sortierreichenfolge

Dann werden die aktuellsten Termine oben angezeigt.

Im Template keine vergangenen Termine anzeigen[Bearbeiten]

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Veranstaltungskalender&oldid=23400“