ProcessWire - Veranstaltungskalender

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)

Templates

events

<?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>