ProcessWire - Terminkalender

Einen eigenen Terminkalender für ProcessWire erstellen[Bearbeiten]

Templates und Code für einen Eventkalender mit Leaflet Karte. Übersicht der Termine wird auf der Seite Termine angezeigt. Die Termine selbst liegen auf den Kindseiten.

Als CSS Framework nutzen wir uiKit.

Erweiterung mit Formular für User zum Uploaden von neuen Events und automatischer Übernahme (Todo)

Später Umsetzung als Modul (Todo)

Templates[Bearbeiten]

In den Templates nutzen wir die Variablen additionalHeaderData und additionalFooterData um in _main.php zusätzliche Styles und Skript nutzen zu können.

Events

Title

Event

event_date (Datum)
event_enddate (Enddatum)
event_starttime (Beginn)
Title
single_image (Einzelbild)
event_info_file (Info/Flyer)
address_custom (Adresse)
text (Text)
event_price (Preis)
event_organizer (Veranstalter)
address_web (Website)
address_email (E-Mail Adresse)
address_phone (Telefon)
event_no_location (Kein Ort)
location (Ort (Leaflet))

Als Feldtypen verwenden wir

Textarea für die Adresse
Email für die E-Mail Adresse
URL für diue Webseite
Text für Telefon und Veranstalter
Datetime für Die Daten
Time für Start und Endzeit
LeafletMapMarker für den Ort
File für die Infodatei

Dateien[Bearbeiten]

events.php (Listenansicht)

<?php namespace ProcessWire;
// V 1.1
$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 and Gesture Handling -->
<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>
<link rel="stylesheet" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.min.css" type="text/css">
<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.min.js"></script>
';

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

// MAP
$map = wire('modules')->get('MarkupLeafletMap');
$options = array(
	'markerColour' => 'green',
	'height' => '420',
);
// MAP EVENTS
$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 EVENTS
$mySelector = "template=event,limit=10,sort=event_date,event_date>=$today";
$events = $pages->find($mySelector);
// PAGINATION
$pagerOptions = array(
	'listMarkup' => "<ul class='uk-pagination'>{out}</ul>",
);
$pagerLinks = $events->renderPager($pagerOptions);

$eventListMarkup = '';
$eventListWrap = '<ul class="uk-list uk-list-striped event-list">|</ul>';
$eventWrap = '<li>|</li>'.chr(10);
$infoWrap = '<div class="uk-tile uk-tile-default">|</div>';
$dateWrap = '<div class="date">|</div>';
$timeWrap = '<div class="time">| Uhr</div>';
foreach($events as $event){
	$headline = '';
	$timeMarkup = '';
	$datemarkup = '';
	$infoMarkup = '';
	$truncatedText = '';
	// Headline
	$headline = '<h2><a href="'.$event->url().'">'.$event->title.'</a></h2>';
	// Body

	$truncatedText = truncateText($event->text,240);
	$bodyMarkup = '
	<div class="text">

		'.$truncatedText.' ...
	</div>
	<p><a href="'.$event->url().'">Mehr lesen</a></p>
	';
	// Date
	$dateMarkup =  $event->event_date;
	if($event->event_enddate){
		$dateMarkup .= '<br>- '.$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 = '
		<div class="uk-grid uk-padding uk-padding-remove-top" uk-grid>
			<div class="uk-width-auto@m uk-width-1-1  uk-padding-remove-left">
				<div class="datebox uk-background-primary uk-margin-top uk-padding-small">
					'.$dateMarkup.'
					'.$timeMarkup.'
				</div>
			</div>

			<div class="uk-width-expand">
				'.$headline.'
				'.$bodyMarkup.'
			</div>
		</div>
	';

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


// SidebarMarkup
$sidebarMarkup = '';
if(count($page->sidebar)){
	$sidebarMarkup = '
	<div class="uk-width-1-4@m " id="sidebar-termine">
		'.$page->sidebar.'
	</div>
	';
}

?>
<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 class="uk-width-1-1"><?=$pagerLinks?></div>
		</div>

		<?=$sidebarMarkup?>

	</div>
</div>

event.php (Einzelansicht)

<?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 and Gestures -->
	<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>
	<link rel="stylesheet" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.min.css" type="text/css">
	<script type="text/javascript" src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.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 = '';
$priceMarkup = '';
$imageMarkup = '';
$moreInfoMarkup = '';

$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>';
$priceWrap = '<div class="price"><h5>Preis</h5><p>|</p></div>';
$permanentLinkWrap = '<p class="uk-text-align-center permanentLink">|</p>';
$imageWrap ='<div class="event-image">|</div>';
$moreInfoWrap = '<div class="moreInfo"><h5>Weitere Infos</h5><p>|</p></div>';

$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 uk-padding-remove">Permanent Link</button></a>';
$permanentLink = wrap($permanentLink,$permanentLinkWrap);

// ORGANISER
$organizerMarkup = '';
if($page->event_organizer)  $organizerMarkup .= '<span class="organizer">'.$page->event_organizer.'</span><br>';
if($page->address_web){
	$url = $sanitizer->url($page->address_web);
	$url = $sanitizer->entities($url);
	$organizerMarkup .= '<span class="web"><span uk-icon="icon:world"></span> <a href="'.$url.'" class="">'.$url.'</a></span><br>';
}
if($page->address_email){
	$email = $sanitizer->email($page->address_email);
	$organizerMarkup .= '<span class="email"><span uk-icon="icon:mail"></span> <a href="mailto:'.$email.'" class="">'.$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);

// PRICE
if(strlen($page->event_price) ) {
	$priceMarkup = '<span class="price">'.$page->event_price.'</span><br>';
	$priceMarkup = wrap($priceMarkup,$priceWrap);
}

// More Infos
if(count($page->event_info_file) ) {
	foreach($page->event_info_file as $file){
		$file->description ? $myDescription = $file->description : $myDescription = $file->name;
		$moreInfoMarkup .= '<div class="file"><a href="'.$file->url.'" target="_blank">'.$myDescription.'</a></div>';
	}
	$moreInfoMarkup = wrap($moreInfoMarkup,$moreInfoWrap);
}

// 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);

// Image
if(count($page->single_image)){
	$width = 800;
	$myImage = $page->single_image->width(800);
	$height = $myImage->height;
	$imageMarkup = '<img data-src="'.$myImage->url.'" width="'.$width.'" height="'.$height.'" alt="'.$myImage->description.'" uk-img>';
}

// Back button
$backButtonMarkup = '
<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>
';
// 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.'
			'.$priceMarkup.'
			'.$moreInfoMarkup.'
			'.$permanentLink.'
		</div>
	</div>
	<div class="uk-width-2-3@s uk-margin-top">
		'.$imageMarkup.'
		'.$headline.'
		'.$bodyMarkup.'
		'.$backButtonMarkup.'
	</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>



	</div>
</div>

ProcessWire - Terminkalender

Einen eigenen Terminkalender für ProcessWire erstellen[Bearbeiten]

Templates[Bearbeiten]

Dateien[Bearbeiten]

Navigationsmenü

Ansichten

Meine Werkzeuge

Navigation

Suche

Werkzeuge