ProcessWire - Veranstaltungskalender: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „Kleines Tutorial um einen Veranstaltungskalender zu erstellen == Hinweise / Voraussetzungen == Markup ist für uiKit vorgesehen. Liste enthält eine Übersicht…“)
 
Zeile 9: Zeile 9:
 
  event.php (Einzelansicht)
 
  event.php (Einzelansicht)
  
 +
== Fields ==
 +
<pre>
 +
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
 +
</pre>
 +
 +
=== Fields Import Code ===
 +
<syntaxhighlight lang="json">
 +
{
 +
    "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": ""
 +
    }
 +
}
 +
</syntaxhighlight>
 
== Templates ==
 
== Templates ==
−
'''events'''
+
=== Template Import Code ===
 +
<syntaxhighlight lang="json">
 +
{
 +
    "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": []
 +
        }
 +
    }
 +
}
 +
</syntaxhighlight>
 +
=== Template Dateien ===
 +
'''events.php'''
 
<syntaxhighlight lang="php">
 
<syntaxhighlight lang="php">
 
<?php namespace ProcessWire;
 
<?php namespace ProcessWire;

Version vom 15. Oktober 2018, 10:21 Uhr

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