ProcessWire - Veranstaltungskalender
Aus Wikizone
Kleines Tutorial um einen Veranstaltungskalender zu erstellen
Hinweise / Voraussetzungen
Markup ist für uiKit vorgesehen. Liste enthält eine Übersichtskarte
Module
LeafletMapMarker für Kartendarstellung
Templates:
events.php (Liste) event.php (Einzelansicht)
Fields
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
Fields Import Code
{
"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
Template Import Code
{
"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": []
}
}
}
Template Dateien
events.php
<?php namespace ProcessWire;
$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';
$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=8,sort=-date';
$events = $pages->find($mySelector);
$eventListMarkup = '';
$timeMarkup = '';
$datemarkup = '';
$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){
$infoMarkup = '';
// Headline
$headline = '<h2><a href="'.$event->url().'">'.$event->title.'</a></h2>';
// Body
$bodyMarkup = '
<div class="text">
'.truncateText($event->text,200).'...
</div>
<p><a href="'.$event->url().'">Mehr lesen</a></p>
';
// Date
$dateMarkup = $event->event_date;
if($event->event_enddate){
$dateMarkup .= ' - '.$event->event_enddate;
}
$dateMarkup = wrap($dateMarkup,$dateWrap);
// Time
if($event->event_starttime){
$timeMarkup = $event->event_starttime;
if($event->event_endtime) $timeMarkup .= ' - '.$event->event_endtime;
$timeMarkup = wrap($timeMarkup,$timeWrap);
}
$eventMarkup = '
'.$headline.'
<div class="datebox uk-clearfix">
<div class="uk-float-left uk-background-primary uk-margin-right uk-padding-small">
'.$dateMarkup.'
'.$timeMarkup.'
</div>
'.$bodyMarkup.'
</div>
';
$eventListMarkup .= wrap($eventMarkup,$eventWrap);
}
$eventListMarkup = wrap($eventListMarkup,$eventListWrap);
?>
<div class="uk-width-expand" id="content">
<h1>Veranstaltungen und Termine</h1>
<div class="map">
<?=$mapMarkup?>
</div>
<p class="uk-text-muted uk-padding-small">Hinweis: Diese Karte zeigt bis zu 100 der anstehenden Termine an.</p>
<div class="uk-grid" uk-grid>
<div class="uk-width-expand">
<?=$eventListMarkup?>
</div>
<!--
<div class="uk-width-auto">
Search goes here
</div>
-->
</div>
</div>
<aside id="sidebar" class="pw-remove">
</aside>
event.php
<?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 = '<div class="date">|</div>';
$timeWrap = '<div class="time">| Uhr</div>';
$organizerWrap = '<div class="organizer"><h5>Veranstalter</h5><p>|</p></div>';
$placeWrap = '<div class="place"><h5>Ort</h5><p>|</p></div>';
$permanentLinkWrap = '<p class="uk-text-align-center permanentLink">|</p>';
$infoMarkup = '';
// Headline
$headline = '<h1>'.$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
if($page->event_starttime){
$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>';
$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-width-1-3@s uk-margin-top">
<div class=" uk-background-muted uk-padding-small">
'.$dateMarkup.'
'.$timeMarkup.'
'.$organizerMarkup.'
'.$placeMarkup.'
'.$permanentLink.'
</div>
</div>
<div class="uk-width-2-3@s uk-margin-top">
'.$headline.'
'.$bodyMarkup.'
</div>
';
$pageListMarkup .= wrap($pageMarkup,$pageWrap);
?>
<div class="uk-width-expand" id="content">
<div class="map">
<?=$mapMarkup?>
</div>
<div class="uk-grid" uk-grid>
<div class="uk-width-expand">
<?=$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>
</div>
</div>
<aside id="sidebar" class="pw-remove">
</aside>
