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

$301 per month—let's make that $500!

Learn more

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