ProcessWire - Veranstaltungskalender: Unterschied zwischen den Versionen
Aus Wikizone
Steff (Diskussion | Beiträge) |
Steff (Diskussion | Beiträge) |
||
| (Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt) | |||
| Zeile 325: | Zeile 325: | ||
=== Template Dateien === | === Template Dateien === | ||
| − | + | ==== 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 = | + | |
| + | $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 = | + | $mySelector = "template=event,limit=20,sort=event_date,event_date>=$today"; |
$events = $pages->find($mySelector); | $events = $pages->find($mySelector); | ||
$eventListMarkup = ''; | $eventListMarkup = ''; | ||
| − | + | ||
| − | |||
$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 = '< | + | $headline = '<h3 class="no-margin-bottom"><a href="'.$event->url().'">'.$event->title.'</a></h3>'; |
// Body | // Body | ||
| − | $bodyMarkup = ' | + | 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 | // 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 = ' | ||
| − | + | <div class="uk-grid uk-padding" uk-grid> | |
| − | <div class=" | + | <div class="uk-width-auto"> |
| − | <div class="uk- | + | <div class="datebox uk-tile uk-tile-primary uk-padding-small uk-background-primary uk-margin-right"> |
| − | + | '.$dateMarkup.' | |
| − | + | '.$timeMarkup.' | |
</div> | </div> | ||
| − | |||
</div> | </div> | ||
| + | <div class="uk-width-expand"> | ||
| + | '.$headline.' | ||
| + | '.$bodyMarkup.' | ||
| + | '.$addressMarkup.' | ||
| + | '.$readMore.' | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
'; | '; | ||
| Zeile 413: | Zeile 436: | ||
?> | ?> | ||
| − | <div class="uk- | + | <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> | ||
| − | |||
</div> | </div> | ||
| − | |||
| − | + | </main> | |
| − | </ | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | + | ==== 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-width-1-3@s uk-margin-top uk-background-muted uk-padding-small"> | |
| − | + | '.$dateMarkup.' | |
| − | + | '.$timeMarkup.' | |
| − | + | '.$organizerMarkup.' | |
| − | + | '.$placeMarkup.' | |
| − | + | '.$permanentLink.' | |
| − | |||
</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: | ||
?> | ?> | ||
| − | < | + | <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="uk- | + | <div class="map"> |
| − | <div class="uk- | + | <?=$mapMarkup?> |
| − | <?=$ | ||
| − | <div class=" | ||
| − | |||
</div> | </div> | ||
| + | <?=$pageMarkup?> | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| − | |||
| − | + | </main> | |
| − | </ | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | === Template Import Code === | + | ==== Template Import Code ==== |
<syntaxhighlight lang="json"> | <syntaxhighlight lang="json"> | ||
{ | { | ||
Aktuelle Version vom 16. Oktober 2018, 09:36 Uhr
Kleines Tutorial um einen Veranstaltungskalender zu erstellen
Hinweise / Voraussetzungen[Bearbeiten]
- Markup ist für uiKit vorgesehen. Liste enthält eine Übersichtskarte.
- LeafletMapMarker ist so konfiguriert, dass die notwendigen Dateien Lokal vorgehalten werden (siehe Header Zeilen).
- Benutzergruppe Editor muss vorhanden sein (für Templaterechte beim Import).
- Eine truncateText() Funktion sollte verfügbar sein (Beispiel: http://wiki.zone30.info/wikizone/index.php?title=PHP_-_String_Snippets#Text_k.C3.BCrzen .
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.
