EventsX
Last updated Apr 7th, 2021 | Page history | Improve this page | Report an issue
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$306 per month—let's make that $500!
Learn morePlease note: Use this documentation on your own risk as it's not revised yet by the author of the extra.
What is EventsX?¶
EventX is a calendar extra for MODX Revolution. EventsX shows upcoming (and previous) events on a (jQuery) calendar and/or upcoming events list.
Features¶
- events management (create/update/remove/(de)activate)
- every event has a start and end date (can be the same date for single day events)
- jQuery calendar included
- languages:
- english
- dutch
- german (thanks to Anselm Hannemann)
- russian
Requirements¶
- MODX Revolution (tested with 2.1.3pl)
- jQuery for the calendar (you can also create your own JSON based calendar)
History¶
EventX was written by Jeroen Kenters and had its initial release Dec, 1st 2011.
Download¶
It can be downloaded from within the MODX Revolution manager via Package Management, or from the MODX Extras Repository, here: https://modx.com/extras/package/eventsx
Development and Bug Reporting¶
EventX is on GitHub: https://github.com/jkenters/EventsX, report any issues or feature-requests here: https://github.com/jkenters/EventsX/issues.
Issues and feature-requests¶
EventX has its issues and feature-requests on GitHub: https://github.com/jkenters/EventsX/issues.
Install¶
- Install via the package manager
How to use¶
Create a calendar on your page¶
Go to components -> EventsX and create some events
(make sure they are active)
- Add jQuery to your website template if necessary (only needed on pages where calendar will be used)
- Copy & add /assets/components/calendar.js to your website template (only needed on pages where calendar will be used)
- Copy & add /assets/components/jquery.calendar-widget.js to your website template (only needed on pages where calendar will be used)
- Create a resource for the events calendar (or add it to your template(s))
- Create a resource for the upcoming events list (see template example below)
- Create a resource below that for a single event (see template example below)
- Create a Context setting 'evxEventsPage' and set the 'upcoming events page' id as value
- Create a Context setting 'evxEventPage' and set the 'single event page' id as value
- Don't forget to save your context and clear the cache (context settings are cached)
Templates¶
example events calendar template¶
<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script
type="text/javascript"
src="assets/components/eventsx/js/web/jquery.calendar-widget.js"
></script>
<script
type="text/javascript"
src="assets/components/eventsx/js/web/calendar.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="assets/components/eventsx/css/calendar.css"
/>
</head>
<body>
<a href="" id="prevMonth">previous month</a>
<a href="" id="nextMonth">next month</a>
<div id="calendar"></div>
[[*content]]
</body>
</html>
example upcoming events calendar template¶
<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
</head>
<body>
[[!EventsX? &tpl=`evxEventTpl` &limit=`10`]] [[*content]]
</body>
</html>
example single event calendar template¶
[[!evxEvent?]]
<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
</head>
<body>
<p>Name: [[+event.name]]</p>
<p>Start date: [[+event.startdate:strtotime:date=`%d-%m-%Y`]]</p>
<p>End date: [[+event.enddate:strtotime:date=`%d-%m-%Y`]]</p>
[[+event.description]]<!-- Description is a TinyMCE field by default, so no <p> here -->
<h2>Location</h2>
<p>
[[+event.location]]<br />
[[+event.street]]<br />
[[+event.pc]]<br />
[[+event.city]]<br />
[[+event.region]]<br />
[[+event.country]]
</p>
<p><a href="[[+event.website]]">Visit website</a></p>
</body>
</html>