ProcessWire - Terminkalender

Einen eigenen Terminkalender für ProcessWire erstellen

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

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

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 class="uk-width-auto">
			Search goes here
		</div>
		-->
	</div>
</div>

<aside id="sidebar" class="pw-remove">
</aside>