mxCalendar

Working on finishing documentation, please visit http://charlesmx.com/software/mxcalendar-revo.html in the meantime, or if you have access feel free to help update¶

About mxCalendar¶

mxCalendar is a extra created for both Evolution and Revolution to allow for full calendar editing using the native Manager of ModX. The calendar supports various views including calendar, list, and detail of which all views support the ModX template standards for fully customizing your themes. In addition mxCalendar supports feature rich calendar functions such as repeating events, Google Maps, cateogries, context, and unique calendars.

Installation¶

ModX Revolution¶

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/mxcalendar2. When using the Package Management for direct download you can simply click on the "Install" button after download completes. If you choose to download from the extras site you will then need to FTP, or otherwise move, the transport package zip file to your "/core/packages/" folder first. After you have copied the transport zip file to your packages folder you will then need to launch Package Management from inside the Manager (ver 2.2.x) and then select the down arrow next to "Download Extras" and select the last option "Search Locally for Packages" and then find "mxcalendars" in the list of packages and choose "install".

ModX Evolution¶

You will need to download from the ModX Extras Repository, here https://modx.com/extras/package/mxcalendar. After you have downloaded you will need to follow these steps.

1. Unzip folder to your favorite place
2. Upload mxCalendar folder to your sites root /assets/modules/ folder
3. Copy contents of "snippets/mxCalendar.module.txt" file from the unzipped folder
4. Log into your Manager interface and goto the Modules > Manage Modules section
5. Select the New Module button
6. In the Module name field place mxcalendar
7. Past the content of "snippets/mxCalendar.module.txt" into the Module code (php) section
8. Select Save
9. Click the gear icon next to the new entry "mxcalendar" and select Run Module
10. You should see a screen saying the installation was successful, so click the Start button
11. Now you are in the new manager

Creating Calendars¶

*Note: Calendars are only supported in the Revo version of mxCalendar

In the manager menu, select Components -> mxCalendar. Select the Calendars tab, click Create New Calendar. Name your calendar, check the active checkbox (if unchecked) and save.

Creating Categories¶

In the manager menu, select Components -> mxCalendar. Select the Categories tab, click Create New Category. Name the category and enter options, save.

Creating New Events¶

In the manager menu, select Components -> mxCalendar. Select the Events tab, click Create New Calendar Item.

Select a context. Leave blank for all contexts. Give the event a name, select a calendar to associate the event with, a category, and start and end date/times.

Enter your event description in the rich text editor. This populates the [[*content]] for the event detail view.

In the Location tab, name the location and enter the address. Check "Display Map" to output a Google Map for the address that you entered. The example shown is the default Google Map display in a styled modal window (tplDetail or tplDetailModal).

In the event tab, enter the event link URL.

Form Tab documentation forthcoming...

Using mxCalendar¶

Now to the best part, using mxCalendar to manage and display events.

Basic Use¶

After installation you should be able to call the default view (calendar) in your resource using:

[[!mxcalendar?]]

This should provide you with the calendar view and full page load on navigation. If you want to step things up a notch to use the AJAX navigation and modal view of event details we'd add two additional parameters to the snippet call. The first is the "ajaxResourceId" which should be a new resource (page) that is created using the (blank) template since we are returning this in the ajax response and simply modifying the DOM. The next thing we want to add is the "modalView" set to true to enable the modal display of the event details.

[[!mxcalendar?
&ajaxResourceId=`43`
&modalView=`1`
]]

Now when you reload your primary page with the mxcalendar snippet call, not the ajax one, you shoudl see the same display however now when you click on the arrows for previous and next months the content is loaded via ajax and not an entire URL page reload. The second thing you should notice is now when you click on and event title in the calendar view it displayes the event detail view in a nice modal window. ah... that's nice

Parameters / Properties / Settings¶