ProcessWire - Veranstaltungskalender

Aus Wikizone
Wechseln zu: Navigation, Suche

Kleines Tutorial um einen Veranstaltungskalender zu erstellen

Hinweise / Voraussetzungen

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 (für Templaterechte beim Import)

Module

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

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

Templates: 

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

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>

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": []
        }
    }
}
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Veranstaltungskalender&oldid=23389“